diff --git a/packages/pl-fe/src/components/birthday-panel.tsx b/packages/pl-fe/src/components/birthday-panel.tsx index ea7cc3cea..33f7d6f7a 100644 --- a/packages/pl-fe/src/components/birthday-panel.tsx +++ b/packages/pl-fe/src/components/birthday-panel.tsx @@ -1,10 +1,9 @@ -import { useQuery } from '@tanstack/react-query'; import React, { useRef, useState } from 'react'; import { FormattedMessage } from 'react-intl'; import Widget from 'pl-fe/components/ui/widget'; import AccountContainer from 'pl-fe/containers/account-container'; -import { birthdayRemindersQueryOptions } from 'pl-fe/queries/accounts/birthday-reminders'; +import { useBirthdayReminders } from 'pl-fe/queries/accounts/use-birthday-reminders'; const timeToMidnight = () => { const now = new Date(); @@ -29,7 +28,7 @@ interface IBirthdayPanel { const BirthdayPanel = ({ limit }: IBirthdayPanel) => { const [[day, month], setDate] = useState(getCurrentDate); - const { data: birthdays = [] } = useQuery(birthdayRemindersQueryOptions(month, day)); + const { data: birthdays = [] } = useBirthdayReminders(month, day); const birthdaysToRender = birthdays.slice(0, limit); const timeout = useRef(); diff --git a/packages/pl-fe/src/modals/birthdays-modal.tsx b/packages/pl-fe/src/modals/birthdays-modal.tsx index 60f45e546..e7095d72e 100644 --- a/packages/pl-fe/src/modals/birthdays-modal.tsx +++ b/packages/pl-fe/src/modals/birthdays-modal.tsx @@ -1,4 +1,3 @@ -import { useQuery } from '@tanstack/react-query'; import React, { useState } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -7,13 +6,13 @@ import ScrollableList from 'pl-fe/components/scrollable-list'; import Modal from 'pl-fe/components/ui/modal'; import Spinner from 'pl-fe/components/ui/spinner'; import Account from 'pl-fe/features/birthdays/account'; -import { birthdayRemindersQueryOptions } from 'pl-fe/queries/accounts/birthday-reminders'; +import { useBirthdayReminders } from 'pl-fe/queries/accounts/use-birthday-reminders'; import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root'; const BirthdaysModal = ({ onClose }: BaseModalProps) => { const [[day, month]] = useState(getCurrentDate); - const { data: accountIds } = useQuery(birthdayRemindersQueryOptions(month, day)); + const { data: accountIds } = useBirthdayReminders(month, day); const onClickClose = () => { onClose('BIRTHDAYS'); diff --git a/packages/pl-fe/src/queries/accounts/birthday-reminders.ts b/packages/pl-fe/src/queries/accounts/birthday-reminders.ts deleted file mode 100644 index e241e393b..000000000 --- a/packages/pl-fe/src/queries/accounts/birthday-reminders.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { queryOptions } from '@tanstack/react-query'; - -import { importEntities } from 'pl-fe/actions/importer'; -import { getClient } from 'pl-fe/api'; -import { store } from 'pl-fe/store'; - -const birthdayRemindersQueryOptions = (month: number, day: number) => queryOptions({ - queryKey: ['accountsLists', 'birthdayReminders', month, day], - queryFn: () => getClient().accounts.getBirthdays(day, month).then((accounts) => { - store.dispatch(importEntities({ accounts })); - - return accounts.map(({ id }) => id); - }), -}); - -export { birthdayRemindersQueryOptions }; diff --git a/packages/pl-fe/src/queries/accounts/use-birthday-reminders.ts b/packages/pl-fe/src/queries/accounts/use-birthday-reminders.ts new file mode 100644 index 000000000..e80405779 --- /dev/null +++ b/packages/pl-fe/src/queries/accounts/use-birthday-reminders.ts @@ -0,0 +1,22 @@ + +import { useQuery } from '@tanstack/react-query'; + +import { importEntities } from 'pl-fe/actions/importer'; +import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; +import { useClient } from 'pl-fe/hooks/use-client'; + +const useBirthdayReminders = (month: number, day: number) => { + const client = useClient(); + const dispatch = useAppDispatch(); + + return useQuery({ + queryKey: ['accountsLists', 'birthdayReminders', month, day], + queryFn: () => client.accounts.getBirthdays(day, month).then((accounts) => { + dispatch(importEntities({ accounts })); + + return accounts.map(({ id }) => id); + }), + }); +}; + +export { useBirthdayReminders }; diff --git a/packages/pl-fe/src/store.ts b/packages/pl-fe/src/store.ts index 4a1858526..9202889d9 100644 --- a/packages/pl-fe/src/store.ts +++ b/packages/pl-fe/src/store.ts @@ -5,7 +5,7 @@ import errorsMiddleware from './middleware/errors'; import soundsMiddleware from './middleware/sounds'; import appReducer from './reducers'; -const untypedStore = configureStore({ +const store = configureStore({ reducer: appReducer, middleware: () => new Tuple( thunk, @@ -15,10 +15,6 @@ const untypedStore = configureStore({ devTools: true, }); -const store = untypedStore as Omit & { - dispatch: AppDispatch; -}; - type Store = typeof store; // Infer the `RootState` and `AppDispatch` types from the store itself