Obtain and display project in JobFormHeader

Author: wzrdx

src/components/job/JobFormHeader.tsx

@@ -1,6 +1,12 @@
+import { Skeleton } from '@heroui/skeleton';
 import { DeploymentContextType, useDeploymentContext } from '@lib/contexts/deployment';
-import { FormType } from '@typedefs/deployment';
+import { routePath } from '@lib/routes/route-paths';
+import db from '@lib/storage/db';
+import { FormType, Project } from '@typedefs/deployment';
+import { useLiveQuery } from 'dexie-react-hooks';
+import { useEffect } from 'react';
 import { RiArrowLeftLine } from 'react-icons/ri';
+import { useNavigate, useParams } from 'react-router-dom';
 
 interface Props {
     steps: string[];
@@ -9,11 +15,49 @@ interface Props {
 function JobFormHeader({ steps }: Props) {
     const { formType, setFormType, step, setStep } = useDeploymentContext() as DeploymentContextType;
 
+    const navigate = useNavigate();
+    const { id } = useParams();
+
+    const isValidId = id && !isNaN(parseInt(id)) && isFinite(parseInt(id));
+
+    // Only run the query if we have a valid ID
+    const project: Project | undefined | null = useLiveQuery(
+        isValidId ? () => db.projects.where('id').equals(parseInt(id)).first() : () => undefined,
+        [isValidId, id],
+        null, // Default value returned while data is loading
+    );
+
+    useEffect(() => {
+        if (project === undefined) {
+            navigate(routePath.notFound);
+        }
+    }, [project]);
+
+    if (project === null) {
+        return (
+            <div className="col w-full gap-8">
+                <Skeleton className="min-h-[82.5px] w-full rounded-lg" />
+                <Skeleton className="min-h-[50px] w-full rounded-lg" />
+            </div>
+        );
+    }
+
+    if (project === undefined) {
+        return <></>;
+    }
+
     return (
         <div className="col w-full gap-8">
             <div className="col gap-4">
-                <div className="big-title text-center">
-                    Deeploy a {formType} {formType === FormType.Service ? '' : 'App'}
+                <div className="row justify-between">
+                    <div className="row gap-2">
+                        <div className="mt-[1px] h-2.5 w-2.5 rounded-full" style={{ backgroundColor: project.color }}></div>
+                        <div className="big-title max-w-[280px] truncate">{project.name}</div>
+                    </div>
+
+                    <div className="big-title">
+                        Add a {formType} {formType === FormType.Service ? '' : 'App'} Job
+                    </div>
                 </div>
 
                 <div className="col gap-2.5">
@@ -24,7 +68,7 @@ function JobFormHeader({ steps }: Props) {
                         ></div>
                     </div>
 
-                    <div className="flex justify-between">
+                    <div className="row justify-between">
                         <RiArrowLeftLine
                             className="-ml-0.5 cursor-pointer text-xl text-slate-500 hover:opacity-50"
                             onClick={() => {
@@ -37,7 +81,7 @@ function JobFormHeader({ steps }: Props) {
                         />
 
                         <div
-                            className="cursor-pointer text-sm font-medium text-slate-500 hover:opacity-50"
+                            className="cursor-pointer text-[15px] font-medium text-slate-500 hover:opacity-50"
                             onClick={() => setFormType(undefined)}
                         >
                             Cancel
@@ -50,7 +94,7 @@ function JobFormHeader({ steps }: Props) {
                 <div className="text-sm font-semibold uppercase text-primary">
                     Step {step} of {steps.length}
                 </div>
-                <div className="text-[22px] font-medium">{steps[step - 1]}</div>
+                <div className="big-title">{steps[step - 1]}</div>
             </div>
         </div>
     );

src/index.css

@@ -50,7 +50,7 @@ body {
 }
 
 .big-title {
-    @apply text-lg font-semibold lg:text-[22px];
+    @apply text-lg font-semibold lg:text-[20px];
 }
 
 .list {

src/pages/deeploys/CreateProject.tsx

@@ -32,7 +32,7 @@ function CreateProject() {
     };
 
     const onError = (errors) => {
-        console.log('[DeeployProject] Validation errors:', errors);
+        console.log('[CreateProject] Validation errors:', errors);
     };
 
     return (