Merge pull request #16 from Kevin-Umali/feature/TL-DYS-46

[TL-DYS-46] [TL-DYS-45]

client/app/error.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+const ErrorComponent: React.FC<ErrorProps> = ({ error, reset }) => {
+  const router = useRouter();
+
+  return (
+    <div className="flex min-h-screen items-center justify-center py-5 sm:py-10">
+      <div className="p-6 text-center">
+        <Label className="mb-2 block text-2xl font-bold">Oops, something went wrong!</Label>
+        <Label className="text-md my-4 block">{error.message}</Label>
+        <div className="mt-4 flex flex-col space-y-2">
+          <Button onClick={() => router.push("/")} className="w-full border px-4 py-2">
+            Go Back to Home
+          </Button>
+          <Button onClick={reset} className="w-full border px-4 py-2">
+            Try Again
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorComponent;

client/app/faq/loading.tsx

@@ -0,0 +1,5 @@
+import PageLoader from "@/components/page-loader";
+
+export default function Loading() {
+  return <PageLoader loaderMessage="Loading faqs" />;
+}

client/app/globals.css

@@ -23,7 +23,7 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 142.1 76.2% 36.3%;
-    --radius: 0rem;
+    --radius: 0.5rem;
   }
 
   .dark {

client/app/guide/[guide_name]/guide-name.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Head from "next/head";
 import { useRouter } from "next/navigation";
-import { HowToGuide } from "@/interfaces";
+import { GuidePathData } from "@/interfaces";
 
 import { getGuideByPath } from "@/lib/index";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -13,7 +13,7 @@ import CustomMarkdown from "@/components/custom-markdown";
 export default function HowToGuideDetail({ params }: { params: { guide_name: string } }) {
   const router = useRouter();
 
-  const [guideDetails, setGuideDetails] = useState<HowToGuide | null>(null);
+  const [guideDetails, setGuideDetails] = useState<GuidePathData | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const { toast } = useToast();

client/app/guide/[guide_name]/loading.tsx

@@ -0,0 +1,5 @@
+import PageLoader from "@/components/page-loader";
+
+export default function Loading() {
+  return <PageLoader loaderMessage="Loading guide details" />;
+}

client/app/guide/[guide_name]/page.tsx

@@ -1,10 +1,10 @@
 import { Metadata } from "next";
-import { getGuideByPath } from "@/lib";
+import { getGuideByPathMetadata } from "@/lib";
 
 import HowToGuideDetail from "./guide-name";
 
 export async function generateMetadata({ params }: { params: { guide_name: string } }): Promise<Metadata> {
-  const guide = await getGuideByPath(params.guide_name);
+  const guide = await getGuideByPathMetadata(params.guide_name);
 
   return {
     title: guide.data.metadata.title,

client/app/guide/loading.tsx

@@ -0,0 +1,5 @@
+import PageLoader from "@/components/page-loader";
+
+export default function Loading() {
+  return <PageLoader loaderMessage="Loading guides" />;
+}

client/app/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
 import { categories } from "@/constants";
+import { GeneratedIdea } from "@/interfaces";
 import { generateProjectIdeas, getTotalCountOfGeneratedIdea, incrementCounterOfGeneratedIdea } from "@/lib";
 import { Info, RefreshCcw } from "lucide-react";
 
@@ -26,11 +27,11 @@ const ProjectTabs = dynamic(() => import("@/components/generate/project-tabs"));
 export default function Home() {
   const [materials, setMaterials] = useState([""]);
   const [onlySpecified, setOnlySpecified] = useState(false);
-  const [selectedDifficulty, setSelectedDifficulty] = useState("all");
+  const [selectedDifficulty, setSelectedDifficulty] = useState("any difficulty");
   const [selectedCategory, setSelectedCategory] = useState("Anything");
   const [timeValue, setTimeValue] = useState<number>(0);
   const [timeUnit, setTimeUnit] = useState<string | null>(null);
-  const [budget, setBudget] = useState(0);
+  const [budget, setBudget] = useState("0");
   const [tools, setTools] = useState([""]);
   const [purpose, setPurpose] = useState("Personal Use");
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
@@ -39,7 +40,7 @@ export default function Home() {
   const [isGenerating, setIsGenerating] = useState(false);
   const [isGenerated, setIsGenerated] = useState(false);
 
-  const [projects, setProjects] = useState([]);
+  const [projects, setProjects] = useState<GeneratedIdea[] | never[]>([]);
 
   const [totalCount, setTotalCount] = useState<number>(0);
   const [isLoadingCount, setIsLoadingCount] = useState(false);
@@ -142,23 +143,23 @@ export default function Home() {
     return (
       <>
         <div className="mb-4">
-          <MaterialInput materials={materials} setMaterials={setMaterials} onlySpecified={onlySpecified} setOnlySpecified={setOnlySpecified} />
+          <CategoryFilter categories={categories} onCategoryChange={setSelectedCategory} />
         </div>
         <div className="mb-4">
           <DifficultyFilter onDifficultyChange={setSelectedDifficulty} />
         </div>
         <div className="mb-4">
-          <CategoryFilter categories={categories} onCategoryChange={setSelectedCategory} />
+          <MaterialInput materials={materials} setMaterials={setMaterials} onlySpecified={onlySpecified} setOnlySpecified={setOnlySpecified} />
         </div>
-        <Button className="mb-4 w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 lg:w-auto" onClick={toggleAdvancedOptions}>
-          {showAdvancedOptions ? "Hide" : "Show"} Advanced Options
-        </Button>
         {showAdvancedOptions && advancedOptions}
-        <div className="mb-4 flex items-center justify-between">
-          <div>
-            <SafetyCheck onSafetyConfirmation={setIsSafe} />
-          </div>
-          <Button className="flex w-full items-center justify-center space-x-2 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 lg:w-auto" onClick={handleGenerateProjects}>
+        <div className="mb-4">
+          <SafetyCheck onSafetyConfirmation={setIsSafe} />
+        </div>
+        <div className="mb-4 flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
+          <Button className="w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 lg:w-1/2" onClick={toggleAdvancedOptions}>
+            {showAdvancedOptions ? "Hide" : "Show"} Advanced Options
+          </Button>
+          <Button className="flex w-full items-center justify-center space-x-2 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 lg:w-1/2" onClick={handleGenerateProjects}>
             <RefreshCcw className="h-5 w-5" />
             <span>Generate Projects</span>
           </Button>

client/app/project-detail/[id]/loading.tsx

@@ -0,0 +1,5 @@
+import PageLoader from "@/components/page-loader";
+
+export default function Loading() {
+  return <PageLoader loaderMessage="Checking Project Detail" />;
+}

client/app/project-detail/[id]/page.tsx

@@ -1,14 +1,14 @@
 import { Metadata } from "next";
-import { getShareLinkData } from "@/lib";
+import { getShareLinkDataMetadata } from "@/lib";
 
 import ProjectDetailById from "./project-detail-by-id";
 
 export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
-  const sharedLinkData = await getShareLinkData(params.id);
+  const sharedLinkData = await getShareLinkDataMetadata(params.id);
 
   return {
-    title: sharedLinkData.data.projectDetails.title + ` | MakeMeDIYspire`,
-    description: sharedLinkData.data.projectDetails.description,
+    title: sharedLinkData.data.title + ` | MakeMeDIYspire`,
+    description: sharedLinkData.data.description,
     keywords: ["DIY Project Details", "MakeMeDIYspire Tutorials", "DIY Project Instructions", "Step-by-Step DIY", "DIY Project Help", "DIY Creation Guide", "DIY Project Steps"],
     metadataBase: new URL("https://www.diyspire/project-detail/" + params.id),
     applicationName: "MakeMeDIYspire",

client/app/project-detail/[id]/project-detail-by-id.tsx

@@ -1,12 +1,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { ProjectLocationState, RelatedImages } from "@/interfaces";
+import { ProjectDetails, ProjectImages } from "@/interfaces";
 import { getShareLinkData } from "@/lib";
 
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/components/ui/use-toast";
 import ProjectImage from "@/components/project-detail/project-image";
@@ -15,13 +12,11 @@ import ProjectSteps from "@/components/project-detail/project-step";
 import ShareDialog from "@/components/project-detail/share-dialog";
 
 export default function ProjectDetailById({ params }: { params: { id: string } }) {
-  const router = useRouter();
-
   const [isLoading, setIsLoading] = useState(true);
   const [projectExplanation, setProjectExplanation] = useState<string | null>(null);
-  const [relatedImages, setRelatedImages] = useState<RelatedImages | null>(null);
+  const [relatedImages, setRelatedImages] = useState<ProjectImages | null>(null);
   const [shareLink, setShareLink] = useState<string | null>(null);
-  const [project, setProject] = useState<ProjectLocationState | null>(null);
+  const [project, setProject] = useState<ProjectDetails | null>(null);
   const [isOpen, setIsOpen] = useState(false);
 
   const { toast } = useToast();
@@ -50,36 +45,27 @@ export default function ProjectDetailById({ params }: { params: { id: string } }
     fetchData();
   }, [params.id, project, toast]);
 
-  if (!project) {
-    return (
-      <div className="container mx-auto py-5 text-center sm:py-10">
-        <div className="p-6">
-          <Label className="mb-4 text-xl font-bold">No project details found.</Label>
-          <Button onClick={() => router.push("/")} className="border px-4 py-2 hover:bg-gray-200">
-            Go Back to Home
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="container mx-auto py-5 sm:py-10">
-      <div className="grid grid-cols-1 gap-8 md:gap-10 lg:grid-cols-2">
-        <ProjectImage
-          isLoading={isLoading}
-          relatedImages={relatedImages}
-          projectTitle={project.title}
-          onOpen={() => {
-            setShareLink(`${process.env.NEXT_PUBLIC_PROJECT_URL}/project-detail/${params.id}`);
-            setIsOpen(true);
-          }}
-        />
-        <ShareDialog isOpen={isOpen} onClose={() => setIsOpen(false)} isSaving={false} shareLink={shareLink} />
-        <ProjectInfo isLoading={isLoading} project={project} />
-      </div>
-      <Separator className="mt-10" />
-      <ProjectSteps isLoading={isLoading} projectExplanation={projectExplanation} />
+      {project && (
+        <>
+          <div className="grid grid-cols-1 gap-8 md:gap-10 lg:grid-cols-2">
+            <ProjectImage
+              isLoading={isLoading}
+              relatedImages={relatedImages}
+              projectTitle={project.title}
+              onOpen={() => {
+                setShareLink(`${process.env.NEXT_PUBLIC_PROJECT_URL}/project-detail/${params.id}`);
+                setIsOpen(true);
+              }}
+            />
+            <ShareDialog isOpen={isOpen} onClose={() => setIsOpen(false)} isSaving={false} shareLink={shareLink} />
+            <ProjectInfo isLoading={isLoading} project={project} />
+          </div>
+          <Separator className="mt-10" />
+          <ProjectSteps isLoading={isLoading} projectExplanation={projectExplanation} />
+        </>
+      )}
     </div>
   );
 }

client/app/project-detail/loading.tsx

@@ -0,0 +1,5 @@
+import PageLoader from "@/components/page-loader";
+
+export default function Loading() {
+  return <PageLoader loaderMessage="Checking Project Detail" />;
+}