pl-fe: refactor for code reuse

Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk 2024-12-04 21:01:02 +01:00
parent 5efacc274f
commit 4f95b1617c
7 changed files with 64 additions and 84 deletions

View file

@ -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 client = useClient();
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 useEventParticipationRequests = makePaginatedResponseQuery(
(statusId: string) => ['accountsLists', 'eventParticipationRequests', statusId],
(client, params) => client.events.getEventParticipationRequests(...params).then(minifyRequestList),
);
const useAcceptEventParticipationRequestMutation = (statusId: string, accountId: string) => {
const client = useClient();

View file

@ -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';
import { minifyAccountList } from 'pl-fe/api/normalizers/minify-list';
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(),
});
};
const useEventParticipations = makePaginatedResponseQuery(
(statusId: string) => ['accountsLists', 'eventParticipations', statusId],
(client, params) => client.events.getEventParticipations(...params).then(minifyAccountList),
);
export { useEventParticipations };

View file

@ -1,7 +1,7 @@
import { useMutation, type InfiniteData } from '@tanstack/react-query';
import { useInfiniteQuery, useMutation, type InfiniteData } from '@tanstack/react-query';
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 { 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 client = useClient();
return useInfiniteQuery({
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 makeUseFollowRequests = <T>(select: ((data: InfiniteData<PaginatedResponse<string>>) => T)) => makePaginatedResponseQuery(
() => ['accountsLists', 'followRequests'],
(client) => client.myAccount.getFollowRequests().then(minifyAccountList),
select,
);
const useFollowRequests = makeUseFollowRequests((data) => data.pages.map(page => page.items).flat());

View file

@ -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 useStatusInteractions = (statusId: string, method: 'getDislikedBy' | 'getFavouritedBy' | 'getRebloggedBy') => {
const client = useClient();
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 queryKey = {
getDislikedBy: 'statusDislikes',
getFavouritedBy: 'statusFavourites',
getRebloggedBy: 'statusReblogs',
};
const useStatusDislikes = (statusId: string) => useStatusInteractions(statusId, 'getDislikedBy');
const useStatusFavourites = (statusId: string) => useStatusInteractions(statusId, 'getFavouritedBy');
const useStatusReblogs = (statusId: string) => useStatusInteractions(statusId, 'getRebloggedBy');
const makeUseStatusInteractions = (method: 'getDislikedBy' | 'getFavouritedBy' | 'getRebloggedBy') => makePaginatedResponseQuery(
(statusId: string) => ['accountsLists', queryKey[method], statusId],
(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();

View file

@ -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';
import { useClient } from 'pl-fe/hooks/use-client';
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(),
});
};
const useStatusQuotes = makePaginatedResponseQuery(
(statusId: string) => ['statusLists', 'quotes', statusId],
(client, params) => client.statuses.getStatusQuotes(...params).then(minifyStatusList),
);
export { useStatusQuotes };

View file

@ -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 };