Add GQL mutation for updating domain (#50)

* Pass data for all domains in edit domain dialog box

* Add mutation to update domain by id

* implement front end and gql client method to edit domain

* Rename arguments of resolver function to update domain and project

---------

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

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

@@ -24,9 +24,11 @@ enum RefreshStatus {
 }
 
 interface DomainCardProps {
+  domains: Domain[];
   domain: Domain;
   repo: RepositoryDetails;
   project: ProjectDetails;
+  onUpdate: () => Promise<void>;
 }
 
 const CHECK_FAIL_TIMEOUT = 5000; // In milliseconds
@@ -38,7 +40,13 @@ const DOMAIN_RECORD = {
   value: '56.49.19.21',
 };
 
-const DomainCard = ({ domain, repo, project }: DomainCardProps) => {
+const DomainCard = ({
+  domains,
+  domain,
+  repo,
+  project,
+  onUpdate,
+}: DomainCardProps) => {
   const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
@@ -163,10 +171,11 @@ const DomainCard = ({ domain, repo, project }: DomainCardProps) => {
         handleOpen={() => {
           setEditDialogOpen((preVal) => !preVal);
         }}
+        domains={domains}
         open={editDialogOpen}
         domain={domain}
         repo={repo}
-        project={project}
+        onUpdate={onUpdate}
       />
     </>
   );

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

@@ -55,10 +55,12 @@ const Domains = () => {
       {domains.map((domain) => {
         return (
           <DomainCard
+            domains={domains}
             domain={domain}
             key={domain.id}
             repo={linkedRepo!}
             project={currentProject!}
+            onUpdate={fetchDomains}
           />
         );
       })}

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { Domain } from 'gql-client';
@@ -15,25 +15,30 @@ import {
   Option,
 } from '@material-tailwind/react';
 
-import { ProjectDetails, RepositoryDetails } from '../../../../types/project';
+import { RepositoryDetails } from '../../../../types/project';
+import { useGQLClient } from '../../../../context/GQLClientContext';
 
 const DEFAULT_REDIRECT_OPTIONS = ['none'];
 
 interface EditDomainDialogProp {
+  domains: Domain[];
   open: boolean;
   handleOpen: () => void;
   domain: Domain;
   repo: RepositoryDetails;
-  project: ProjectDetails;
+  onUpdate: () => Promise<void>;
 }
 
 const EditDomainDialog = ({
+  domains,
   open,
   handleOpen,
   domain,
   repo,
-  project,
+  onUpdate,
 }: EditDomainDialogProp) => {
+  const client = useGQLClient();
+
   const getRedirectUrl = (domain: Domain) => {
     const domainArr = domain.name.split('www.');
     let redirectUrl = '';
@@ -45,12 +50,6 @@ const EditDomainDialog = ({
     return redirectUrl;
   };
 
-  const domains = project.deployments
-    .filter((deployment: any) => {
-      return deployment.domain != null;
-    })
-    .map((deployment: any) => deployment.domain);
-
   const redirectOptions = useMemo(() => {
     const redirectUrl = getRedirectUrl(domain);
     return [...DEFAULT_REDIRECT_OPTIONS, redirectUrl];
@@ -63,9 +62,31 @@ const EditDomainDialog = ({
       (domain) => domain.name === redirectUrl,
     );
 
-    return domainRedirected?.isRedirectedto;
+    return domainRedirected?.isRedirected;
   }, [domain]);
 
+  const onSubmit = useCallback(
+    async (data: any) => {
+      const updates = {
+        name: data.name,
+        branch: data.branch,
+        isRedirected: data.redirectedTo !== 'none',
+      };
+
+      const { updateDomain } = await client.updateDomain(domain.id, updates);
+
+      if (updateDomain) {
+        await onUpdate();
+        toast.success(`Domain ${domain.name} has been updated`);
+      } else {
+        toast.error(`Error updating domain ${domain.name}`);
+      }
+
+      handleOpen();
+    },
+    [client],
+  );
+
   const {
     handleSubmit,
     register,
@@ -94,12 +115,7 @@ const EditDomainDialog = ({
           X
         </Button>
       </DialogHeader>
-      <form
-        onSubmit={handleSubmit(() => {
-          handleOpen();
-          toast.success(`Domain ${domain.name} has been updated`);
-        })}
-      >
+      <form onSubmit={handleSubmit(onSubmit)}>
         <DialogBody className="flex flex-col gap-2 p-4">
           <Typography variant="small">Domain name</Typography>
           <Input crossOrigin={undefined} {...register('name')} />