pl-fe: refactor for code reuse

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/api/hooks/account-lists/use-event-participation-requests.ts

@@ -2,7 +2,8 @@
 import { type InfiniteData, useInfiniteQuery, useMutation } from '@tanstack/react-query';
 
 import { importEntities } from 'pl-fe/actions/importer';
-import { minifyList } from 'pl-fe/api/normalizers/minify-list';
+import { makePaginatedResponseQuery } from 'pl-fe/api/utils/make-paginated-response-query';
+import { minifyList } from 'pl-fe/api/utils/minify-list';
 import { useClient } from 'pl-fe/hooks/use-client';
 import { queryClient } from 'pl-fe/queries/client';
 import { store } from 'pl-fe/store';
@@ -24,17 +25,10 @@ const removeRequest = (statusId: string, accountId: string) =>
     pages: data.pages.map(({ items, ...page }) => ({ ...page, items: items.filter(({ account_id }) => account_id !== accountId) })),
   } : undefined);
 
-const useEventParticipationRequests = (statusId: string) => {
+const useEventParticipationRequests = makePaginatedResponseQuery(
-  const client = useClient();
+  (statusId: string) => ['accountsLists', 'eventParticipationRequests', statusId],
-
+  (client, params) => client.events.getEventParticipationRequests(...params).then(minifyRequestList),
-  return useInfiniteQuery({
+);
-    queryKey: ['accountsLists', 'eventParticipationRequests', statusId],
-    queryFn: ({ pageParam }) => pageParam.next?.() || client.events.getEventParticipationRequests(statusId).then(minifyRequestList),
-    initialPageParam: { previous: null, next: null, items: [], partial: false } as MinifiedRequestList,
-    getNextPageParam: (page) => page.next ? page : undefined,
-    select: (data) => data.pages.map(page => page.items).flat(),
-  });
-};
 
 const useAcceptEventParticipationRequestMutation = (statusId: string, accountId: string) => {
   const client = useClient();

packages/pl-fe/src/api/hooks/account-lists/use-event-participations.ts

@@ -1,21 +1,9 @@
+import { makePaginatedResponseQuery } from 'pl-fe/api/utils/make-paginated-response-query';
+import { minifyAccountList } from 'pl-fe/api/utils/minify-list';
 
-import { useInfiniteQuery } from '@tanstack/react-query';
+const useEventParticipations = makePaginatedResponseQuery(
-
+  (statusId: string) => ['accountsLists', 'eventParticipations', statusId],
-import { minifyAccountList } from 'pl-fe/api/normalizers/minify-list';
+  (client, params) => client.events.getEventParticipations(...params).then(minifyAccountList),
-import { useClient } from 'pl-fe/hooks/use-client';
+);
-
-import type { PaginatedResponse } from 'pl-api';
-
-const useEventParticipations = (statusId: string) => {
-  const client = useClient();
-
-  return useInfiniteQuery({
-    queryKey: ['accountsLists', 'eventParticipations', statusId],
-    queryFn: ({ pageParam }) => pageParam.next?.() || client.events.getEventParticipations(statusId).then(minifyAccountList),
-    initialPageParam: { previous: null, next: null, items: [], partial: false } as PaginatedResponse<string>,
-    getNextPageParam: (page) => page.next ? page : undefined,
-    select: (data) => data.pages.map(page => page.items).flat(),
-  });
-};
 
 export { useEventParticipations };

packages/pl-fe/src/api/hooks/account-lists/use-follow-requests.ts

@@ -1,7 +1,7 @@
+import { useMutation, type InfiniteData } from '@tanstack/react-query';
 
-import { useInfiniteQuery, useMutation, type InfiniteData } from '@tanstack/react-query';
+import { makePaginatedResponseQuery } from 'pl-fe/api/utils/make-paginated-response-query';
-
+import { minifyAccountList } from 'pl-fe/api/utils/minify-list';
-import { minifyAccountList } from 'pl-fe/api/normalizers/minify-list';
 import { useClient } from 'pl-fe/hooks/use-client';
 import { queryClient } from 'pl-fe/queries/client';
 
@@ -23,17 +23,11 @@ const removeFollowRequest = (accountId: string) =>
     pages: data.pages.map(({ items, ...page }) => ({ ...page, items: items.filter((id) => id !== accountId) })),
   } : undefined);
 
-const makeUseFollowRequests = <T>(select: ((data: InfiniteData<PaginatedResponse<string, true>, PaginatedResponse<string, true>>) => T)) => () => {
+const makeUseFollowRequests = <T>(select: ((data: InfiniteData<PaginatedResponse<string>>) => T)) => makePaginatedResponseQuery(
-  const client = useClient();
+  () => ['accountsLists', 'followRequests'],
-
+  (client) => client.myAccount.getFollowRequests().then(minifyAccountList),
-  return useInfiniteQuery({
+  select,
-    queryKey: ['accountsLists', 'followRequests'],
+);
-    queryFn: ({ pageParam }) => pageParam.next?.() || client.myAccount.getFollowRequests().then(minifyAccountList),
-    initialPageParam: { previous: null, next: null, items: [], partial: false } as PaginatedResponse<string>,
-    getNextPageParam: (page) => page.next ? page : undefined,
-    select,
-  });
-};
 
 const useFollowRequests = makeUseFollowRequests((data) => data.pages.map(page => page.items).flat());
 

