Some code refactoring

davidemioma · Jun 8, 2024 · fea2905 · fea2905
1 parent 90c5da8
commit fea2905
Show file tree

Hide file tree

Showing 24 changed files with 738 additions and 522 deletions.
diff --git a/app/(admin-board)/_components/DataChart.tsx b/app/(admin-board)/_components/DataChart.tsx
@@ -1,6 +1,10 @@
 "use client";
 
 import React from "react";
+import Link from "next/link";
+import Spinner from "@/components/Spinner";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
 import {
   PieChart,
   Pie,
@@ -11,7 +15,11 @@ import {
 } from "recharts";
 
 type Props = {
-  data: { name: string; value: number }[];
+  title: string;
+  href: string;
+  hrefText: string;
+  queryKey: string[];
+  getData: () => {};
 };
 
 const COLORS = ["#fde047", "#06b6d4", "#ef4444", "#22c55e", "#71717a"];
@@ -28,33 +36,64 @@ const CustomTooltip = ({ active, payload }: any) => {
   return null;
 };
 
-const DataChart = ({ data }: Props) => {
+const DataChart = ({ title, href, hrefText, queryKey, getData }: Props) => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey,
+    queryFn: async () => {
+      const data = await getData();
+
+      return data;
+    },
+  });
+
+  if (!data || isError || !Array.isArray(data)) {
+    return null;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="w-full p-4 flex items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
   return (
-    <div className="w-full overflow-hidden">
-      <ResponsiveContainer width="100%" height={400}>
-        <PieChart>
-          <Pie
-            data={data}
-            cx="50%"
-            cy="50%"
-            outerRadius={150}
-            fill="#8884d8"
-            dataKey="value"
-            label={(entry) => entry.name}
-          >
-            {data.map((entry, index) => (
-              <Cell
-                key={`cell-${index}`}
-                fill={COLORS[index % COLORS.length]}
-              />
-            ))}
-          </Pie>
-
-          <Tooltip content={<CustomTooltip />} />
-
-          <Legend />
-        </PieChart>
-      </ResponsiveContainer>
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">{title}</h1>
+
+        <Link href={href}>
+          <Button variant={"violet"}>{hrefText}</Button>
+        </Link>
+      </div>
+
+      <div className="w-full overflow-hidden">
+        <ResponsiveContainer width="100%" height={400}>
+          <PieChart>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              outerRadius={150}
+              fill="#8884d8"
+              dataKey="value"
+              label={(entry) => entry.name}
+            >
+              {data.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={COLORS[index % COLORS.length]}
+                />
+              ))}
+            </Pie>
+
+            <Tooltip content={<CustomTooltip />} />
+
+            <Legend />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
     </div>
   );
 };

diff --git a/app/(admin-board)/admin/page.tsx b/app/(admin-board)/admin/page.tsx
@@ -17,14 +17,10 @@ import {
 export default async function AdminPage() {
   const { user } = await currentUser();
 
-  const storesChartData = await getStoreChartData();
-
   const nonVerifiedUserCount = await getUsersCount();
 
   const verifiedUserCount = await getUsersCount(true);
 
-  const productChartData = await getProductChartData();
-
   return (
     <div className="w-full">
       <Container>
@@ -92,29 +88,21 @@ export default async function AdminPage() {
             </div>
           </div>
 
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <h1 className="text-2xl font-bold">Stores</h1>
-
-              <Link href="/admin/stores">
-                <Button variant={"violet"}>View All</Button>
-              </Link>
-            </div>
-
-            {storesChartData && <DataChart data={storesChartData} />}
-          </div>
-
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <h1 className="text-2xl font-bold">Products</h1>
-
-              <Link href="/admin/products">
-                <Button variant={"violet"}>View All</Button>
-              </Link>
-            </div>
-
-            {productChartData && <DataChart data={productChartData} />}
-          </div>
+          <DataChart
+            title="Stores"
+            href="/admin/stores"
+            hrefText="View All"
+            queryKey={["get-stores-chart-data"]}
+            getData={getStoreChartData}
+          />
+
+          <DataChart
+            title="Products"
+            href="/admin/products"
+            hrefText="View All"
+            queryKey={["get-products-chart-data"]}
+            getData={getProductChartData}
+          />
         </div>
       </Container>
     </div>

diff --git a/app/(marketing)/checkout/loading.tsx b/app/(marketing)/checkout/loading.tsx
diff --git a/app/(marketing)/orders/loading.tsx b/app/(marketing)/orders/loading.tsx
diff --git a/app/(marketing)/products/[productId]/_components/Recommendation.tsx b/app/(marketing)/products/[productId]/_components/Recommendation.tsx
@@ -2,20 +2,37 @@
 
 import React, { useRef, useState } from "react";
 import { cn } from "@/lib/utils";
-import { HomeProductType } from "@/types";
+import Spinner from "@/components/Spinner";
+import { RecommendedType } from "@/types";
 import Container from "@/components/Container";
+import { useQuery } from "@tanstack/react-query";
 import { ArrowLeft, ArrowRight } from "lucide-react";
+import { getRecommendedProducts } from "@/data/product";
 import Product from "@/app/(marketing)/_components/Product";
 
 type Props = {
-  products: HomeProductType[];
+  product: RecommendedType;
 };
 
-const Recommendation = ({ products }: Props) => {
+const Recommendation = ({ product }: Props) => {
   const rowRef = useRef<HTMLDivElement>(null);
 
   const [isMoved, setIsMoved] = useState(false);
 
+  const {
+    data: products,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["get-recommended-product", product.id],
+    queryFn: async () => {
+      const products = await getRecommendedProducts(product);
+
+      return products;
+    },
+    staleTime: 1000 * 60 * 5,
+  });
+
   const handleClick = (direction: string) => {
     setIsMoved(true);
 
@@ -31,7 +48,15 @@ const Recommendation = ({ products }: Props) => {
     }
   };
 
-  if (products.length === 0) {
+  if (isLoading) {
+    return (
+      <div className="w-full p-5 flex items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (products?.length === 0 || isError) {
     return null;
   }
 
@@ -40,7 +65,7 @@ const Recommendation = ({ products }: Props) => {
       <div className="py-10 space-y-5">
         <h1 className="text-2xl md:text-3xl font-bold">You Might Also Like</h1>
 
-        {products.length > 1 && (
+        {products && products?.length > 1 && (
           <div className="flex items-center justify-end gap-3">
             <button
               className={cn(
@@ -67,11 +92,14 @@ const Recommendation = ({ products }: Props) => {
           ref={rowRef}
           className="flex items-center gap-2 overflow-x-scroll scrollbar-hide"
         >
-          {products.map((product, i) => (
-            <div key={product.id} className="min-w-[350px]">
-              <Product product={product} />
-            </div>
-          ))}
+          {!isLoading &&
+            !isError &&
+            Array.isArray(products) &&
+            products.map((product, i) => (
+              <div key={product.id} className="min-w-[350px]">
+                <Product product={product} />
+              </div>
+            ))}
         </div>
       </div>
     </Container>