From a6f9e1897283e7b57f15829774241fa374ca07b7 Mon Sep 17 00:00:00 2001
From: Nabarun Gogoi <nabarun@deepstacksoft.com>
Date: Thu, 28 Dec 2023 14:05:01 +0530
Subject: [PATCH] Add layout for Configure DNS section in Add domain page (#34)

* Add dns config page

* Move routes to domain/add directory

* Handle review change

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
---
 .../projects/project/settings/SetupDomain.tsx | 11 +++--
 .../pages/projects/id/domain/add/Config.tsx   | 49 +++++++++++++++++++
 .../id/domain/{Add.tsx => add/index.tsx}      | 21 +++-----
 .../pages/projects/id/domain/add/routes.tsx   | 15 ++++++
 .../frontend/src/pages/projects/routes.tsx    |  4 +-
 5 files changed, 81 insertions(+), 19 deletions(-)
 create mode 100644 packages/frontend/src/pages/projects/id/domain/add/Config.tsx
 rename packages/frontend/src/pages/projects/id/domain/{Add.tsx => add/index.tsx} (74%)
 create mode 100644 packages/frontend/src/pages/projects/id/domain/add/routes.tsx

diff --git a/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx b/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
index 010226a4..5f87780c 100644
--- a/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
+++ b/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import {
   Radio,
@@ -24,6 +24,7 @@ const SetupDomain = () => {
   });
 
   const [domainStr, setDomainStr] = useState('');
+  const navigate = useNavigate();
 
   useEffect(() => {
     const subscription = watch((value, { name }) => {
@@ -44,7 +45,9 @@ const SetupDomain = () => {
 
   return (
     <form
-      onSubmit={handleSubmit(() => {})}
+      onSubmit={handleSubmit(() => {
+        navigate('config');
+      })}
       className="flex flex-col gap-6 w-full"
     >
       <div>
@@ -103,9 +106,7 @@ const SetupDomain = () => {
         color={isValid ? 'blue' : 'gray'}
         type="submit"
       >
-        <Link to="config">
-          <i>^</i> Next
-        </Link>
+        <i>^</i> Next
       </Button>
     </form>
   );
diff --git a/packages/frontend/src/pages/projects/id/domain/add/Config.tsx b/packages/frontend/src/pages/projects/id/domain/add/Config.tsx
new file mode 100644
index 00000000..0a2b7d18
--- /dev/null
+++ b/packages/frontend/src/pages/projects/id/domain/add/Config.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Typography, Alert, Button } from '@material-tailwind/react';
+
+const Config = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      <div>
+        <Typography variant="h5">Configure DNS</Typography>
+        <Typography variant="small">
+          Add the following records to your domain
+        </Typography>
+      </div>
+
+      <table className="rounded-lg w-3/4 text-blue-gray-600">
+        <tr className="border-b-2 border-gray-300">
+          <th className="text-left p-2">Type</th>
+          <th className="text-left p-2">Name</th>
+          <th className="text-left p-2">Value</th>
+        </tr>
+        <tr className="border-b-2 border-gray-300">
+          <td className="text-left p-2">A</td>
+          <td className="text-left p-2">@</td>
+          <td className="text-left p-2">56.49.19.21</td>
+        </tr>
+        <tr>
+          <td className="text-left p-2">CNAME</td>
+          <td className="text-left p-2">www</td>
+          <td className="text-left p-2">cname.snowballtools.xyz</td>
+        </tr>
+      </table>
+
+      <Alert color="blue">
+        <i>^</i>It can take up to 48 hours for these updates to reflect
+        globally.
+      </Alert>
+
+      <Link to={`/projects/${id}`}>
+        <Button className="w-fit" color="blue">
+          Finish <i>{'>'}</i>
+        </Button>
+      </Link>
+    </div>
+  );
+};
+
+export default Config;
diff --git a/packages/frontend/src/pages/projects/id/domain/Add.tsx b/packages/frontend/src/pages/projects/id/domain/add/index.tsx
similarity index 74%
rename from packages/frontend/src/pages/projects/id/domain/Add.tsx
rename to packages/frontend/src/pages/projects/id/domain/add/index.tsx
index 22d6fa36..59be513f 100644
--- a/packages/frontend/src/pages/projects/id/domain/Add.tsx
+++ b/packages/frontend/src/pages/projects/id/domain/add/index.tsx
@@ -1,14 +1,12 @@
 import React, { useMemo } from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useParams, useLocation, Outlet, Link } from 'react-router-dom';
 import { Typography, IconButton } from '@material-tailwind/react';
 
-import Stepper from '../../../../components/Stepper';
-import SetupDomain from '../../../../components/projects/project/settings/SetupDomain';
+import Stepper from '../../../../../components/Stepper';
 
 const AddDomain = () => {
   const { id } = useParams();
   const location = useLocation();
-  const navigate = useNavigate();
 
   const stepperValues = [
     {
@@ -33,14 +31,11 @@ const AddDomain = () => {
     <div className="p-4">
       <div className="flex justify-between">
         <Typography variant="h3">Add Domain</Typography>
-
-        <IconButton
-          className="rounded-full"
-          variant="outlined"
-          onClick={() => navigate(-1)}
-        >
-          X
-        </IconButton>
+        <Link to={`/projects/${id}`}>
+          <IconButton className="rounded-full" variant="outlined">
+            X
+          </IconButton>
+        </Link>
       </div>
 
       <div className=" w-2/3 mx-auto">
@@ -55,7 +50,7 @@ const AddDomain = () => {
 
         <div className="flex justify-start gap-3">
           <Stepper activeStep={activeStep} stepperValues={stepperValues} />
-          <SetupDomain />
+          <Outlet />
         </div>
       </div>
     </div>
diff --git a/packages/frontend/src/pages/projects/id/domain/add/routes.tsx b/packages/frontend/src/pages/projects/id/domain/add/routes.tsx
new file mode 100644
index 00000000..95c38c16
--- /dev/null
+++ b/packages/frontend/src/pages/projects/id/domain/add/routes.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Config from './Config';
+import SetupDomain from '../../../../../components/projects/project/settings/SetupDomain';
+
+export const addDomainRoutes = [
+  {
+    index: true,
+    element: <SetupDomain />,
+  },
+  {
+    path: 'config',
+    element: <Config />,
+  },
+];
diff --git a/packages/frontend/src/pages/projects/routes.tsx b/packages/frontend/src/pages/projects/routes.tsx
index a6d65533..a247db98 100644
--- a/packages/frontend/src/pages/projects/routes.tsx
+++ b/packages/frontend/src/pages/projects/routes.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 
 import CreateProject from './Create';
 import Project from './Project';
+import AddDomain from './id/domain/add';
 import { createProjectRoutes } from './create/routes';
-import AddDomain from './id/domain/Add';
+import { addDomainRoutes } from './id/domain/add/routes';
 
 export const projectsRoutesWithoutSearch = [
   {
@@ -14,6 +15,7 @@ export const projectsRoutesWithoutSearch = [
   {
     path: ':id/domain/add',
     element: <AddDomain />,
+    children: addDomainRoutes,
   },
 ];