Use fetched domains data in domains panel (#27)

* Use fetched domains data and use it in domains page

* Add record field to fetched domain data

---------

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

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

@@ -155,6 +155,7 @@ const DomainCard = ({ domain, repo, project }: DomainCardProps) => {
           </table>
         </Card>
       )}
+
       <EditDomainDialog
         handleOpen={() => {
           setEditDialogOpen((preVal) => !preVal);

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

@@ -5,8 +5,6 @@ import { Button, Typography } from '@material-tailwind/react';
 
 import DomainCard from './DomainCard';
 import { DomainDetails } from '../../../../types/project';
-import domainsData from '../../../../assets/domains.json';
-import repositories from '../../../../assets/repositories.json';
 
 const Domains = () => {
   const { id } = useParams();
@@ -15,15 +13,23 @@ const Domains = () => {
   const { projects } = useOutletContext();
 
   const currProject = useMemo(() => {
-    return projects.find((data: any) => Number(data.id) === Number(id));
+    return projects.find((data: any) => {
+      return Number(data?.id) === Number(id);
+    });
   }, [id]);
 
   const linkedRepo = useMemo(() => {
-    return repositories.find(
+    return currProject.repositories.find(
-      (repo) => repo.id === Number(currProject?.repositoryId),
+      (repo: any) => repo.id === Number(currProject?.repositoryId),
     );
   }, [currProject]);
 
+  const domains = currProject.deployments
+    .filter((deployment: any) => {
+      return deployment.domain != null;
+    })
+    .map((deployment: any) => deployment.domain);
+
   return (
     <>
       <div className="flex justify-between p-2">
@@ -35,7 +41,7 @@ const Domains = () => {
         </Link>
       </div>
 
-      {(domainsData as DomainDetails[]).map((domain) => {
+      {(domains as DomainDetails[]).map((domain) => {
         return (
           <DomainCard
             domain={domain}

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -30,6 +30,16 @@ const ProjectSearch = () => {
               hash: '',
               message: '',
             },
+            domain: deployment.domain
+              ? {
+                  ...deployment.domain,
+                  record: {
+                    type: '',
+                    name: '',
+                    value: '',
+                  },
+                }
+              : null,
           };
         });
 
@@ -44,7 +54,17 @@ const ProjectSearch = () => {
           domain: null,
           createdBy: project.owner.name,
           source: '',
-          repositoryId: project.repository,
+          repositoryId: 0,
+          repositories: [
+            {
+              id: 0,
+              title: project.repository,
+              updatedAt: '',
+              user: '',
+              private: false,
+              branch: [''],
+            },
+          ],
           // TODO: populate from github API
           latestCommit: {
             message: '',

packages/frontend/src/types/project.ts

@@ -75,8 +75,8 @@ export enum GitSelect {
 }
 
 export enum DomainStatus {
-  LIVE = 'live',
+  LIVE = 'Live',
-  PENDING = 'pending',
+  PENDING = 'Pending',
 }
 
 export interface DomainDetails {