diff --git a/components/domains/AddDomain.tsx b/components/domains/AddDomain.tsx index 3dd030f..0099895 100644 --- a/components/domains/AddDomain.tsx +++ b/components/domains/AddDomain.tsx @@ -4,51 +4,57 @@ import { useAddDomain } from '../../services/domains'; import { isValidDomain } from '../../utils/client/validators'; type AddDomainProps = { + domains: DomainType[], closeModal: Function } -const AddDomain = ({ closeModal }: AddDomainProps) => { +const AddDomain = ({ closeModal, domains = [] }: AddDomainProps) => { const [newDomain, setNewDomain] = useState(''); - const [newDomainError, setNewDomainError] = useState(false); + const [newDomainError, setNewDomainError] = useState(''); const { mutate: addMutate, isLoading: isAdding } = useAddDomain(() => closeModal()); const addDomain = () => { - // console.log('ADD NEW DOMAIN', newDomain); - if (isValidDomain(newDomain.trim())) { - setNewDomainError(false); + setNewDomainError(''); + const existingDomains = domains.map((d) => d.domain); + const insertedDomains = newDomain.split('\n'); + const domainsTobeAdded:string[] = []; + const invalidDomains:string[] = []; + insertedDomains.forEach((dom) => { + const domain = dom.trim(); + if (isValidDomain(domain)) { + if (!existingDomains.includes(domain)) { + domainsTobeAdded.push(domain); + } + } else { + invalidDomains.push(domain); + } + }); + if (invalidDomains.length > 0) { + setNewDomainError(`Please Insert Valid Domain names. Invalid Domains: ${invalidDomains.join(', ')}`); + } else if (domainsTobeAdded.length > 0) { // TODO: Domain Action - addMutate(newDomain.trim()); - } else { - setNewDomainError(true); + addMutate(domainsTobeAdded); } }; - const handleDomainInput = (e:React.FormEvent) => { - if (e.currentTarget.value === '' && newDomainError) { setNewDomainError(false); } + const handleDomainInput = (e:React.ChangeEvent) => { + if (e.currentTarget.value === '' && newDomainError) { setNewDomainError(''); } setNewDomain(e.currentTarget.value); }; return ( { closeModal(false); }} title={'Add New Domain'}>
-

- Domain Name {newDomainError && Not a Valid Domain} -

- Domain Names + + {newDomainError &&
{newDomainError}
}
- setShowAddDomain(false)} /> + setShowAddDomain(false)} domains={domainsData?.domains || []} /> diff --git a/pages/domain/console/[slug]/index.tsx b/pages/domain/console/[slug]/index.tsx index c464c5b..407aeb9 100644 --- a/pages/domain/console/[slug]/index.tsx +++ b/pages/domain/console/[slug]/index.tsx @@ -34,7 +34,7 @@ const DiscoverPage: NextPage = () => { const activDomain: DomainType|null = useMemo(() => { let active:DomainType|null = null; if (domainsData?.domains && router.query?.slug) { - active = domainsData.domains.find((x:DomainType) => x.slug === router.query.slug); + active = domainsData.domains.find((x:DomainType) => x.slug === router.query.slug) || null; } return active; }, [router.query.slug, domainsData]); @@ -71,7 +71,7 @@ const DiscoverPage: NextPage = () => {
- setShowAddDomain(false)} /> + setShowAddDomain(false)} domains={domainsData?.domains || []} /> diff --git a/pages/domain/insight/[slug]/index.tsx b/pages/domain/insight/[slug]/index.tsx index 0e9889a..2400170 100644 --- a/pages/domain/insight/[slug]/index.tsx +++ b/pages/domain/insight/[slug]/index.tsx @@ -34,7 +34,7 @@ const InsightPage: NextPage = () => { const activDomain: DomainType|null = useMemo(() => { let active:DomainType|null = null; if (domainsData?.domains && router.query?.slug) { - active = domainsData.domains.find((x:DomainType) => x.slug === router.query.slug); + active = domainsData.domains.find((x:DomainType) => x.slug === router.query.slug) || null; } return active; }, [router.query.slug, domainsData]); @@ -71,7 +71,7 @@ const InsightPage: NextPage = () => { - setShowAddDomain(false)} /> + setShowAddDomain(false)} domains={domainsData?.domains || []} /> diff --git a/pages/domains/index.tsx b/pages/domains/index.tsx index 489c406..e1c8ce5 100644 --- a/pages/domains/index.tsx +++ b/pages/domains/index.tsx @@ -119,7 +119,7 @@ const Domains: NextPage = () => { - setShowAddDomain(false)} /> + setShowAddDomain(false)} domains={domainsData?.domains || []} /> setShowSettings(false)} /> diff --git a/services/domains.tsx b/services/domains.tsx index 4e73a51..0bdb726 100644 --- a/services/domains.tsx +++ b/services/domains.tsx @@ -7,7 +7,7 @@ type UpdatePayload = { domain: DomainType } -export async function fetchDomains(router: NextRouter, withStats:boolean) { +export async function fetchDomains(router: NextRouter, withStats:boolean): Promise<{domains: DomainType[]}> { const res = await fetch(`${window.location.origin}/api/domains${withStats ? '?withstats=true' : ''}`, { method: 'GET' }); if (res.status >= 400 && res.status < 600) { if (res.status === 401) { @@ -56,9 +56,9 @@ export function useFetchDomains(router: NextRouter, withStats:boolean = false) { export function useAddDomain(onSuccess:Function) { const router = useRouter(); const queryClient = useQueryClient(); - return useMutation(async (domainName:string) => { + return useMutation(async (domains:string[]) => { const headers = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' }); - const fetchOpts = { method: 'POST', headers, body: JSON.stringify({ domain: domainName }) }; + const fetchOpts = { method: 'POST', headers, body: JSON.stringify({ domains }) }; const res = await fetch(`${window.location.origin}/api/domains`, fetchOpts); if (res.status >= 400 && res.status < 600) { throw new Error('Bad response from server'); @@ -67,11 +67,12 @@ export function useAddDomain(onSuccess:Function) { }, { onSuccess: async (data) => { console.log('Domain Added!!!', data); - const newDomain:DomainType = data.domain; - toast(`${newDomain.domain} Added Successfully!`, { icon: '✔️' }); + const newDomain:DomainType[] = data.domains; + const singleDomain = newDomain.length === 1; + toast(`${singleDomain ? newDomain[0].domain : `${newDomain.length} domains`} Added Successfully!`, { icon: '✔️' }); onSuccess(false); - if (newDomain && newDomain.slug) { - router.push(`/domain/${data.domain.slug}`); + if (singleDomain) { + router.push(`/domain/${newDomain[0].slug}`); } queryClient.invalidateQueries(['domains']); },