pl-fe: queryOptions migrations

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/birthday-panel.tsx

@@ -1,9 +1,10 @@
+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 { useBirthdayReminders } from 'pl-fe/queries/accounts/use-birthday-reminders';
+import { birthdayRemindersQueryOptions } from 'pl-fe/queries/accounts/birthday-reminders';
 
 const timeToMidnight = () => {
   const now = new Date();
@@ -28,7 +29,7 @@ interface IBirthdayPanel {
 const BirthdayPanel = ({ limit }: IBirthdayPanel) => {
   const [[day, month], setDate] = useState(getCurrentDate);
 
-  const { data: birthdays = [] } = useBirthdayReminders(month, day);
+  const { data: birthdays = [] } = useQuery(birthdayRemindersQueryOptions(month, day));
   const birthdaysToRender = birthdays.slice(0, limit);
 
   const timeout = useRef<NodeJS.Timeout>();

packages/pl-fe/src/modals/birthdays-modal.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -6,13 +7,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 { useBirthdayReminders } from 'pl-fe/queries/accounts/use-birthday-reminders';
+import { birthdayRemindersQueryOptions } from 'pl-fe/queries/accounts/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 } = useBirthdayReminders(month, day);
+  const { data: accountIds } = useQuery(birthdayRemindersQueryOptions(month, day));
 
   const onClickClose = () => {
     onClose('BIRTHDAYS');

packages/pl-fe/src/queries/accounts/birthday-reminders.ts

@@ -0,0 +1,16 @@
+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 };

packages/pl-fe/src/queries/accounts/use-birthday-reminders.ts

@@ -1,22 +0,0 @@
-
-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 };

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 store = configureStore({
+const untypedStore = configureStore({
   reducer: appReducer,
   middleware: () => new Tuple(
     thunk,
@@ -15,6 +15,10 @@ const store = configureStore({
   devTools: true,
 });
 
+const store = untypedStore as Omit<typeof untypedStore, 'dispatch'> & {
+  dispatch: AppDispatch;
+};
+
 type Store = typeof store;
 
 // Infer the `RootState` and `AppDispatch` types from the store itself