From 16908f317783e008d4afa273619e4bd2cf1f0385 Mon Sep 17 00:00:00 2001 From: Lucas de Lima Martins de Souza Date: Tue, 16 Jan 2024 22:58:35 -0300 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20transactions=20?= =?UTF-8?q?context=20and=20storage=20to=20use=20localStorage=20=E2=99=BB?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/context/transactions/index.tsx | 113 +++++++++++------- src/reducers/transactions/actions.ts | 8 +- src/storage/storageConfig.ts | 5 +- src/storage/theme/getTheme.ts | 4 +- src/storage/theme/updateTheme.ts | 4 +- .../transactions/getAllTransactions.ts | 8 ++ .../transactions/registerAllTransactions.ts | 6 + 7 files changed, 93 insertions(+), 55 deletions(-) create mode 100644 src/storage/transactions/getAllTransactions.ts create mode 100644 src/storage/transactions/registerAllTransactions.ts diff --git a/src/context/transactions/index.tsx b/src/context/transactions/index.tsx index 29abe4f..d309e08 100644 --- a/src/context/transactions/index.tsx +++ b/src/context/transactions/index.tsx @@ -4,23 +4,25 @@ import React, { useEffect, useMemo, useReducer, - useState, + // useState, } from 'react' +// import { api } from '../../server/api' import { ITransactions, PeriodBalanceProps, TRANSACTIONS_REDUCER_INITIAL_STATE, } from '../../dto/transactions' import { transactionsReducer } from '../../reducers/transactions/reducer' -import { api } from '../../server/api' import { + addTransaction, calculateBalance, calculateIncomeTotal, calculateOutcomeTotal, getLastIncomeTransaction, getLastOutcomeTransaction, getPeriodBalance, - loadTransactions, + // loadTransactions, + removeTransactionById, } from '../../reducers/transactions/actions' import { dateFormatterMedium } from '../../utils/formatter' import { @@ -28,23 +30,25 @@ import { differenceInMonths, differenceInYears, } from 'date-fns' +import { getAllTransactions } from '../../storage/transactions/getAllTransactions' +import { registerAllTransactions } from '../../storage/transactions/registerAllTransactions' type PeriodBalanceFormattedProps = { period: string dates: PeriodBalanceProps } -type IsDeleteTransactionLoadingProps = { - id: string - value: boolean -} +// type IsDeleteTransactionLoadingProps = { +// id: string +// value: boolean +// } interface TransactionsContextProps { transactions: ITransactions[] incomeTotal: number outcomeTotal: number balance: number - isAddTransactionLoading: boolean - isDeleteTransactionLoading: IsDeleteTransactionLoadingProps + // isAddTransactionLoading: boolean + // isDeleteTransactionLoading: IsDeleteTransactionLoadingProps periodBalanceFormatted?: PeriodBalanceFormattedProps lastIncomeTransactionDateFormatted: string lastOutcomeTransactionDateFormatted: string @@ -56,25 +60,33 @@ interface TransactionsProviderProps { children: React.ReactNode } -const INITIAL_IS_DELETE_TRANSACTION_LOADING_VALUE = { - id: '', - value: false, -} +// const INITIAL_IS_DELETE_TRANSACTION_LOADING_VALUE = { +// id: '', +// value: false, +// } const TransactionsContext = createContext({} as TransactionsContextProps) function TransactionsProvider({ children, }: Readonly) { - const [isDeleteTransactionLoading, setIsDeleteTransactionLoading] = - useState( - INITIAL_IS_DELETE_TRANSACTION_LOADING_VALUE, - ) - const [isAddTransactionLoading, setIsAddTransactionLoading] = useState(false) + // This branch will not use json-server, but localStorage + // const [isDeleteTransactionLoading, setIsDeleteTransactionLoading] = + // useState( + // INITIAL_IS_DELETE_TRANSACTION_LOADING_VALUE, + // ) + // const [isAddTransactionLoading, setIsAddTransactionLoading] = useState(false) const [transactionsState, dispatch] = useReducer( transactionsReducer, TRANSACTIONS_REDUCER_INITIAL_STATE, + () => { + const transactions = getAllTransactions() + return { + ...TRANSACTIONS_REDUCER_INITIAL_STATE, + transactions, + } + }, ) const { balance, @@ -143,29 +155,38 @@ function TransactionsProvider({ return undefined }, [periodBalance]) - async function loadTransactionsData() { - const response = await api.get('/transactions') - const data: ITransactions[] = response.data ? response.data : [] - dispatch(loadTransactions(data)) - } - - const addNewTransaction = useCallback(async (transaction: ITransactions) => { - setIsAddTransactionLoading(true) - await api.post('/transactions', transaction) - loadTransactionsData() - setIsAddTransactionLoading(false) + const handleAddNewTransaction = useCallback((transaction: ITransactions) => { + dispatch(addTransaction(transaction)) }, []) - const removeTransactionById = useCallback(async (id: string) => { - setIsDeleteTransactionLoading({ id, value: true }) - await api.delete(`/transactions/${id}`) - loadTransactionsData() - setIsDeleteTransactionLoading({ id, value: false }) + const handleRemoveTransactionById = useCallback((id: string) => { + dispatch(removeTransactionById(id)) }, []) - useEffect(() => { - loadTransactionsData() - }, []) + // This branch will not use json-server, but localStorage + // async function loadTransactionsData() { + // const response = await api.get('/transactions') + // const data: ITransactions[] = response.data ? response.data : [] + // dispatch(loadTransactions(data)) + // } + + // const addNewTransaction = useCallback(async (transaction: ITransactions) => { + // setIsAddTransactionLoading(true) + // await api.post('/transactions', transaction) + // loadTransactionsData() + // setIsAddTransactionLoading(false) + // }, []) + + // const removeTransactionById = useCallback(async (id: string) => { + // setIsDeleteTransactionLoading({ id, value: true }) + // await api.delete(`/transactions/${id}`) + // loadTransactionsData() + // setIsDeleteTransactionLoading({ id, value: false }) + // }, []) + + // useEffect(() => { + // loadTransactionsData() + // }, []) useEffect(() => { dispatch(calculateIncomeTotal()) @@ -174,6 +195,8 @@ function TransactionsProvider({ dispatch(getLastIncomeTransaction()) dispatch(getLastOutcomeTransaction()) dispatch(getPeriodBalance()) + + registerAllTransactions(transactions) }, [transactions]) const contextValue = useMemo( @@ -183,23 +206,23 @@ function TransactionsProvider({ transactions, outcomeTotal, periodBalanceFormatted, - isAddTransactionLoading, - isDeleteTransactionLoading, + // isAddTransactionLoading, + // isDeleteTransactionLoading, lastIncomeTransactionDateFormatted, lastOutcomeTransactionDateFormatted, - handleAddNewTransaction: addNewTransaction, - handleRemoveTransactionById: removeTransactionById, + handleAddNewTransaction, + handleRemoveTransactionById, }), [ balance, incomeTotal, transactions, outcomeTotal, - addNewTransaction, - removeTransactionById, + handleAddNewTransaction, + handleRemoveTransactionById, periodBalanceFormatted, - isAddTransactionLoading, - isDeleteTransactionLoading, + // isAddTransactionLoading, + // isDeleteTransactionLoading, lastIncomeTransactionDateFormatted, lastOutcomeTransactionDateFormatted, ], diff --git a/src/reducers/transactions/actions.ts b/src/reducers/transactions/actions.ts index 1dd3887..a44d69d 100644 --- a/src/reducers/transactions/actions.ts +++ b/src/reducers/transactions/actions.ts @@ -50,7 +50,7 @@ function loadTransactions(transactions: ITransactions[]) { } satisfies IActions } -function addNewTransaction(transaction: ITransactions) { +function addTransaction(transaction: ITransactions) { return { type: ActionTypes.ADD_TRANSACTION, payload: { @@ -59,7 +59,7 @@ function addNewTransaction(transaction: ITransactions) { } satisfies IActions } -function removeTransaction(id: string) { +function removeTransactionById(id: string) { return { type: ActionTypes.REMOVE_TRANSACTION, payload: { @@ -108,8 +108,8 @@ export { ActionTypes, calculateBalance, loadTransactions, - addNewTransaction, - removeTransaction, + addTransaction, + removeTransactionById, calculateIncomeTotal, calculateOutcomeTotal, getLastIncomeTransaction, diff --git a/src/storage/storageConfig.ts b/src/storage/storageConfig.ts index 4c5c2f5..d6d2344 100644 --- a/src/storage/storageConfig.ts +++ b/src/storage/storageConfig.ts @@ -1,3 +1,4 @@ -const DT_MONEY_THEME = '@dt-money:theme-1.0.0' +const TRANSACTIONS_COLLECTION = '@dtmoney:transactions-1.0.0' +const APP_THEME = '@dtmoney:theme-1.0.0' -export { DT_MONEY_THEME } +export { TRANSACTIONS_COLLECTION, APP_THEME } diff --git a/src/storage/theme/getTheme.ts b/src/storage/theme/getTheme.ts index e15f3f3..2dd6268 100644 --- a/src/storage/theme/getTheme.ts +++ b/src/storage/theme/getTheme.ts @@ -1,8 +1,8 @@ import { ITheme, THEME } from '../../dto/theme' -import { DT_MONEY_THEME } from '../storageConfig' +import { APP_THEME } from '../storageConfig' export function getTheme() { - const response = localStorage.getItem(DT_MONEY_THEME) + const response = localStorage.getItem(APP_THEME) const theme = response ? JSON.parse(response) : THEME.light diff --git a/src/storage/theme/updateTheme.ts b/src/storage/theme/updateTheme.ts index aa8e0c9..8036666 100644 --- a/src/storage/theme/updateTheme.ts +++ b/src/storage/theme/updateTheme.ts @@ -1,6 +1,6 @@ import { ITheme } from '../../dto/theme' -import { DT_MONEY_THEME } from '../storageConfig' +import { APP_THEME } from '../storageConfig' export function updateTheme(theme: ITheme) { - localStorage.setItem(DT_MONEY_THEME, JSON.stringify(theme)) + localStorage.setItem(APP_THEME, JSON.stringify(theme)) } diff --git a/src/storage/transactions/getAllTransactions.ts b/src/storage/transactions/getAllTransactions.ts new file mode 100644 index 0000000..70eb852 --- /dev/null +++ b/src/storage/transactions/getAllTransactions.ts @@ -0,0 +1,8 @@ +import { ITransactions } from '../../dto/transactions' +import { TRANSACTIONS_COLLECTION } from '../storageConfig' + +export function getAllTransactions(): ITransactions[] { + const storage = localStorage.getItem(TRANSACTIONS_COLLECTION) + + return storage ? JSON.parse(storage) : ([] as ITransactions[]) +} diff --git a/src/storage/transactions/registerAllTransactions.ts b/src/storage/transactions/registerAllTransactions.ts new file mode 100644 index 0000000..2b26528 --- /dev/null +++ b/src/storage/transactions/registerAllTransactions.ts @@ -0,0 +1,6 @@ +import { ITransactions } from '../../dto/transactions' +import { TRANSACTIONS_COLLECTION } from '../storageConfig' + +export function registerAllTransactions(transactions: ITransactions[]) { + localStorage.setItem(TRANSACTIONS_COLLECTION, JSON.stringify(transactions)) +}