WIP: Use useEffect to prevent duplicated load of resources

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>
   );

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();
+  useEffect(() => {
-  !guestsLoaded && refreshGuests();
+    refreshGroups();
+    refreshGuests();
+  }, []);
 
   return (
     <div className="w-full">

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() {
+export default function ExpensesTable({expenses}: {expenses: Array<Expense>}) {
-  const [expenses, setExpenses] = useState<Array<Expense>>([]);
-  const [expensesLoaded, setExpensesLoaded] = useState(false);
-
-  function refreshExpenses() {
-    loadExpenses((expenses) => {
-      setExpenses(expenses);
-      setExpensesLoaded(true);
-    });
-  }
-
-  !expensesLoaded && refreshExpenses();
-
   return (
     <TableOfContents
       headers={['Name', 'Amount (€)', 'Pricing Type']}