packages/pl-fe/src/api/hooks/account-lists/use-status-interactions.ts

@@ -1,33 +1,25 @@
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { importEntities } from 'pl-fe/actions/importer';
-import { minifyAccountList } from 'pl-fe/api/normalizers/minify-list';
+import { makePaginatedResponseQuery } from 'pl-fe/api/utils/make-paginated-response-query';
+import { minifyAccountList } from 'pl-fe/api/utils/minify-list';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useClient } from 'pl-fe/hooks/use-client';
 
-import type { PaginatedResponse } from 'pl-api';
+const queryKey = {
-
+  getDislikedBy: 'statusDislikes',
-const useStatusInteractions = (statusId: string, method: 'getDislikedBy' | 'getFavouritedBy' | 'getRebloggedBy') => {
+  getFavouritedBy: 'statusFavourites',
-  const client = useClient();
+  getRebloggedBy: 'statusReblogs',
-
-  const queryKey = {
-    getDislikedBy: 'statusDislikes',
-    getFavouritedBy: 'statusFavourites',
-    getRebloggedBy: 'statusReblogs',
-  }[method];
-
-  return useInfiniteQuery({
-    queryKey: ['accountsLists', queryKey, statusId],
-    queryFn: ({ pageParam }) => pageParam.next?.() || client.statuses[method](statusId).then(minifyAccountList),
-    initialPageParam: { previous: null, next: null, items: [], partial: false } as PaginatedResponse<string>,
-    getNextPageParam: (page) => page.next ? page : undefined,
-    select: (data) => data.pages.map(page => page.items).flat(),
-  });
 };
 
-const useStatusDislikes = (statusId: string) => useStatusInteractions(statusId, 'getDislikedBy');
+const makeUseStatusInteractions = (method: 'getDislikedBy' | 'getFavouritedBy' | 'getRebloggedBy') => makePaginatedResponseQuery(
-const useStatusFavourites = (statusId: string) => useStatusInteractions(statusId, 'getFavouritedBy');
+  (statusId: string) => ['accountsLists', queryKey[method], statusId],
-const useStatusReblogs = (statusId: string) => useStatusInteractions(statusId, 'getRebloggedBy');
+  (client, params) => client.statuses[method](...params).then(minifyAccountList),
+);
+
+const useStatusDislikes = makeUseStatusInteractions('getDislikedBy');
+const useStatusFavourites = makeUseStatusInteractions('getFavouritedBy');
+const useStatusReblogs = makeUseStatusInteractions('getRebloggedBy');
 
 const useStatusReactions = (statusId: string, emoji?: string) => {
   const client = useClient();

packages/pl-fe/src/api/hooks/statuses/use-status-quotes.ts

@@ -1,20 +1,9 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { makePaginatedResponseQuery } from 'pl-fe/api/utils/make-paginated-response-query';
+import { minifyStatusList } from 'pl-fe/api/utils/minify-list';
 
-import { minifyStatusList } from 'pl-fe/api/normalizers/minify-list';
+const useStatusQuotes = makePaginatedResponseQuery(
-import { useClient } from 'pl-fe/hooks/use-client';
+  (statusId: string) => ['statusLists', 'quotes', statusId],
-
+  (client, params) => client.statuses.getStatusQuotes(...params).then(minifyStatusList),
-import type { PaginatedResponse } from 'pl-api';
+);
-
-const useStatusQuotes = (statusId: string) => {
-  const client = useClient();
-
-  return useInfiniteQuery({
-    queryKey: ['statusLists', 'quotes', statusId],
-    queryFn: ({ pageParam }) => pageParam.next?.() || client.statuses.getStatusQuotes(statusId).then(minifyStatusList),
-    initialPageParam: { previous: null, next: null, items: [], partial: false } as PaginatedResponse<string>,
-    getNextPageParam: (page) => page.next ? page : undefined,
-    select: (data) => data.pages.map(page => page.items).flat(),
-  });
-};
 
 export { useStatusQuotes };

packages/pl-fe/src/api/utils/make-paginated-response-query.ts

@@ -0,0 +1,23 @@
+import { type InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
+
+import { useClient } from 'pl-fe/hooks/use-client';
+
+import type { PaginatedResponse, PlApiClient } from 'pl-api';
+
+const makePaginatedResponseQuery = <T1 extends Array<any>, T2, T3 = Array<T2>>(
+  queryKey: (...params: T1) => string[],
+  queryFn: (client: PlApiClient, params: T1) => Promise<PaginatedResponse<T2>>,
+  select?: (data: InfiniteData<PaginatedResponse<T2>>) => T3,
+) => (...params: T1) => {
+    const client = useClient();
+
+    return useInfiniteQuery({
+      queryKey: queryKey(...params),
+      queryFn: ({ pageParam }) => pageParam.next?.() || queryFn(client, params),
+      initialPageParam: { previous: null, next: null, items: [], partial: false } as Awaited<ReturnType<typeof queryFn>>,
+      getNextPageParam: (page) => page.next ? page : undefined,
+      select: select ?? ((data) => data.pages.map(page => page.items).flat() as T3),
+    });
+  };
+
+export { makePaginatedResponseQuery };