From 00fc51ced69a159974845d45ea52ed31c4661d15 Mon Sep 17 00:00:00 2001
From: Myrfion <Levtsuntimur@gmail.com>
Date: Fri, 17 Mar 2023 11:32:00 -0400
Subject: [PATCH 1/8] Add integration for editing dns records

---
 app/components/dns-record/form.tsx          | 33 ++++++---
 app/routes/__index/domains/$dnsRecordId.tsx | 80 +++++++++++++++++++++
 app/routes/__index/domains/$domainId.tsx    | 11 ---
 app/routes/__index/domains/new.tsx          |  2 +-
 4 files changed, 104 insertions(+), 22 deletions(-)
 create mode 100644 app/routes/__index/domains/$dnsRecordId.tsx
 delete mode 100644 app/routes/__index/domains/$domainId.tsx

diff --git a/app/components/dns-record/form.tsx b/app/components/dns-record/form.tsx
index f5d26e83..4b3725bc 100644
--- a/app/components/dns-record/form.tsx
+++ b/app/components/dns-record/form.tsx
@@ -1,4 +1,4 @@
-import { AddIcon, InfoIcon } from '@chakra-ui/icons';
+import { AddIcon, InfoIcon, EditIcon } from '@chakra-ui/icons';
 import {
   Button,
   Input,
@@ -10,23 +10,31 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import { Form } from '@remix-run/react';
-
+import type { Record } from '@prisma/client';
 import { useUser } from '~/utils';
 import FormField from './form-field';
+import { useMemo } from 'react';
+
+type FormMode = 'CREATE' | 'EDIT';
 
 interface DnsRecordFormProps {
+  mode: FormMode;
   typeError?: string; // Error for 'Type' field
+  defaultDnsRecord?: Record;
 }
 
-export default function DnsRecordForm({ typeError }: DnsRecordFormProps) {
+export default function DnsRecordForm({ typeError, defaultDnsRecord, mode }: DnsRecordFormProps) {
   const user = useUser();
 
+  const submitButtonText = useMemo(() => (mode === 'CREATE' ? 'Create' : 'Update'), [mode]);
+  const SubmitButtonIcon = useMemo(() => (mode === 'CREATE' ? AddIcon : EditIcon), [mode]);
+
   return (
     <Form className="domain-form" method="post">
       <VStack maxW="xl" spacing="2">
         <FormField label="Record Name" isRequired={true}>
           <InputGroup>
-            <Input name="name" />
+            <Input name="name" defaultValue={defaultDnsRecord?.name} />
             <InputRightAddon children={`.${user.baseDomain}`} />
           </InputGroup>
           <Tooltip label="Enter a name for the DNS Record: name">
@@ -35,7 +43,7 @@ export default function DnsRecordForm({ typeError }: DnsRecordFormProps) {
         </FormField>
 
         <FormField label="Type" isRequired={true} error={typeError}>
-          <Select placeholder="Select a type" name="type">
+          <Select placeholder="Select a type" name="type" defaultValue={defaultDnsRecord?.type}>
             <option value="A">A</option>
             <option value="AAAA">AAAA</option>
             <option value="CNAME">CNAME</option>
@@ -47,14 +55,14 @@ export default function DnsRecordForm({ typeError }: DnsRecordFormProps) {
         </FormField>
 
         <FormField label="Value" isRequired={true}>
-          <Input name="value" />
+          <Input name="value" defaultValue={defaultDnsRecord?.value} />
           <Tooltip label="Enter DNS Record value">
             <InfoIcon />
           </Tooltip>
         </FormField>
 
         <FormField label="Ports">
-          <Input name="ports" />
+          <Input name="ports" defaultValue={defaultDnsRecord?.ports ?? ''} />
           <Tooltip label="Enter port(s) separated by commas (E.g. 8080, 1234)">
             <InfoIcon />
           </Tooltip>
@@ -68,11 +76,16 @@ export default function DnsRecordForm({ typeError }: DnsRecordFormProps) {
         </FormField>
 
         <FormField label="Description">
-          <Textarea rows={10} name="description" />
+          <Textarea
+            rows={10}
+            name="description"
+            defaultValue={defaultDnsRecord?.description ?? ''}
+          />
         </FormField>
       </VStack>
-      <Button type="submit" mt="6" rightIcon={<AddIcon boxSize={3.5} mt="0.15rem" />}>
-        Create
+      {defaultDnsRecord && <input type="hidden" name="id" value={defaultDnsRecord.id} />}
+      <Button type="submit" mt="6" rightIcon={<SubmitButtonIcon boxSize={3.5} mt="0.15rem" />}>
+        {submitButtonText}
       </Button>
     </Form>
   );
diff --git a/app/routes/__index/domains/$dnsRecordId.tsx b/app/routes/__index/domains/$dnsRecordId.tsx
new file mode 100644
index 00000000..bbf83d94
--- /dev/null
+++ b/app/routes/__index/domains/$dnsRecordId.tsx
@@ -0,0 +1,80 @@
+import { Container, Heading, Text } from '@chakra-ui/react';
+import { RecordType } from '@prisma/client';
+import { redirect, typedjson, useTypedLoaderData } from 'remix-typedjson';
+import { z } from 'zod';
+import { parseFormSafe } from 'zodix';
+import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import DnsRecordForm from '~/components/dns-record/form';
+import { updateDnsRequest } from '~/queues/dns/dns-flow.server';
+import { requireUser } from '~/session.server';
+import { getRecordById } from '~/models/record.server';
+
+export const loader = async ({ request, params }: LoaderArgs) => {
+  await requireUser(request);
+  const { dnsRecordId } = params;
+  if (!dnsRecordId) {
+    throw new Response('dnsRecordId should be string', {
+      status: 400,
+    });
+  }
+
+  const record = await getRecordById(Number(dnsRecordId));
+  if (!record) {
+    throw new Response('The record is not found', {
+      status: 404,
+    });
+  }
+
+  return typedjson(record);
+};
+
+export const action = async ({ request }: ActionArgs) => {
+  const user = await requireUser(request);
+
+  const DnsRecord = z.object({
+    id: z.string(),
+    name: z.string().min(1), // We do not want to consider '' a valid string
+    type: z.nativeEnum(RecordType),
+    value: z.string().min(1),
+    ports: z.string().optional(),
+    course: z.string().optional(),
+    description: z.string().optional(),
+  });
+
+  const updatedDnsRecordParams = await parseFormSafe(request, DnsRecord);
+
+  if (updatedDnsRecordParams.success === false) {
+    throw new Response(updatedDnsRecordParams.error.message, {
+      status: 400,
+    });
+  }
+
+  const { data } = updatedDnsRecordParams;
+
+  await updateDnsRequest({
+    id: Number(data.id),
+    username: user.username,
+    type: data.type,
+    name: data.name,
+    value: data.value,
+  });
+
+  return redirect(`/domains`);
+};
+
+export default function DomainRoute() {
+  const record = useTypedLoaderData<typeof loader>();
+
+  return (
+    <Container maxW="container.xl" ml={[null, null, '10vw']}>
+      <Heading as="h1" size="xl" mt="8">
+        Edit DNS Record
+      </Heading>
+      <Text maxW="lg" mb="3" mt="2">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+        been the industry's standard dummy text ever since the 1500s
+      </Text>
+      <DnsRecordForm defaultDnsRecord={record} mode="EDIT" />
+    </Container>
+  );
+}
diff --git a/app/routes/__index/domains/$domainId.tsx b/app/routes/__index/domains/$domainId.tsx
deleted file mode 100644
index 4865ffc2..00000000
--- a/app/routes/__index/domains/$domainId.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Flex, Heading } from '@chakra-ui/react';
-
-export default function DomainRoute() {
-  return (
-    <Flex>
-      <Heading as="h1" size="3xl">
-        Domain Edit Page
-      </Heading>
-    </Flex>
-  );
-}
diff --git a/app/routes/__index/domains/new.tsx b/app/routes/__index/domains/new.tsx
index e5dcb0a0..74c9ff3c 100644
--- a/app/routes/__index/domains/new.tsx
+++ b/app/routes/__index/domains/new.tsx
@@ -69,7 +69,7 @@ export default function NewDomainRoute() {
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
         been the industry's standard dummy text ever since the 1500s
       </Text>
-      <DnsRecordForm {...errors} />
+      <DnsRecordForm {...errors} mode="CREATE" />
     </Container>
   );
 }

From 965522b906a4afd3b8dbd524922920ab87493a9b Mon Sep 17 00:00:00 2001
From: Myrfion <Levtsuntimur@gmail.com>
Date: Sat, 18 Mar 2023 14:49:06 -0400
Subject: [PATCH 2/8] Fix domain update request

---
 app/routes/__index/domains/$dnsRecordId.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/routes/__index/domains/$dnsRecordId.tsx b/app/routes/__index/domains/$dnsRecordId.tsx
index bbf83d94..3f93be22 100644
--- a/app/routes/__index/domains/$dnsRecordId.tsx
+++ b/app/routes/__index/domains/$dnsRecordId.tsx
@@ -5,9 +5,9 @@ import { z } from 'zod';
 import { parseFormSafe } from 'zodix';
 import type { ActionArgs, LoaderArgs } from '@remix-run/node';
 import DnsRecordForm from '~/components/dns-record/form';
-import { updateDnsRequest } from '~/queues/dns/dns-flow.server';
 import { requireUser } from '~/session.server';
 import { getRecordById } from '~/models/record.server';
+import { updateDnsRequest } from '~/queues/dns/update-record-flow.server';
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   await requireUser(request);
@@ -55,7 +55,7 @@ export const action = async ({ request }: ActionArgs) => {
     id: Number(data.id),
     username: user.username,
     type: data.type,
-    name: data.name,
+    subdomain: data.name,
     value: data.value,
   });
 

From 9b7b2a7b17e6be3d658127ea33f70ef52cf16200 Mon Sep 17 00:00:00 2001
From: Myrfion <Levtsuntimur@gmail.com>
Date: Sat, 18 Mar 2023 18:09:04 -0400
Subject: [PATCH 3/8] Update terminology in dns record table

---
 app/components/dns-record/dns-record-name.tsx | 11 ++--
 app/components/domains-table.tsx              | 55 ++++++++++---------
 app/routes/__index/domains/index.tsx          | 18 ++++--
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/app/components/dns-record/dns-record-name.tsx b/app/components/dns-record/dns-record-name.tsx
index 2b1fa6af..acf9cb6e 100644
--- a/app/components/dns-record/dns-record-name.tsx
+++ b/app/components/dns-record/dns-record-name.tsx
@@ -1,20 +1,19 @@
 import { Flex, Text } from '@chakra-ui/react';
 
 interface DnsRecordNameProps {
-  name: string;
+  subdomain: string;
+  basedomain: string;
 }
 
-const DnsRecordName = ({ name }: DnsRecordNameProps) => {
-  const [nameBase, ...restOfName] = name.split('.');
-
+const DnsRecordName = ({ subdomain, basedomain }: DnsRecordNameProps) => {
   return (
     <Flex alignItems="flex-end" flexDirection="row">
       <Text>
         <Text as="span" sx={{ fontWeight: 'medium' }}>
-          {nameBase}
+          {subdomain}
         </Text>
         <Text as="span" color="gray.500">
-          .{restOfName}
+          .{basedomain}
         </Text>
       </Text>
     </Flex>
diff --git a/app/components/domains-table.tsx b/app/components/domains-table.tsx
index 6fb1a9d4..bad8bdaf 100644
--- a/app/components/domains-table.tsx
+++ b/app/components/domains-table.tsx
@@ -30,12 +30,13 @@ import RecordDeleteAlertDialog from './record-delete-alert-dialog';
 import { Form, useNavigate, useTransition } from '@remix-run/react';
 import DnsRecordName from './dns-record/dns-record-name';
 
-interface DomainsTableProps {
-  domains: Record[];
+interface DnsRecordsTableProps {
+  dnsRecords: Record[];
+  userBaseDomain: string;
 }
 
-export default function DomainsTable(props: DomainsTableProps) {
-  const { domains } = props;
+export default function DnsRecordsTable(props: DnsRecordsTableProps) {
+  const { dnsRecords, userBaseDomain } = props;
 
   const toast = useToast();
   const navigate = useNavigate();
@@ -46,7 +47,7 @@ export default function DomainsTable(props: DomainsTableProps) {
     onOpen: onDeleteAlertDialogOpen,
     onClose: onDeleteAlertDialogClose,
   } = useDisclosure();
-  const [domainToDelete, setDomainToDelete] = useState<Record | undefined>();
+  const [dnsRecordToDelete, setDnsRecordToDelete] = useState<Record | undefined>();
 
   function onCopyNameToClipboard(name: string) {
     navigator.clipboard.writeText(name);
@@ -57,7 +58,7 @@ export default function DomainsTable(props: DomainsTableProps) {
     });
   }
 
-  function renderDomainStatus(action: RecordStatus) {
+  function renderDnsRecordStatus(action: RecordStatus) {
     if (action === 'active') {
       return (
         <Tooltip label="Domain is live">
@@ -90,19 +91,19 @@ export default function DomainsTable(props: DomainsTableProps) {
     }
   }
 
-  function onDeleteDomainOpen(domain: Record) {
+  function onDeleteDnsRecordOpen(dnsRecord: Record) {
     onDeleteAlertDialogOpen();
-    setDomainToDelete(domain);
+    setDnsRecordToDelete(dnsRecord);
   }
 
-  function onDomainDeleteCancel() {
+  function onDnsRecordDeleteCancel() {
     onDeleteAlertDialogClose();
-    setDomainToDelete(undefined);
+    setDnsRecordToDelete(undefined);
   }
 
-  function onDomainDeleteConfirm() {
+  function onDnsRecordDeleteConfirm() {
     onDeleteAlertDialogClose();
-    setDomainToDelete(undefined);
+    setDnsRecordToDelete(undefined);
   }
 
   function onDnsRecordEdit(dnsRecord: Record) {
@@ -125,13 +126,13 @@ export default function DomainsTable(props: DomainsTableProps) {
               </Tr>
             </Thead>
             <Tbody>
-              {domains.map((domain) => {
+              {dnsRecords.map((dnsRecord) => {
                 const isLoading =
                   transition.state === 'submitting' &&
-                  Number(transition.submission.formData.get('id')) === domain.id;
+                  Number(transition.submission.formData.get('id')) === dnsRecord.id;
 
                 return (
-                  <Tr key={domain.id}>
+                  <Tr key={dnsRecord.id}>
                     {isLoading ? (
                       <Td py="8" colSpan={7}>
                         <Flex justifyContent="center">
@@ -140,28 +141,28 @@ export default function DomainsTable(props: DomainsTableProps) {
                       </Td>
                     ) : (
                       <>
-                        <Td>{renderDomainStatus(domain.status)}</Td>
+                        <Td>{renderDnsRecordStatus(dnsRecord.status)}</Td>
                         <Td>
                           <Flex justifyContent="space-between" alignItems="center">
-                            <DnsRecordName name={domain.name} />
+                            <DnsRecordName subdomain={dnsRecord.name} basedomain={userBaseDomain} />
                             <Tooltip label="Copy name to clipboard">
                               <IconButton
                                 icon={<CopyIcon color="black" boxSize="5" />}
                                 aria-label="Refresh domain"
                                 variant="ghost"
                                 ml="2"
-                                onClick={() => onCopyNameToClipboard(domain.name)}
+                                onClick={() => onCopyNameToClipboard(dnsRecord.name)}
                               />
                             </Tooltip>
                           </Flex>
                         </Td>
-                        <Td>{domain.type}</Td>
-                        <Td>{domain.value}</Td>
+                        <Td>{dnsRecord.type}</Td>
+                        <Td>{dnsRecord.value}</Td>
                         <Td>
                           <Flex justifyContent="space-between" alignItems="center">
-                            {domain.expiresAt.toLocaleDateString('en-US')}
+                            {dnsRecord.expiresAt.toLocaleDateString('en-US')}
                             <Form method="patch" style={{ margin: 0 }}>
-                              <input type="hidden" name="id" value={domain.id} />
+                              <input type="hidden" name="id" value={dnsRecord.id} />
                               <input type="hidden" name="intent" value="renew-record" />
                               <Tooltip label="Renew domain">
                                 <IconButton
@@ -178,7 +179,7 @@ export default function DomainsTable(props: DomainsTableProps) {
                           <Flex>
                             <Tooltip label="Edit domain">
                               <IconButton
-                                onClick={() => onDnsRecordEdit(domain)}
+                                onClick={() => onDnsRecordEdit(dnsRecord)}
                                 icon={<EditIcon color="black" boxSize={5} />}
                                 aria-label="Edit domain"
                                 variant="ghost"
@@ -187,7 +188,7 @@ export default function DomainsTable(props: DomainsTableProps) {
                             </Tooltip>
                             <Tooltip label="Delete domain">
                               <IconButton
-                                onClick={() => onDeleteDomainOpen(domain)}
+                                onClick={() => onDeleteDnsRecordOpen(dnsRecord)}
                                 icon={<DeleteIcon color="black" boxSize={5} />}
                                 aria-label="Delete domain"
                                 variant="ghost"
@@ -207,9 +208,9 @@ export default function DomainsTable(props: DomainsTableProps) {
       </Card>
       <RecordDeleteAlertDialog
         isOpen={isDeleteAlertDialogOpen}
-        onCancel={onDomainDeleteCancel}
-        onConfirm={onDomainDeleteConfirm}
-        dnsRecord={domainToDelete}
+        onCancel={onDnsRecordDeleteCancel}
+        onConfirm={onDnsRecordDeleteConfirm}
+        dnsRecord={dnsRecordToDelete}
       />
     </>
   );
diff --git a/app/routes/__index/domains/index.tsx b/app/routes/__index/domains/index.tsx
index 789423de..0a5307b9 100644
--- a/app/routes/__index/domains/index.tsx
+++ b/app/routes/__index/domains/index.tsx
@@ -7,12 +7,12 @@ import { json } from '@remix-run/node';
 import { z } from 'zod';
 import { parseFormSafe } from 'zodix';
 import { useInterval } from 'react-use';
-
-import DomainsTable from '~/components/domains-table';
+import DnsRecordsTable from '~/components/domains-table';
 import { getRecordById, getRecordsByUsername, renewDnsRecordById } from '~/models/record.server';
 import { requireUsername } from '~/session.server';
 import { deleteDnsRequest } from '~/queues/dns/delete-record-flow.server';
 import logger from '~/lib/logger.server';
+import { buildUserBaseDomain } from '~/utils';
 
 import type { LoaderArgs, ActionArgs } from '@remix-run/node';
 
@@ -21,7 +21,10 @@ export type DomainActionIntent = 'renew-record' | 'delete-record';
 export const loader = async ({ request }: LoaderArgs) => {
   const username = await requireUsername(request);
 
-  return typedjson(await getRecordsByUsername(username));
+  return typedjson({
+    dnsRecords: await getRecordsByUsername(username),
+    userBaseDomain: buildUserBaseDomain(username),
+  });
 };
 
 export const action = async ({ request }: ActionArgs) => {
@@ -79,8 +82,11 @@ export const action = async ({ request }: ActionArgs) => {
 
 export default function DomainsIndexRoute() {
   const revalidator = useRevalidator();
-  const domains = useTypedLoaderData<typeof loader>();
-  const pending = useMemo(() => domains.some((domain) => domain.status === 'pending'), [domains]);
+  const { dnsRecords, userBaseDomain } = useTypedLoaderData<typeof loader>();
+  const pending = useMemo(
+    () => dnsRecords.some((dnsRecord) => dnsRecord.status === 'pending'),
+    [dnsRecords]
+  );
 
   // Check to see if any change is pending, and if so, reload every 5s until finished
   useInterval(
@@ -106,7 +112,7 @@ export default function DomainsIndexRoute() {
             <Button rightIcon={<AddIcon boxSize={3} />}>Create new domain</Button>
           </Link>
         </Flex>
-        <DomainsTable domains={domains} />
+        <DnsRecordsTable dnsRecords={dnsRecords} userBaseDomain={userBaseDomain} />
       </Flex>
     </Container>
   );

From ae6ff83fb0f51ec01dee2db6e7982a67cca6a5fd Mon Sep 17 00:00:00 2001
From: Myrfion <Levtsuntimur@gmail.com>
Date: Sat, 18 Mar 2023 19:48:35 -0400
Subject: [PATCH 4/8] Update baseDomain usage with `useUser`

---
 app/components/domains-table.tsx     |  8 +++++---
 app/routes/__index/domains/index.tsx | 10 +++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/components/domains-table.tsx b/app/components/domains-table.tsx
index e2310761..d2e5a5f0 100644
--- a/app/components/domains-table.tsx
+++ b/app/components/domains-table.tsx
@@ -29,14 +29,16 @@ import RecordDeleteAlertDialog from './record-delete-alert-dialog';
 
 import { Form, useNavigate, useTransition } from '@remix-run/react';
 import DnsRecordName from './dns-record/dns-record-name';
+import { useUser } from '~/utils';
 
 interface DnsRecordsTableProps {
   dnsRecords: Record[];
-  userBaseDomain: string;
 }
 
 export default function DnsRecordsTable(props: DnsRecordsTableProps) {
-  const { dnsRecords, userBaseDomain } = props;
+  const { dnsRecords } = props;
+
+  const { baseDomain } = useUser();
 
   const toast = useToast();
   const navigate = useNavigate();
@@ -146,7 +148,7 @@ export default function DnsRecordsTable(props: DnsRecordsTableProps) {
                           <Flex justifyContent="space-between" alignItems="center">
                             <DnsRecordName
                               subdomain={dnsRecord.subdomain}
-                              basedomain={userBaseDomain}
+                              basedomain={baseDomain}
                             />
                             <Tooltip label="Copy name to clipboard">
                               <IconButton
diff --git a/app/routes/__index/domains/index.tsx b/app/routes/__index/domains/index.tsx
index 6393330d..84d8cc89 100644
--- a/app/routes/__index/domains/index.tsx
+++ b/app/routes/__index/domains/index.tsx
@@ -12,7 +12,6 @@ import { getRecordById, getRecordsByUsername, renewDnsRecordById } from '~/model
 import { requireUsername } from '~/session.server';
 import { deleteDnsRequest } from '~/queues/dns/delete-record-flow.server';
 import logger from '~/lib/logger.server';
-import { buildUserBaseDomain } from '~/utils';
 
 import type { LoaderArgs, ActionArgs } from '@remix-run/node';
 
@@ -21,10 +20,7 @@ export type DomainActionIntent = 'renew-record' | 'delete-record';
 export const loader = async ({ request }: LoaderArgs) => {
   const username = await requireUsername(request);
 
-  return typedjson({
-    dnsRecords: await getRecordsByUsername(username),
-    userBaseDomain: buildUserBaseDomain(username),
-  });
+  return typedjson(await getRecordsByUsername(username));
 };
 
 export const action = async ({ request }: ActionArgs) => {
@@ -82,7 +78,7 @@ export const action = async ({ request }: ActionArgs) => {
 
 export default function DomainsIndexRoute() {
   const revalidator = useRevalidator();
-  const { dnsRecords, userBaseDomain } = useTypedLoaderData<typeof loader>();
+  const dnsRecords = useTypedLoaderData<typeof loader>();
   const pending = useMemo(
     () => dnsRecords.some((dnsRecord) => dnsRecord.status === 'pending'),
     [dnsRecords]
@@ -112,7 +108,7 @@ export default function DomainsIndexRoute() {
             <Button rightIcon={<AddIcon boxSize={3} />}>Create new domain</Button>
           </Link>
         </Flex>
-        <DnsRecordsTable dnsRecords={dnsRecords} userBaseDomain={userBaseDomain} />
+        <DnsRecordsTable dnsRecords={dnsRecords} />
       </Flex>
     </Container>
   );

From 3b4bc725d046fbd6d295424a0db3c94e69ee07a3 Mon Sep 17 00:00:00 2001
From: Myrfion <Levtsuntimur@gmail.com>
Date: Sat, 18 Mar 2023 19:49:28 -0400
Subject: [PATCH 5/8] change basedomain to camelCase

---
 app/components/dns-record/dns-record-name.tsx | 6 +++---
 app/components/domains-table.tsx              | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/dns-record/dns-record-name.tsx b/app/components/dns-record/dns-record-name.tsx
index acf9cb6e..9538b871 100644
--- a/app/components/dns-record/dns-record-name.tsx
+++ b/app/components/dns-record/dns-record-name.tsx
@@ -2,10 +2,10 @@ import { Flex, Text } from '@chakra-ui/react';
 
 interface DnsRecordNameProps {
   subdomain: string;
-  basedomain: string;
+  baseDomain: string;
 }
 
-const DnsRecordName = ({ subdomain, basedomain }: DnsRecordNameProps) => {
+const DnsRecordName = ({ subdomain, baseDomain }: DnsRecordNameProps) => {
   return (
     <Flex alignItems="flex-end" flexDirection="row">
       <Text>
@@ -13,7 +13,7 @@ const DnsRecordName = ({ subdomain, basedomain }: DnsRecordNameProps) => {
           {subdomain}
         </Text>
         <Text as="span" color="gray.500">
-          .{basedomain}
+          .{baseDomain}
         </Text>
       </Text>
     </Flex>
diff --git a/app/components/domains-table.tsx b/app/components/domains-table.tsx
index d2e5a5f0..3f24b447 100644
--- a/app/components/domains-table.tsx
+++ b/app/components/domains-table.tsx
@@ -148,7 +148,7 @@ export default function DnsRecordsTable(props: DnsRecordsTableProps) {
                           <Flex justifyContent="space-between" alignItems="center">
                             <DnsRecordName
                               subdomain={dnsRecord.subdomain}
-                              basedomain={baseDomain}
+                              baseDomain={baseDomain}
                             />
                             <Tooltip label="Copy name to clipboard">
                               <IconButton

From a59d1121a3ea06cd9758a5923d083199c8476082 Mon Sep 17 00:00:00 2001
From: Myrfion <Levtsuntimur@gmail.com>
Date: Sat, 18 Mar 2023 19:51:20 -0400
Subject: [PATCH 6/8] Update clipboard copying dns record fqds

---
 app/components/domains-table.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/domains-table.tsx b/app/components/domains-table.tsx
index 3f24b447..b46a806d 100644
--- a/app/components/domains-table.tsx
+++ b/app/components/domains-table.tsx
@@ -156,7 +156,9 @@ export default function DnsRecordsTable(props: DnsRecordsTableProps) {
                                 aria-label="Refresh domain"
                                 variant="ghost"
                                 ml="2"
-                                onClick={() => onCopyNameToClipboard(dnsRecord.subdomain)}
+                                onClick={() =>
+                                  onCopyNameToClipboard(`${dnsRecord.subdomain}.${baseDomain}`)
+                                }
                               />
                             </Tooltip>
                           </Flex>

From a504a4d31636910605b53036833657e766378b8e Mon Sep 17 00:00:00 2001
From: Myrfion <Levtsuntimur@gmail.com>
Date: Sat, 18 Mar 2023 20:24:32 -0400
Subject: [PATCH 7/8] Update after review

---
 app/components/dns-record/form.tsx | 22 +++++++++-------------
 app/components/domains-table.tsx   |  6 +++---
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/app/components/dns-record/form.tsx b/app/components/dns-record/form.tsx
index d4b2917b..5a2f8c26 100644
--- a/app/components/dns-record/form.tsx
+++ b/app/components/dns-record/form.tsx
@@ -17,13 +17,13 @@ import { useMemo } from 'react';
 
 type FormMode = 'CREATE' | 'EDIT';
 
-interface DnsRecordFormProps {
+interface dnsRecordFormProps {
   mode: FormMode;
   typeError?: string; // Error for 'Type' field
-  defaultDnsRecord?: Record;
+  dnsRecord?: Record;
 }
 
-export default function DnsRecordForm({ typeError, defaultDnsRecord, mode }: DnsRecordFormProps) {
+export default function DomainForm({ typeError, dnsRecord, mode }: dnsRecordFormProps) {
   const user = useUser();
 
   const submitButtonText = useMemo(() => (mode === 'CREATE' ? 'Create' : 'Update'), [mode]);
@@ -34,7 +34,7 @@ export default function DnsRecordForm({ typeError, defaultDnsRecord, mode }: Dns
       <VStack maxW="xl" spacing="2">
         <FormField label="Record Name" isRequired={true}>
           <InputGroup>
-            <Input name="subdomain" defaultValue={defaultDnsRecord?.subdomain} />
+            <Input name="subdomain" defaultValue={dnsRecord?.subdomain} />
             <InputRightAddon children={`.${user.baseDomain}`} />
           </InputGroup>
           <Tooltip label="Enter a name for the DNS Record: name">
@@ -43,7 +43,7 @@ export default function DnsRecordForm({ typeError, defaultDnsRecord, mode }: Dns
         </FormField>
 
         <FormField label="Type" isRequired={true} error={typeError}>
-          <Select placeholder="Select a type" name="type" defaultValue={defaultDnsRecord?.type}>
+          <Select placeholder="Select a type" name="type" defaultValue={dnsRecord?.type}>
             <option value="A">A</option>
             <option value="AAAA">AAAA</option>
             <option value="CNAME">CNAME</option>
@@ -55,14 +55,14 @@ export default function DnsRecordForm({ typeError, defaultDnsRecord, mode }: Dns
         </FormField>
 
         <FormField label="Value" isRequired={true}>
-          <Input name="value" defaultValue={defaultDnsRecord?.value} />
+          <Input name="value" defaultValue={dnsRecord?.value} />
           <Tooltip label="Enter DNS Record value">
             <InfoIcon />
           </Tooltip>
         </FormField>
 
         <FormField label="Ports">
-          <Input name="ports" defaultValue={defaultDnsRecord?.ports ?? ''} />
+          <Input name="ports" defaultValue={dnsRecord?.ports ?? ''} />
           <Tooltip label="Enter port(s) separated by commas (E.g. 8080, 1234)">
             <InfoIcon />
           </Tooltip>
@@ -76,14 +76,10 @@ export default function DnsRecordForm({ typeError, defaultDnsRecord, mode }: Dns
         </FormField>
 
         <FormField label="Description">
-          <Textarea
-            rows={10}
-            name="description"
-            defaultValue={defaultDnsRecord?.description ?? ''}
-          />
+          <Textarea rows={10} name="description" defaultValue={dnsRecord?.description ?? ''} />
         </FormField>
       </VStack>
-      {defaultDnsRecord && <input type="hidden" name="id" value={defaultDnsRecord.id} />}
+      {dnsRecord && <input type="hidden" name="id" value={dnsRecord.id} />}
       <Button type="submit" mt="6" rightIcon={<SubmitButtonIcon boxSize={3.5} mt="0.15rem" />}>
         {submitButtonText}
       </Button>
diff --git a/app/components/domains-table.tsx b/app/components/domains-table.tsx
index b46a806d..aede7708 100644
--- a/app/components/domains-table.tsx
+++ b/app/components/domains-table.tsx
@@ -54,7 +54,7 @@ export default function DnsRecordsTable(props: DnsRecordsTableProps) {
   function onCopyNameToClipboard(subdomain: string) {
     navigator.clipboard.writeText(subdomain);
     toast({
-      title: 'Name was copied to clipboard',
+      title: 'Subdomain was copied to clipboard',
       position: 'bottom-right',
       status: 'success',
     });
@@ -120,7 +120,7 @@ export default function DnsRecordsTable(props: DnsRecordsTableProps) {
             <Thead>
               <Tr>
                 <Th />
-                <Th>Name</Th>
+                <Th>Subdomain</Th>
                 <Th>Type</Th>
                 <Th>Value</Th>
                 <Th>Expiration date</Th>
@@ -150,7 +150,7 @@ export default function DnsRecordsTable(props: DnsRecordsTableProps) {
                               subdomain={dnsRecord.subdomain}
                               baseDomain={baseDomain}
                             />
-                            <Tooltip label="Copy name to clipboard">
+                            <Tooltip label="Copy subdomain to clipboard">
                               <IconButton
                                 icon={<CopyIcon color="black" boxSize="5" />}
                                 aria-label="Refresh domain"

From d0114fa57990e5341159d89a4e7f6c7713c89813 Mon Sep 17 00:00:00 2001
From: Myrfion <Levtsuntimur@gmail.com>
Date: Sat, 18 Mar 2023 20:27:17 -0400
Subject: [PATCH 8/8] Update props name

---
 app/routes/__index/domains/$dnsRecordId.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/__index/domains/$dnsRecordId.tsx b/app/routes/__index/domains/$dnsRecordId.tsx
index 80577d87..24a79e53 100644
--- a/app/routes/__index/domains/$dnsRecordId.tsx
+++ b/app/routes/__index/domains/$dnsRecordId.tsx
@@ -74,7 +74,7 @@ export default function DomainRoute() {
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
         been the industry's standard dummy text ever since the 1500s
       </Text>
-      <DnsRecordForm defaultDnsRecord={record} mode="EDIT" />
+      <DnsRecordForm dnsRecord={record} mode="EDIT" />
     </Container>
   );
 }