Reduce api calls

bouzuya · Mar 28, 2023 · d73485d · d73485d
1 parent 69358a0
commit d73485d
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 20 deletions.
diff --git a/app/accounts/[id]/categories/[categoryId]/edit.tsx b/app/accounts/[id]/categories/[categoryId]/edit.tsx
@@ -12,14 +12,15 @@ export default function CategoryEdit(): JSX.Element {
   const accountId = `${params.id}`;
   const nameDefault = decodeURIComponent(`${params.name}`);
   const categoryId = `${params.categoryId}`;
-  const [account, _setAccount] = useAccount(accountId, []);
+  const [account, setAccount] = useAccount(accountId, []);
   const [name, setName] = useState<string>(nameDefault);
   const router = useRouter();
 
   const onClickOk = () => {
     if (account === null) return;
-    const [_, event] = updateCategory(account, categoryId, name);
+    const [newAccount, event] = updateCategory(account, categoryId, name);
     createEvent(event).then((_) => {
+      setAccount(newAccount);
       router.back();
     });
   };

diff --git a/app/accounts/[id]/categories/new.tsx b/app/accounts/[id]/categories/new.tsx
@@ -10,14 +10,15 @@ import { createEvent } from "../../../../lib/api";
 export default function CategoryNew(): JSX.Element {
   const params = useSearchParams();
   const accountId = `${params.id}`;
-  const [account, _setAccount] = useAccount(accountId, []);
+  const [account, setAccount] = useAccount(accountId, []);
   const [name, setName] = useState<string>("");
   const router = useRouter();
 
   const onClickOk = () => {
     if (account === null) return;
-    const [_, event] = createCategory(account, name);
+    const [newAccount, event] = createCategory(account, name);
     createEvent(event).then((_) => {
+      setAccount(newAccount);
       router.back();
     });
   };

diff --git a/app/accounts/[id]/transactions/[transactionId]/edit.tsx b/app/accounts/[id]/transactions/[transactionId]/edit.tsx
@@ -16,7 +16,7 @@ export default function TransactionEdit(): JSX.Element {
   const categoryIdDefault = `${params.categoryId}`;
   const dateDefault = `${params.date}`;
   const transactionId = `${params.transactionId}`;
-  const [account, _setAccount] = useAccount(accountId, []);
+  const [account, setAccount] = useAccount(accountId, []);
   const [amount, setAmount] = useState<string>(amountDefault);
   const [categoryId, setCategoryId] = useState<string>(categoryIdDefault);
   const [comment, setComment] = useState<string>(commentDefault);
@@ -25,13 +25,14 @@ export default function TransactionEdit(): JSX.Element {
 
   const onClickOk = () => {
     if (account === null) return;
-    const [_, event] = updateTransaction(account, transactionId, {
+    const [newAccount, event] = updateTransaction(account, transactionId, {
       amount,
       categoryId,
       comment,
       date,
     });
     createEvent(event).then((_) => {
+      setAccount(newAccount);
       router.back();
     });
   };

diff --git a/app/accounts/[id]/transactions/new.tsx b/app/accounts/[id]/transactions/new.tsx
@@ -11,7 +11,7 @@ import { createEvent } from "../../../../lib/api";
 export default function TransactionNew(): JSX.Element {
   const params = useSearchParams();
   const accountId = `${params.id}`;
-  const [account, _setAccount] = useAccount(accountId, []);
+  const [account, setAccount] = useAccount(accountId, []);
   const [amount, setAmount] = useState<string>("");
   const [categoryId, setCategoryId] = useState<string>("");
   const [comment, setComment] = useState<string>("");
@@ -22,13 +22,14 @@ export default function TransactionNew(): JSX.Element {
 
   const onClickOk = () => {
     if (account === null) return;
-    const [_, event] = createTransaction(account, {
+    const [newAccount, event] = createTransaction(account, {
       amount,
       categoryId,
       comment,
       date,
     });
     createEvent(event).then((_) => {
+      setAccount(newAccount);
       router.back();
     });
   };

diff --git a/components/AccountContext.tsx b/components/AccountContext.tsx
@@ -1,29 +1,35 @@
 import {
   createContext,
   DependencyList,
+  Dispatch,
   ReactNode,
+  SetStateAction,
+  useCallback,
   useContext,
   useEffect,
   useState,
 } from "react";
 import { Account, restoreAccount } from "../lib/account";
 import { getEvents } from "../lib/api";
 
-export const AccountContext = createContext<
-  (accountId: string) => Promise<Account>
->((_accountId: string) => Promise.reject());
+type ContextValue = {
+  accounts: { [accountId: string]: Account };
+  setAccounts: Dispatch<SetStateAction<{ [accountId: string]: Account }>>;
+};
+
+const AccountContext = createContext<ContextValue>({
+  accounts: {},
+  setAccounts: () => {},
+});
 
 type Props = {
   children: ReactNode;
 };
 
 export function AccountContextProvider({ children }: Props): JSX.Element {
+  const [accounts, setAccounts] = useState({});
   return (
-    <AccountContext.Provider
-      value={(accountId) =>
-        getEvents(accountId).then((events) => restoreAccount(events))
-      }
-    >
+    <AccountContext.Provider value={{ accounts, setAccounts }}>
       {children}
     </AccountContext.Provider>
   );
@@ -33,10 +39,17 @@ export function useAccount(
   accountId: string,
   deps: DependencyList
 ): [Account | null, (account: Account) => void] {
-  const [account, setAccount] = useState<Account | null>(null);
-  const getAccount = useContext(AccountContext);
+  const { accounts, setAccounts } = useContext(AccountContext);
+  const setAccount = (account: Account) => {
+    setAccounts((accounts) => ({ ...accounts, [accountId]: account }));
+  };
   useEffect(() => {
-    getAccount(accountId).then((account) => setAccount(account));
+    const cachedAccount = accounts[accountId];
+    if (cachedAccount === undefined) {
+      getEvents(accountId)
+        .then((events) => restoreAccount(events))
+        .then((account) => setAccount(account));
+    }
   }, deps);
-  return [account, setAccount];
+  return [accounts[accountId], setAccount];
 }