♻️(frontend) use dedicated favorite_list route

It exists a dedicated endpoint to list favorite
documents. Better use it to avoid relying on the
general documents listing endpoint.
This commit is contained in:
Anthony LC
2026-01-09 16:56:32 +01:00
committed by Manuel Raynaud
parent 668d7cd404
commit f81db395ef
5 changed files with 81 additions and 7 deletions

View File

@@ -19,6 +19,7 @@ import {
Doc,
KEY_DOC,
KEY_LIST_DOC,
KEY_LIST_FAVORITE_DOC,
ModalRemoveDoc,
getEmojiAndTitle,
useCopyDocLink,
@@ -67,10 +68,10 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
},
});
const removeFavoriteDoc = useDeleteFavoriteDoc({
listInvalidQueries: [KEY_LIST_DOC, KEY_DOC],
listInvalidQueries: [KEY_LIST_DOC, KEY_DOC, KEY_LIST_FAVORITE_DOC],
});
const makeFavoriteDoc = useCreateFavoriteDoc({
listInvalidQueries: [KEY_LIST_DOC, KEY_DOC],
listInvalidQueries: [KEY_LIST_DOC, KEY_DOC, KEY_LIST_FAVORITE_DOC],
});
useEffect(() => {

View File

@@ -5,6 +5,7 @@ export * from './useDeleteFavoriteDoc';
export * from './useDoc';
export * from './useDocOptions';
export * from './useDocs';
export * from './useDocsFavorite';
export * from './useDuplicateDoc';
export * from './useRestoreDoc';
export * from './useSubDocs';

View File

@@ -0,0 +1,72 @@
import { UseQueryOptions, useQuery } from '@tanstack/react-query';
import {
APIError,
APIList,
InfiniteQueryConfig,
errorCauses,
fetchAPI,
useAPIInfiniteQuery,
} from '@/api';
import { Doc } from '../types';
export type DocsFavoriteParams = {
page: number;
};
export type DocsFavoriteResponse = APIList<Doc>;
export const getDocsFavorite = async (
params: DocsFavoriteParams,
): Promise<DocsFavoriteResponse> => {
const searchParams = new URLSearchParams();
if (params.page) {
searchParams.set('page', params.page.toString());
}
const response = await fetchAPI(
`documents/favorite_list/?${searchParams.toString()}`,
);
if (!response.ok) {
throw new APIError(
'Failed to get the favorite docs',
await errorCauses(response),
);
}
return response.json() as Promise<DocsFavoriteResponse>;
};
export const KEY_LIST_FAVORITE_DOC = 'docs_favorite_list';
type UseDocsOptions = UseQueryOptions<
DocsFavoriteResponse,
APIError,
DocsFavoriteResponse
>;
type UseInfiniteDocsOptions = InfiniteQueryConfig<DocsFavoriteResponse>;
export function useDocsFavorite(
params: DocsFavoriteParams,
queryConfig?: UseDocsOptions,
) {
return useQuery<DocsFavoriteResponse, APIError, DocsFavoriteResponse>({
queryKey: [KEY_LIST_FAVORITE_DOC, params],
queryFn: () => getDocsFavorite(params),
...queryConfig,
});
}
export const useInfiniteDocsFavorite = (
params: DocsFavoriteParams,
queryConfig?: UseInfiniteDocsOptions,
) => {
return useAPIInfiniteQuery(
KEY_LIST_FAVORITE_DOC,
getDocsFavorite,
params,
queryConfig,
);
};

View File

@@ -6,6 +6,7 @@ import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
import {
Doc,
KEY_LIST_DOC,
KEY_LIST_FAVORITE_DOC,
ModalRemoveDoc,
useCreateFavoriteDoc,
useDeleteFavoriteDoc,
@@ -27,10 +28,10 @@ export const DocsGridActions = ({
const { mutate: duplicateDoc } = useDuplicateDoc();
const removeFavoriteDoc = useDeleteFavoriteDoc({
listInvalidQueries: [KEY_LIST_DOC],
listInvalidQueries: [KEY_LIST_DOC, KEY_LIST_FAVORITE_DOC],
});
const makeFavoriteDoc = useCreateFavoriteDoc({
listInvalidQueries: [KEY_LIST_DOC],
listInvalidQueries: [KEY_LIST_DOC, KEY_LIST_FAVORITE_DOC],
});
const options: DropdownMenuOption[] = [

View File

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
import { Box, HorizontalSeparator, InfiniteScroll, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { useInfiniteDocs } from '@/docs/doc-management';
import { useInfiniteDocsFavorite } from '@/docs/doc-management';
import { LeftPanelFavoriteItem } from './LeftPanelFavoriteItem';
@@ -11,9 +11,8 @@ export const LeftPanelFavorites = () => {
const { spacingsTokens } = useCunninghamTheme();
const docs = useInfiniteDocs({
const docs = useInfiniteDocsFavorite({
page: 1,
is_favorite: true,
});
const favoriteDocs = docs.data?.pages.flatMap((page) => page.results) || [];