♻️ Refactor transactions context and storage to use localStorage ♻️

src/context/transactions/index.tsx

@@ -4,47 +4,51 @@ 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 {
   differenceInDays,
   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<TransactionsProviderProps>) {
-  const [isDeleteTransactionLoading, setIsDeleteTransactionLoading] =
-    useState<IsDeleteTransactionLoadingProps>(
-      INITIAL_IS_DELETE_TRANSACTION_LOADING_VALUE,
-    )
-  const [isAddTransactionLoading, setIsAddTransactionLoading] = useState(false)
+  // This branch will not use json-server, but localStorage
+  // const [isDeleteTransactionLoading, setIsDeleteTransactionLoading] =
+  //   useState<IsDeleteTransactionLoadingProps>(
+  //     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,
     ],

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,

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 }

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
 

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

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[])
+}

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))
+}