refact: best way to fatching data

Author: joao-gugel

app/(main)/home/page.tsx

@@ -17,6 +17,12 @@ import { Star, BarChart3 } from "lucide-react";
 
 import { UserButton } from "@clerk/nextjs";
 
+import { currentUser } from "@/lib/current-user";
+
+import { redirect } from "next/navigation";
+
+import { db } from "@/lib/db";
+
 const resumeMock = [
   {
     expenses: 200,
@@ -35,7 +41,41 @@ const resumeMock = [
   },
 ];
 
-const HomePage = () => {
+const HomePage = async () => {
+  const user = await currentUser();
+
+  if (!user) return redirect("/sign-in");
+
+  const entries = await db.entry.findMany({
+    where: {
+      userId: user.id,
+    },
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+
+  const expenses = await db.expense.findMany({
+    where: {
+      userId: user.id,
+    },
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+
+  const getTotal = (type: "expense" | "entry") => {
+    if (type === "expense") {
+      return expenses.reduce((ac, curr) => ac + curr.amount, 0);
+    }
+
+    if (type === "entry") {
+      return entries.reduce((ac, curr) => ac + curr.amount, 0);
+    }
+
+    return 0;
+  };
+
   return (
     <div>
       <div className="flex w-full lg:max-w-[1600px]  justify-between items-center">
@@ -61,7 +101,10 @@ const HomePage = () => {
             Hello, its good to see you! <Star className="w-4 h-4" />
           </p>
           <div className="md:w-1/2">
-            <HomeMonthStatus entriesValue={800} expensesValue={400} />
+            <HomeMonthStatus
+              entriesValue={getTotal("entry")}
+              expensesValue={getTotal("expense")}
+            />
           </div>
           <Carousel className="md:w-1/2">
             <CarouselContent>
@@ -85,10 +128,10 @@ const HomePage = () => {
           </p>
           <div className="w-full flex flex-col md:flex-row gap-5">
             <div className="md:w-1/2">
-              <HomeRegisterCard type="entries" />
+              <HomeRegisterCard type="entries" registers={entries} />
             </div>
             <div className="md:w-1/2">
-              <HomeRegisterCard type="expenses" />
+              <HomeRegisterCard type="expenses" registers={expenses} />
             </div>
           </div>
         </div>

components/home/home-month-status.tsx

@@ -20,7 +20,8 @@ const HomeMonthStatus = ({
   entriesValue,
   expensesValue,
 }: HomeMonthStatusProps) => {
-  const isPositive = () => entriesValue > expensesValue;
+  const isPositive = entriesValue > expensesValue;
+  const isZero = !entriesValue && !expensesValue;
 
   return (
     <Card className="md:h-[250px] rounded-2xl shadow-sm">
@@ -37,10 +38,11 @@ const HomeMonthStatus = ({
         <p
           className={cn(
             `text-red-500 flex items-center text-2xl`,
-            isPositive() && "text-green-400"
+            isPositive && "text-green-400",
+            isZero && "text-zinc-400"
           )}
         >
-          {isPositive() && <Plus className="w-4 h-4" />}
+          {isPositive && <Plus className="w-4 h-4" />}
           {formatValue(entriesValue - expensesValue)}
         </p>
       </CardContent>

components/home/home-register-card.tsx

@@ -12,44 +12,22 @@ import { Separator } from "../ui/separator";
 
 import { Plus, TrendingDown, TrendingUp } from "lucide-react";
 
-import { cn, formatValue } from "@/lib/utils";
-
 import Link from "next/link";
 
 import useModal from "@/hooks/use-modal-store";
 
-import { Entry, Expense } from "@prisma/client";
+import HomeRegisterItems from "./home-register-items";
 
-import { useEffect, useState } from "react";
-import axios from "axios";
+import { Entry, Expense } from "@prisma/client";
 
 interface HomeRegisterCardProps {
   type: "expenses" | "entries";
+  registers: Expense[] | Entry[];
 }
 
-const HomeRegisterCard = ({ type }: HomeRegisterCardProps) => {
-  const [registers, setRegisters] = useState<Entry[] | Expense[]>([]);
-  const [loading, setLoading] = useState(true);
+const HomeRegisterCard = ({ type, registers }: HomeRegisterCardProps) => {
   const { onOpen } = useModal();
 
-  useEffect(() => {
-    getRegisters();
-  }, []);
-
-  const getRegisters = async () => {
-    console.log(`/api/${type}`);
-    try {
-      setLoading(true);
-      const registers = await axios(`/api/${type}`);
-
-      setRegisters(registers.data[type] as Entry[] | Expense[]);
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   return (
     <Card className="rounded-2xl shadow-sm">
       <CardHeader className="py-3">
@@ -71,31 +49,7 @@ const HomeRegisterCard = ({ type }: HomeRegisterCardProps) => {
       <Separator />
       <CardContent className="h-[270px] p-2 lg:h-[320px]">
         <ScrollArea className="h-full">
-          {registers.length <= 0 && (
-            <div className="w-full h-[250px] lg:h-[290px] flex items-center justify-center text-center p-2">
-              <p className="opacity-60 text-sm lg:text-lg">
-                You dont have any {type} records yet, create one now!
-              </p>
-            </div>
-          )}
-          {registers.length > 0 &&
-            registers.map((register) => (
-              <button
-                key={register.id}
-                className="flex w-full justify-around p-4 border mb-2 rounded-xl"
-              >
-                <p>{register.name}</p>
-                <p>{}</p>
-                <p
-                  className={cn(
-                    type === "entries" ? "text-green-500" : "text-red-400"
-                  )}
-                >
-                  {type === "entries" ? "+" : "-"}
-                  {formatValue(register.amount)}
-                </p>
-              </button>
-            ))}
+          <HomeRegisterItems type={type} registers={registers} />
         </ScrollArea>
       </CardContent>
       <Separator />

components/home/home-register-items.tsx

@@ -0,0 +1,41 @@
+import { cn, formatValue } from "@/lib/utils";
+import { Entry, Expense } from "@prisma/client";
+
+interface HomeRegisterItemsTypeProps {
+  type: "entries" | "expenses";
+  registers: Expense[] | Entry[];
+}
+
+const HomeRegisterItems = ({ type, registers }: HomeRegisterItemsTypeProps) => {
+  return (
+    <>
+      {registers.length <= 0 && (
+        <div className="w-full h-[250px] lg:h-[290px] flex items-center justify-center text-center p-2">
+          <p className="opacity-60 text-sm lg:text-lg">
+            You dont have any {type} records yet, create one now!
+          </p>
+        </div>
+      )}
+      {registers.length > 0 &&
+        registers.map((register) => (
+          <button
+            key={register.id}
+            className="flex w-full justify-around p-4 border mb-2 rounded-xl"
+          >
+            <p>{register.name}</p>
+            <p>{}</p>
+            <p
+              className={cn(
+                type === "entries" ? "text-green-500" : "text-red-400"
+              )}
+            >
+              {type === "entries" ? "+" : "-"}
+              {formatValue(register.amount)}
+            </p>
+          </button>
+        ))}
+    </>
+  );
+};
+
+export default HomeRegisterItems;

context/TestContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+
+export const TestContext = createContext({});
+
+export const TestProvider = ({ children }: { children: React.ReactNode }) => {
+  return <TestContext.Provider value={{}}>{children}</TestContext.Provider>;
+};