diff --git a/app/accounts/[id]/categories/[categoryId]/edit.tsx b/app/accounts/[id]/categories/[categoryId]/edit.tsx index 6755a4c..984810e 100644 --- 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(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 index 3539cba..b42ae6a 100644 --- 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(""); 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 index 1ad7fc4..590d48a 100644 --- 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(amountDefault); const [categoryId, setCategoryId] = useState(categoryIdDefault); const [comment, setComment] = useState(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 index 6c8c7a4..229064b 100644 --- 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(""); const [categoryId, setCategoryId] = useState(""); const [comment, setComment] = useState(""); @@ -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 index e96849e..178fab0 100644 --- a/components/AccountContext.tsx +++ b/components/AccountContext.tsx @@ -1,7 +1,10 @@ import { createContext, DependencyList, + Dispatch, ReactNode, + SetStateAction, + useCallback, useContext, useEffect, useState, @@ -9,21 +12,24 @@ import { import { Account, restoreAccount } from "../lib/account"; import { getEvents } from "../lib/api"; -export const AccountContext = createContext< - (accountId: string) => Promise ->((_accountId: string) => Promise.reject()); +type ContextValue = { + accounts: { [accountId: string]: Account }; + setAccounts: Dispatch>; +}; + +const AccountContext = createContext({ + accounts: {}, + setAccounts: () => {}, +}); type Props = { children: ReactNode; }; export function AccountContextProvider({ children }: Props): JSX.Element { + const [accounts, setAccounts] = useState({}); return ( - - getEvents(accountId).then((events) => restoreAccount(events)) - } - > + {children} ); @@ -33,10 +39,17 @@ export function useAccount( accountId: string, deps: DependencyList ): [Account | null, (account: Account) => void] { - const [account, setAccount] = useState(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]; }