From e5279e709527ef51b008e5e3b9e398653b5898e0 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 8 Dec 2024 12:03:12 +0100
Subject: [PATCH] WIP: Use useEffect to prevent duplicated load of resources

---
 app/[slug]/dashboard/expenses/page.tsx | 17 ++++++++++++++++-
 app/[slug]/dashboard/guests/page.tsx   | 13 +++++--------
 app/ui/expenses/table.tsx              | 17 ++---------------
 3 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/app/[slug]/dashboard/expenses/page.tsx b/app/[slug]/dashboard/expenses/page.tsx
index 8b24064..db1ef0b 100644
--- a/app/[slug]/dashboard/expenses/page.tsx
+++ b/app/[slug]/dashboard/expenses/page.tsx
@@ -1,15 +1,30 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+'use client';
+
 import { lusitana } from '@/app/ui/fonts';
 import ExpensesTable from '@/app/ui/expenses/table';
+import { useState, useEffect } from 'react';
+import { Expense } from '@/app/lib/definitions';
+import { loadExpenses } from '@/app/api/expenses';
  
 export default  function Page () {
+  const [expenses, setExpenses] = useState<Array<Expense>>([]);
+
+  function refreshExpenses() {
+    loadExpenses((expenses) => {
+      setExpenses(expenses);
+    });
+  }
+
+  useEffect(() => refreshExpenses, []);
+
   return (
     <div className="w-full">
       <div className="w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
         <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
-        <ExpensesTable />
+        <ExpensesTable expenses={expenses}/>
       </div>
     </div>
   );
diff --git a/app/[slug]/dashboard/guests/page.tsx b/app/[slug]/dashboard/guests/page.tsx
index 09db838..a484b1b 100644
--- a/app/[slug]/dashboard/guests/page.tsx
+++ b/app/[slug]/dashboard/guests/page.tsx
@@ -11,33 +11,30 @@ import GroupsTable from '@/app/ui/groups/table';
 import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
-import { Suspense, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 
 export default function Page() {
   function refreshGuests() {
     loadGuests((guests) => {
       setGuests(guests);
-      setGuestsLoaded(true);
     });
   }
 
   function refreshGroups() {
     loadGroups((groups) => {
       setGroups(groups);
-      setGroupsLoaded(true);
     });
   }
 
-  const [groupsLoaded, setGroupsLoaded] = useState(false);
   const [groups, setGroups] = useState<Array<Group>>([]);
-
-  const [guestsLoaded, setGuestsLoaded] = useState(false);
   const [guests, setGuests] = useState<Array<Guest>>([]);
   const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
 
-  !groupsLoaded && refreshGroups();
-  !guestsLoaded && refreshGuests();
+  useEffect(() => {
+    refreshGroups();
+    refreshGuests();
+  }, []);
 
   return (
     <div className="w-full">
diff --git a/app/ui/expenses/table.tsx b/app/ui/expenses/table.tsx
index 121990c..46bd858 100644
--- a/app/ui/expenses/table.tsx
+++ b/app/ui/expenses/table.tsx
@@ -2,25 +2,12 @@
 
 'use client'
 
-import { loadExpenses, updateExpense } from '@/app/api/expenses';
+import { updateExpense } from '@/app/api/expenses';
 import { Expense } from '@/app/lib/definitions';
-import { useState } from "react";
 import InlineTextField from "../components/form/inlineTextField";
 import TableOfContents from "../components/table-of-contents";
 
-export default function ExpensesTable() {
-  const [expenses, setExpenses] = useState<Array<Expense>>([]);
-  const [expensesLoaded, setExpensesLoaded] = useState(false);
-
-  function refreshExpenses() {
-    loadExpenses((expenses) => {
-      setExpenses(expenses);
-      setExpensesLoaded(true);
-    });
-  }
-
-  !expensesLoaded && refreshExpenses();
-
+export default function ExpensesTable({expenses}: {expenses: Array<Expense>}) {
   return (
     <TableOfContents
       headers={['Name', 'Amount (€)', 'Pricing Type']}