refactor: add condition rendering for project data

src/app/(investment)/invest/[id]/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import { useParams } from "next/navigation";
 import { Separator } from "@/components/ui/separator";
 import { Input } from "@/components/ui/input";
@@ -15,7 +14,6 @@ import { loadStripe } from "@stripe/stripe-js";
 
 import { getProjectDataQuery } from "@/lib/data/projectQuery";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
-import useSession from "@/lib/supabase/useSession";
 
 if (process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY === undefined) {
   throw new Error("NEXT_PUBLIC_STRIPE_PUBLIC_KEY is not defined");
@@ -72,7 +70,11 @@ export default function InvestPage() {
     fetchInvestorData();
   }, [supabase]);
 
-  const { data: projectData, isLoading: isLoadingProject } = useQuery(getProjectDataQuery(supabase, Number(params.id)));
+  const {
+    data: projectData,
+    isLoading: isLoadingProject,
+    error: projectError,
+  } = useQuery(getProjectDataQuery(supabase, Number(params.id)));
 
   const handleCheckboxChange = (index: number) => {
     const updatedCheckedTerms = [...checkedTerms];
@@ -89,57 +91,69 @@ export default function InvestPage() {
 
   return (
     <div className="mx-10 md:mx-40 my-10">
-      <h1 className="text-2xl md:text-4xl font-bold">Invest on ${projectData?.project_name}</h1>
-      <Separator className="my-4" />
-      <div></div>
-      <div>
-        <div className="w-1/2 space-y-2">
-          <h2 className="text:base md:text-2xl">Investment Amount</h2>
-          <Input
-            className="w-52"
-            type="number"
-            placeholder="min $10"
-            min={10}
-            onChangeCapture={(e) => setInvestAmount(Number(e.currentTarget.value))}
-          />
-        </div>
-        <Separator className="my-4" />
+      {isLoadingProject ? (
+        <p>Loading project details...</p>
+      ) : projectError ? (
+        <p>Error loading project data. Please try again later.</p>
+      ) : projectData ? (
+        <>
+          <h1 className="text-2xl md:text-4xl font-bold">Invest in {projectData.project_name}</h1>
+          <Separator className="my-4" />
 
-        <div className=" md:w-2/3 space-y-2">
-          <h2 className="text-2xl">Terms and Services</h2>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Select</TableHead>
-                <TableHead>Term</TableHead>
-                <TableHead>Description</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {term_data.map((item, index) => (
-                <TableRow key={index}>
-                  <TableCell>
-                    <input type="checkbox" checked={checkedTerms[index]} onChange={() => handleCheckboxChange(index)} />
-                  </TableCell>
-                  <TableCell>{item.term}</TableCell>
-                  <TableCell>{item.description}</TableCell>
+          {/* Investment Amount Section */}
+          <div className="w-1/2 space-y-2">
+            <h2 className="text:base md:text-2xl">Investment Amount</h2>
+            <Input
+              className="w-52"
+              type="number"
+              placeholder="min $10"
+              min={10}
+              onChangeCapture={(e) => setInvestAmount(Number(e.currentTarget.value))}
+            />
+          </div>
+          <Separator className="my-4" />
+
+          {/* Terms and Services Section */}
+          <div className="md:w-2/3 space-y-2">
+            <h2 className="text-2xl">Terms and Services</h2>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Select</TableHead>
+                  <TableHead>Term</TableHead>
+                  <TableHead>Description</TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-        <Separator className="my-4" />
+              </TableHeader>
+              <TableBody>
+                {term_data.map((item, index) => (
+                  <TableRow key={index}>
+                    <TableCell>
+                      <input
+                        type="checkbox"
+                        checked={checkedTerms[index]}
+                        onChange={() => handleCheckboxChange(index)}
+                      />
+                    </TableCell>
+                    <TableCell>{item.term}</TableCell>
+                    <TableCell>{item.description}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <Separator className="my-4" />
 
-        <div className="w-full space-y-2">
-          <h2 className="text:base md:text-2xl">Payment Information</h2>
-          <div>
+          {/* Payment Information Section */}
+          <div className="w-full space-y-2">
+            <h2 className="text:base md:text-2xl">Payment Information</h2>
             <Elements
               stripe={stripePromise}
               options={{
                 mode: "payment",
                 amount: convertToSubcurrency(investAmount),
                 currency: "usd",
-              }}>
+              }}
+            >
               <CheckoutPage
                 amount={investAmount}
                 isAcceptTermAndService={isAcceptTermAndService}
@@ -148,8 +162,10 @@ export default function InvestPage() {
               />
             </Elements>
           </div>
-        </div>
-      </div>
+        </>
+      ) : (
+        <p>No project data found.</p>
+      )}
     </div>
   );
 }