refactor: add useThunk and etc

front/src/domain/fetching-redux/fetchOrFail.ts

@@ -1,8 +1,9 @@
-import { AnyAction, Dispatch } from 'redux'
+import { AnyAction } from 'redux'
+import { ThunkDispatch } from 'redux-thunk'
 import { Option } from 'tsoption'
 
 import { Api } from '@front/domain/api'
-import { State } from '@front/domain/store'
+import { ExtraArg, State } from '@front/domain/store'
 import { getToken } from '@front/domain/user/selectors/getToken'
 
 interface FetchActions {
@@ -12,7 +13,7 @@ interface FetchActions {
 }
 
 type Execute = (
-  dispatch: Dispatch,
+  dispatch: ThunkDispatch<State, ExtraArg, AnyAction>,
   getApi: () => Api,
   getState: () => State,
 ) => Promise<void | any>
@@ -27,7 +28,7 @@ export const fetchOrFail = (
   fetchActions: FetchActions = defaultActions,
   execute: Execute,
 ) => async (
-  dispatch: Dispatch<AnyAction>,
+  dispatch: ThunkDispatch<State, ExtraArg, AnyAction>,
   getState: () => State,
   createApi: (token: Option<string>) => Api,
 ) => {

front/src/domain/money/actions/createIncome.ts

@@ -9,5 +9,5 @@ export const createIncome = (incomeFields: IncomeModel) =>
   fetchOrFail(incomeFetchingActions, async (dispatch, getApi) => {
     await createIncomeRequest(getApi())(incomeFields)
 
-    await dispatch(refetchData() as any)
+    await dispatch(refetchData())
   })

front/src/domain/money/actions/createOutcome.ts

@@ -9,5 +9,5 @@ export const createOutcome = (outcomeFields: OutcomeModel) =>
   fetchOrFail(outcomeFetchingActions, async (dispatch, getApi) => {
     await createOutcomeRequest(getApi())(outcomeFields)
 
-    await dispatch(refetchData() as any)
+    await dispatch(refetchData())
   })

front/src/domain/money/actions/refetchData.ts

@@ -12,12 +12,12 @@ export const refetchData = () =>
     const statsCachedPeriods = getStatsCachedPeriods(getState())
 
     await Promise.all([
-      dispatch(fetchFirstTransactionDate() as any),
+      dispatch(fetchFirstTransactionDate()),
       ...historyCachedPeriods.map(({ from, to, groupBy }) =>
-        dispatch(forceFetchHistory(from, to, groupBy) as any),
+        dispatch(forceFetchHistory(from, to, groupBy)),
       ),
       ...statsCachedPeriods.map(({ from, to, groupBy, currency }) =>
-        dispatch(forceFetchStats(from, to, groupBy, currency) as any),
+        dispatch(forceFetchStats(from, to, groupBy, currency)),
       ),
     ])
   })

front/src/domain/store/ExtraArg.ts

@@ -0,0 +1,5 @@
+import { Option } from 'tsoption'
+
+import { Api } from '../api'
+
+export type ExtraArg = (token: Option<string>) => Api

front/src/domain/store/index.ts

@@ -2,3 +2,5 @@ export { State } from './State'
 export { Store } from './Store'
 export { WithReduxProps } from './WithReduxProps'
 export { withReduxStore } from './withReduxStore'
+export { useThunk } from './useThunk'
+export { ExtraArg } from './ExtraArg'

front/src/domain/store/useThunk.ts

@@ -0,0 +1,14 @@
+import { AnyAction } from 'redux'
+import { useDispatch } from 'redux-react-hook'
+import { ThunkAction } from 'redux-thunk'
+
+import { ExtraArg } from './ExtraArg'
+import { State } from './State'
+
+export const useThunk = () => {
+  const dispatch = useDispatch()
+
+  return <Result = Promise<void>>(
+    action: ThunkAction<Result, State, ExtraArg, AnyAction>,
+  ) => dispatch(action as any)
+}

front/src/features/app/features/create/create-income/CreateIncome.tsx

@@ -2,8 +2,9 @@ import { useCallback } from 'react'
 import { Form } from 'react-final-form'
 import { useMappedState } from 'redux-react-hook'
 
-import { useCreateIncome } from '@front/domain/money/hooks/useCreateIncome'
+import { createIncome } from '@front/domain/money/actions/createIncome'
 import { getCreateIncomeFetching } from '@front/domain/money/selectors/getCreateIncomeFetching'
