Refactor file upload path and add loading animation to ApplyProject component

2025-12-18 21:44:06 +01:00 · 2024-10-29 11:24:40 +07:00 · 2024-10-29 11:24:40 +07:00 · 42b47aa4e8
commit 42b47aa4e8
parent fd911a722d
9 changed files with 247 additions and 144 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -42,7 +42,7 @@
        "lucide-react": "^0.428.0",
        "next": "^14.2.15",
        "next-themes": "^0.3.0",
-        "react": "^18",
+        "react": "^18.3.1",
        "react-countup": "^6.5.3",
        "react-dom": "^18",
        "react-hook-form": "^7.53.0",
@ -62,7 +62,7 @@
        "@trivago/prettier-plugin-sort-imports": "^4.3.0",
        "@types/next": "^8.0.7",
        "@types/node": "^20",
-        "@types/react": "^18",
+        "@types/react": "^18.3.12",
        "@types/react-dom": "^18",
        "@types/react-fade-in": "^2.0.2",
        "@types/react-lottie": "^1.2.10",
@ -2363,9 +2363,9 @@
      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
    },
    "node_modules/@types/react": {
-      "version": "18.3.10",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz",
-      "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==",
+      "version": "18.3.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
+      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
--- a/package.json
+++ b/package.json
@ -43,7 +43,7 @@
    "lucide-react": "^0.428.0",
    "next": "^14.2.15",
    "next-themes": "^0.3.0",
-    "react": "^18",
+    "react": "^18.3.1",
    "react-countup": "^6.5.3",
    "react-dom": "^18",
    "react-hook-form": "^7.53.0",
@ -63,7 +63,7 @@
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/next": "^8.0.7",
    "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.3.12",
    "@types/react-dom": "^18",
    "@types/react-fade-in": "^2.0.2",
    "@types/react-lottie": "^1.2.10",
--- a/src/app/api/dealApi.ts
+++ b/src/app/api/dealApi.ts
@ -6,12 +6,13 @@ export type Deal = {
  created_time: Date;
  investor_id: string;
 };
+const supabase = createSupabaseClient();

 export async function getDealList() {
-  const supabase = createSupabaseClient();
  const { data: dealData, error } = await supabase
-    .from('business')
-    .select(`
+    .from("business")
+    .select(
+      `
      id,
      project (
        id,
@ -21,24 +22,25 @@ export async function getDealList() {
          investor_id
        )
      )
-    `)
-    .eq('user_id', await getCurrentUserID())
+    `
+    )
+    .eq("user_id", await getCurrentUserID())
    .single();

-    if (error || !dealData) {
-      alert(JSON.stringify(error));
-      console.error('Error fetching deal list:', error);
-    } else {
-      const dealList = dealData.project[0].investment_deal;
+  if (error || !dealData) {
+    alert(JSON.stringify(error));
+    console.error("Error fetching deal list:", error);
+  } else {
+    const dealList = dealData.project[0].investment_deal;

-      if (!dealList.length) {
-        alert("No data available");
-        return; // Exit early if there's no data
-      }
-
-      // Sort the dealList by created_time in descending order
-      const byCreatedTimeDesc = (a: Deal, b: Deal) =>
-        new Date(b.created_time).getTime() - new Date(a.created_time).getTime();
-      return dealList.sort(byCreatedTimeDesc);
+    if (!dealList.length) {
+      alert("No data available");
+      return; // Exit early if there's no data
    }
-};
+
+    // Sort the dealList by created_time in descending order
+    const byCreatedTimeDesc = (a: Deal, b: Deal) =>
+      new Date(b.created_time).getTime() - new Date(a.created_time).getTime();
+    return dealList.sort(byCreatedTimeDesc);
+  }
+}
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@ -89,11 +89,16 @@ export default function ApplyBusiness() {
      .from("business")
      .select("*")
      .eq("user_id", userID);
-    console.table(business);
-    if (error) {
+    let { data: businessApplication, error: applicationError } = await supabase
+      .from("business_application")
+      .select("*")
+      .eq("user_id", userID);
+    // console.table(business);
+    if (error || applicationError) {
      console.error(error);
+      console.error(applicationError);
    }
-    if (business) {
+    if ((business && business.length != 0) || (businessApplication && businessApplication.length != 0)) {
      return true;
    }
    return false;
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@ -14,6 +14,57 @@ import { useState } from "react";

 import { useDealList } from "./hook";

+const data = [
+  {
+    name: "Jan",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Feb",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Mar",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Apr",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "May",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Jun",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Jul",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Aug",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Sep",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Oct",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Nov",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Dec",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+];
+
 export default function Dashboard() {
  const [graphType, setGraphType] = useState("line");
  const dealList = useDealList();
@ -166,7 +217,7 @@ export default function Dashboard() {
                    <CardTitle>Overview</CardTitle>
                  </CardHeader>
                  <CardContent className="pl-2">
-                    <Overview graphType={graphType} />
+                    <Overview graphType={graphType} data={data} />
                    {/* tab to switch between line and bar graph */}
                    <Tabs
                      defaultValue="line"
--- a/src/app/portfolio/[uid]/page.tsx
+++ b/src/app/portfolio/[uid]/page.tsx
@ -0,0 +1,35 @@
+import { Overview } from "@/components/ui/overview";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { getInvestorDeal } from "@/lib/data/query";
+
+export default async function Portfolio({
+  params,
+}: {
+  params: { uid: string };
+}) {
+  const supabase = createSupabaseClient();
+  const { data: deals, error } = await getInvestorDeal(supabase, params.uid);
+  if (error) {
+    console.error(error);
+  }
+  const getMonthName = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleString("default", { month: "long" });
+  };
+
+  const graphData = deals
+    ? deals.map((item) => ({
+      // convert month's index to string
+        name: getMonthName(item.created_time),
+        value: item.deal_amount as number,
+      }))
+    : [];
+
+  return (
+    <div>
+      {/* {JSON.stringify(deals)} */}
+      {JSON.stringify(graphData)}
+      <Overview graphType="line" data={graphData}></Overview>
+    </div>
+  );
+}
--- a/src/app/project/apply/page.tsx
+++ b/src/app/project/apply/page.tsx
@ -17,7 +17,7 @@ const BUCKET_PITCH_APPLICATION_NAME = "project-application";
 export default function ApplyProject() {
  const [isSuccess, setIsSuccess] = useState(true);
  const onSubmit: SubmitHandler<projectSchema> = async (data) => {
-    alert("มาแน้ววว");
+    // alert("มาแน้ววว");
    await sendApplication(data);
    // console.table(data);
    // console.log(typeof data["projectPhotos"], data["projectPhotos"]);
--- a/src/components/ui/overview.tsx
+++ b/src/components/ui/overview.tsx
@ -2,109 +2,106 @@

 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, LineChart, Line } from "recharts";

-const data = [
-  {
-    name: "Jan",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Feb",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Mar",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Apr",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "May",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Jun",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Jul",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Aug",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Sep",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Oct",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Nov",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Dec",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-];
+// const data = [
+//   {
+//     name: "Jan",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Feb",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Mar",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Apr",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "May",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Jun",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Jul",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Aug",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Sep",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Oct",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Nov",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+//   {
+//     name: "Dec",
+//     total: Math.floor(Math.random() * 5000) + 1000,
+//   },
+// ];

 interface OverViewProps{
    graphType:string;
+    data: {name: string, value: number}[];
 }

 export function Overview(props: OverViewProps) {
    return (
-        <ResponsiveContainer width="100%" height={350}>
-          {props.graphType === 'line' ? (
-            <LineChart data={data}>
-              <XAxis
-                dataKey="name"
-                stroke="#888888"
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-              />
-              <YAxis
-                stroke="#888888"
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-                tickFormatter={(value) => `$${value}`}
-              />
-              <Line
-                dataKey="total"
-                fill="currentColor"
-                className="fill-primary"
-              />
-            </LineChart>
-          ) : (
-            <BarChart data={data}>
-              <XAxis
-                dataKey="name"
-                stroke="#888888"
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-              />
-              <YAxis
-                stroke="#888888"
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-                tickFormatter={(value) => `$${value}`}
-              />
-              <Bar
-                dataKey="total"
-                fill="currentColor"
-                className="fill-primary"
-              />
-            </BarChart>
-          )}
-        </ResponsiveContainer>
-      );
+      <ResponsiveContainer width="100%" height={350}>
+        {props.graphType === "line" ? (
+          <LineChart data={props.data}>
+            <XAxis
+              dataKey="name"
+              stroke="#888888"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              stroke="#888888"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => `$${value}`}
+            />
+            <Line
+              dataKey="total"
+              fill="currentColor"
+              className="fill-primary"
+            />
+          </LineChart>
+        ) : (
+          <BarChart data={props.data}>
+            <XAxis
+              dataKey="name"
+              stroke="#888888"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              stroke="#888888"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => `$${value}`}
+            />
+            <Bar dataKey="total" fill="currentColor" className="fill-primary" />
+          </BarChart>
+        )}
+      </ResponsiveContainer>
+    );
 }
--- a/src/lib/data/query.ts
+++ b/src/lib/data/query.ts
@ -1,10 +1,10 @@
 import { SupabaseClient } from "@supabase/supabase-js";

 function getBusinesses(client: SupabaseClient, query: string | null) {
-  return client.from("business").select("id, business_name, joined_date").ilike(
-    "business_name",
-    `%${query}%`,
-  );
+  return client
+    .from("business")
+    .select("id, business_name, joined_date")
+    .ilike("business_name", `%${query}%`);
 }

 function getProjects(client: SupabaseClient, businessIds: string[]) {
@ -22,23 +22,36 @@ function getProjects(client: SupabaseClient, businessIds: string[]) {
                total_investment,
                target_investment
            )
-        `,
+        `
    )
    .in("business_id", businessIds);
 }

 function getTags(client: SupabaseClient, projectIds: string[]) {
-  return client.from("item_tag").select("item_id, tag (value)").in(
-    "item_id",
-    projectIds,
-  );
+  return client
+    .from("item_tag")
+    .select("item_id, tag (value)")
+    .in("item_id", projectIds);
 }

 function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
-  return client.from("investment_deal").select("*", {
-    count: "exact",
-    head: true,
-  }).in("project_id", projectIds);
+  return client
+    .from("investment_deal")
+    .select("*", {
+      count: "exact",
+      head: true,
+    })
+    .in("project_id", projectIds);
 }

-export { getBusinesses, getInvestmentCounts, getProjects, getTags };
+function getInvestorDeal(client: SupabaseClient, userId: string) {
+  return client.from("investment_deal").select("*").in("investor_id", [userId]);
+}
+
+export {
+  getBusinesses,
+  getInvestmentCounts,
+  getProjects,
+  getTags,
+  getInvestorDeal,
+};