diff --git a/front/src/domain/fetching-redux/fetchOrFail.ts b/front/src/domain/fetching-redux/fetchOrFail.ts index a37067f0..bb36d816 100644 --- a/front/src/domain/fetching-redux/fetchOrFail.ts +++ b/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, getApi: () => Api, getState: () => State, ) => Promise @@ -27,7 +28,7 @@ export const fetchOrFail = ( fetchActions: FetchActions = defaultActions, execute: Execute, ) => async ( - dispatch: Dispatch, + dispatch: ThunkDispatch, getState: () => State, createApi: (token: Option) => Api, ) => { diff --git a/front/src/domain/money/actions/createIncome.ts b/front/src/domain/money/actions/createIncome.ts index da3ce7f9..4612ecd6 100644 --- a/front/src/domain/money/actions/createIncome.ts +++ b/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()) }) diff --git a/front/src/domain/money/actions/createOutcome.ts b/front/src/domain/money/actions/createOutcome.ts index 1ccd5719..1f24a81f 100644 --- a/front/src/domain/money/actions/createOutcome.ts +++ b/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()) }) diff --git a/front/src/domain/money/actions/refetchData.ts b/front/src/domain/money/actions/refetchData.ts index a49b281c..ae0ec6f7 100644 --- a/front/src/domain/money/actions/refetchData.ts +++ b/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)), ), ]) }) diff --git a/front/src/domain/money/hooks/useCreateIncome.ts b/front/src/domain/money/hooks/useCreateIncome.ts deleted file mode 100644 index f7ebad6f..00000000 --- a/front/src/domain/money/hooks/useCreateIncome.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useCallback } from 'react' -import { useDispatch } from 'redux-react-hook' - -import { IncomeModel } from '@shared/models/money/IncomeModel' - -import { createIncome } from '../actions/createIncome' - -export const useCreateIncome = () => { - const dispatch = useDispatch() - - return useCallback( - (income: IncomeModel): Promise => - dispatch(createIncome(income) as any), - [], - ) -} diff --git a/front/src/domain/money/hooks/useCreateOutcome.ts b/front/src/domain/money/hooks/useCreateOutcome.ts deleted file mode 100644 index c405b151..00000000 --- a/front/src/domain/money/hooks/useCreateOutcome.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useCallback } from 'react' -import { useDispatch } from 'redux-react-hook' - -import { OutcomeModel } from '@shared/models/money/OutcomeModel' - -import { createOutcome } from '../actions/createOutcome' - -export const useCreateOutcome = () => { - const dispatch = useDispatch() - - return useCallback( - (outcome: OutcomeModel): Promise => - dispatch(createOutcome(outcome) as any), - [], - ) -} diff --git a/front/src/domain/store/ExtraArg.ts b/front/src/domain/store/ExtraArg.ts new file mode 100644 index 00000000..e66f962d --- /dev/null +++ b/front/src/domain/store/ExtraArg.ts @@ -0,0 +1,5 @@ +import { Option } from 'tsoption' + +import { Api } from '../api' + +export type ExtraArg = (token: Option) => Api diff --git a/front/src/domain/store/index.ts b/front/src/domain/store/index.ts index 0cd3e440..a1afc17d 100644 --- a/front/src/domain/store/index.ts +++ b/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' diff --git a/front/src/domain/store/useThunk.ts b/front/src/domain/store/useThunk.ts new file mode 100644 index 00000000..091d64fe --- /dev/null +++ b/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 >( + action: ThunkAction, + ) => dispatch(action as any) +} diff --git a/front/src/features/app/features/create/create-income/CreateIncome.tsx b/front/src/features/app/features/create/create-income/CreateIncome.tsx index 70f25600..545c188e 100644 --- a/front/src/features/app/features/create/create-income/CreateIncome.tsx +++ b/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) diff --git a/front/src/features/app/features/create/create-outcome/CreateOutcome.tsx b/front/src/features/app/features/create/create-outcome/CreateOutcome.tsx index f6716723..38e6abb4 100644 --- a/front/src/features/app/features/create/create-outcome/CreateOutcome.tsx +++ b/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) diff --git a/front/src/features/app/features/history/History.tsx b/front/src/features/app/features/history/History.tsx index 928db19a..7ae39d1d 100644 --- a/front/src/features/app/features/history/History.tsx +++ b/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], ) diff --git a/front/src/features/app/features/stats/Stats.tsx b/front/src/features/app/features/stats/Stats.tsx index 1c0b202f..f8b7b649 100644 --- a/front/src/features/app/features/stats/Stats.tsx +++ b/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], ) diff --git a/front/src/features/landing/features/sign-in/SignIn.tsx b/front/src/features/landing/features/sign-in/SignIn.tsx index ef0ed012..4a5adaeb 100644 --- a/front/src/features/landing/features/sign-in/SignIn.tsx +++ b/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') }, []) diff --git a/front/src/features/landing/features/sign-up/SignUp.tsx b/front/src/features/landing/features/sign-up/SignUp.tsx index ef8bfbfc..b656496b 100644 --- a/front/src/features/landing/features/sign-up/SignUp.tsx +++ b/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') }, [])