+import { useThunk } from '@front/domain/store'
 import {
   DatePicker,
   EnumSelect,
@@ -24,7 +25,7 @@ interface Props {
 }
 
 export const CreateIncome = ({ className }: Props) => {
-  const create = useCreateIncome()
+  const dispatch = useThunk()
 
   const fieldsToIncomeModel = useCallback(
     ({ amount, source, currency, date }: any): IncomeModel => ({
@@ -38,7 +39,7 @@ export const CreateIncome = ({ className }: Props) => {
 
   const onSubmit = useCallback(async fields => {
     const income = fieldsToIncomeModel(fields)
-    await create(income)
+    await dispatch(createIncome(income))
   }, [])
 
   const fetching = useMappedState(getCreateIncomeFetching)

front/src/features/app/features/create/create-outcome/CreateOutcome.tsx

@@ -2,8 +2,9 @@ import { useCallback } from 'react'
 import { Form } from 'react-final-form'
 import { useMappedState } from 'redux-react-hook'
 
-import { useCreateOutcome } from '@front/domain/money/hooks/useCreateOutcome'
+import { createOutcome } from '@front/domain/money/actions/createOutcome'
 import { getCreateOutcomeFetching } from '@front/domain/money/selectors/getCreateOutcomeFetching'
+import { useThunk } from '@front/domain/store'
 import {
   DatePicker,
   EnumSelect,
@@ -24,7 +25,7 @@ interface Props {
 }
 
 export const CreateOutcome = ({ className }: Props) => {
-  const create = useCreateOutcome()
+  const dispath = useThunk()
 
   const fieldsToOutcomeModel = useCallback(
     ({ amount, category, currency, date }: any): OutcomeModel => ({
@@ -38,7 +39,7 @@ export const CreateOutcome = ({ className }: Props) => {
 
   const onSubmit = useCallback(async fields => {
     const outcome = fieldsToOutcomeModel(fields)
-    await create(outcome)
+    await dispath(createOutcome(outcome))
   }, [])
 
   const fetching = useMappedState(getCreateOutcomeFetching)

front/src/features/app/features/history/History.tsx

@@ -1,10 +1,11 @@
 import { endOfMonth, startOfMonth } from 'date-fns'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useDispatch, useMappedState } from 'redux-react-hook'
+import { useMappedState } from 'redux-react-hook'
 
 import { fetchHistory } from '@front/domain/money/actions/fetchHistory'
 import { getHistory } from '@front/domain/money/selectors/getHistory'
 import { getHistoryFetchingStatus } from '@front/domain/money/selectors/getHistoryFetchingStatus'
+import { useThunk } from '@front/domain/store'
 import { Period } from '@front/ui/components/form/period'
 import { Loader } from '@front/ui/components/layout/loader'
 import { GroupBy } from '@shared/enum/GroupBy'
@@ -22,7 +23,7 @@ const groupBy = GroupBy.Month
 
 export const History = ({ className }: Props) => {
   const fetching = useMappedState(getHistoryFetchingStatus)
-  const dispatch = useDispatch()
+  const dispatch = useThunk()
 
   const [from, setFrom] = useState(startOfMonth(new Date()))
   const [to, setTo] = useState(endOfMonth(new Date()))
@@ -40,7 +41,7 @@ export const History = ({ className }: Props) => {
 
   useEffect(
     () => {
-      dispatch(fetchHistory(actualFrom, actualTo, groupBy) as any)
+      dispatch(fetchHistory(actualFrom, actualTo, groupBy))
     },
     [actualFrom, actualTo],
   )

front/src/features/app/features/stats/Stats.tsx

@@ -1,11 +1,12 @@
 import { endOfYear, format, startOfYear } from 'date-fns'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useDispatch, useMappedState } from 'redux-react-hook'
+import { useMappedState } from 'redux-react-hook'
 
 import { fetchStats } from '@front/domain/money/actions/fetchStats'
 import { getFirstTransactionDate } from '@front/domain/money/selectors/getFirstTransactionDate'
 import { getStats } from '@front/domain/money/selectors/getStats'
 import { getStatsFetchingStatus } from '@front/domain/money/selectors/getStatsFetchingStatus'
+import { useThunk } from '@front/domain/store'
 import { displayMoney } from '@front/helpers/displayMoney'
 import { BarChart } from '@front/ui/components/chart/bar-chart'
 import { Period } from '@front/ui/components/form/period'
@@ -25,7 +26,7 @@ interface Props {
 export const Stats = ({ className }: Props) => {
   const firstTransactionDate = useMappedState(getFirstTransactionDate)
   const fetching = useMappedState(getStatsFetchingStatus)
-  const dispatch = useDispatch()
+  const dispatch = useThunk()
 
   const [from, setFrom] = useState(startOfYear(firstTransactionDate))
   const [to, setTo] = useState(endOfYear(new Date()))
@@ -44,7 +45,7 @@ export const Stats = ({ className }: Props) => {
 
   useEffect(
     () => {
-      dispatch(fetchStats(actualFrom, actualTo, groupBy, currency) as any)
+      dispatch(fetchStats(actualFrom, actualTo, groupBy, currency))
     },
     [actualFrom, actualTo, currency],
   )

front/src/features/landing/features/sign-in/SignIn.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react'
 import { Form } from 'react-final-form'
-import { useDispatch, useMappedState } from 'redux-react-hook'
+import { useMappedState } from 'redux-react-hook'
 
+import { useThunk } from '@front/domain/store'
 import { signIn } from '@front/domain/user/actions/signIn'
 import { getSignInFetching } from '@front/domain/user/selectors/getSignInFetching'
 import { Input } from '@front/features/final-form'
@@ -14,10 +15,10 @@ import { Card } from '@front/ui/components/layout/card'
 import * as styles from '../SignForm.css'
 
 export const SignIn = () => {
-  const dispatch = useDispatch()
+  const dispatch = useThunk()
 
   const onSubmit = useCallback(async ({ email, password }) => {
-    await dispatch(signIn(email, password) as any)
+    await dispatch(signIn(email, password))
     await pushRoute('/app')
   }, [])
 

front/src/features/landing/features/sign-up/SignUp.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react'
 import { Form } from 'react-final-form'
-import { useDispatch, useMappedState } from 'redux-react-hook'
+import { useMappedState } from 'redux-react-hook'
 
+import { useThunk } from '@front/domain/store'
 import { signUp } from '@front/domain/user/actions/signUp'
 import { getSignUpFetching } from '@front/domain/user/selectors/getSignUpFetching'
 import { Input } from '@front/features/final-form'
@@ -14,10 +15,10 @@ import { Card } from '@front/ui/components/layout/card'
 import * as styles from '../SignForm.css'
 
 export const SignUp = () => {
-  const dispatch = useDispatch()
+  const dispatch = useThunk()
 
   const onSubmit = useCallback(async ({ email, password }) => {
-    await dispatch(signUp(email, password) as any)
+    await dispatch(signUp(email, password))
     await pushRoute('/hello')
   }, [])