Implement functionality for adding new domain in project settings (#48)

* Add mutation to create new domain

* Update mutation to create two domains for www and non-www variant

* Add gql-client method and frontend to create domain

* Display fetched domains in domains tab panel using project id

* Fix graphql type for fetching domains

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/DomainCard.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
+import { Domain, DomainStatus } from 'gql-client';
 
 import {
   Chip,
@@ -14,7 +15,6 @@ import {
 import { ProjectDetails, RepositoryDetails } from '../../../../types/project';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 import EditDomainDialog from './EditDomainDialog';
-import { Domain, DomainStatus } from 'gql-client';
 
 enum RefreshStatus {
   IDLE,

packages/frontend/src/components/projects/project/settings/Domains.tsx

@@ -1,13 +1,18 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useParams, Link, useOutletContext } from 'react-router-dom';
 
 import { Button, Typography } from '@material-tailwind/react';
 
 import DomainCard from './DomainCard';
 import { ProjectSearchOutletContext } from '../../../../types/project';
+import { useGQLClient } from '../../../../context/GQLClientContext';
+import { Domain } from 'gql-client';
 
 const Domains = () => {
   const { id } = useParams();
+  const client = useGQLClient();
+
+  const [domains, setDomains] = useState<Domain[]>([]);
 
   const { projects } = useOutletContext<ProjectSearchOutletContext>();
 
@@ -23,11 +28,18 @@ const Domains = () => {
     );
   }, [currentProject]);
 
-  const domains = currentProject?.deployments
-    .filter((deployment) => {
-      return deployment.domain != null;
-    })
-    .map((deployment) => deployment.domain);
+  const fetchDomains = async () => {
+    if (currentProject === undefined) {
+      return;
+    }
+
+    const fetchedDomains = await client.getDomains(currentProject.id);
+    setDomains(fetchedDomains.domains);
+  };
+
+  useEffect(() => {
+    fetchDomains();
+  }, []);
 
   return (
     <>
@@ -40,7 +52,7 @@ const Domains = () => {
         </Link>
       </div>
 
-      {domains?.map((domain) => {
+      {domains.map((domain) => {
         return (
           <DomainCard
             domain={domain}

packages/frontend/src/components/projects/project/settings/SetupDomain.tsx

@@ -47,7 +47,9 @@ const SetupDomain = () => {
   return (
     <form
       onSubmit={handleSubmit(() => {
-        navigate('config');
+        watch('isWWW') === 'true'
+          ? navigate(`config?name=www.${domainStr}`)
+          : navigate(`config?name=${domainStr}`);
       })}
       className="flex flex-col gap-6 w-full"
     >

packages/frontend/src/pages/projects/id/domain/add/Config.tsx

@@ -1,9 +1,38 @@
 import React from 'react';
-import { Link, useParams } from 'react-router-dom';
+
+import toast from 'react-hot-toast';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
 import { Typography, Alert, Button } from '@material-tailwind/react';
 
+import { useGQLClient } from '../../../../../context/GQLClientContext';
+
 const Config = () => {
   const { id } = useParams();
+  const client = useGQLClient();
+  const [searchParams] = useSearchParams();
+  const primaryDomainName = searchParams.get('name');
+
+  const handleSubmitDomain = async () => {
+    if (primaryDomainName === null) {
+      toast.error('Cannot resolve domain name');
+      return;
+    }
+
+    if (id === undefined) {
+      toast.error('Cannot find project');
+      return;
+    }
+
+    const isAdded = await client.addDomain(id, {
+      name: primaryDomainName,
+    });
+
+    if (isAdded) {
+      toast.success('Domain added successfully');
+    } else {
+      toast.error('Error adding domain');
+    }
+  };
 
   return (
     <div className="flex flex-col gap-6 w-full">
@@ -43,7 +72,11 @@ const Config = () => {
       </Alert>
 
       <Link to={`/projects/${id}`}>
-        <Button className="w-fit" color="blue">
+        <Button
+          className="w-fit"
+          color="blue"
+          onClick={async () => await handleSubmitDomain()}
+        >
           Finish <i>{'>'}</i>
         </Button>
       </Link>