import { useInfiniteQuery, useMutation, useQuery, useQueryClient, UseQueryResult, } from "@tanstack/react-query"; import { createPage, deletePage, getPageById, getSidebarPages, updatePage, movePage, getPageBreadcrumbs, getRecentChanges, } from "@/features/page/services/page-service"; import { IMovePage, IPage, IPageInput, SidebarPagesParams, } from "@/features/page/types/page.types"; import { notifications } from "@mantine/notifications"; import { IPagination } from "@/lib/types.ts"; import { queryClient } from "@/main.tsx"; import { buildTree } from "@/features/page/tree/utils"; import { useEffect } from "react"; import { validate as isValidUuid } from "uuid"; import { useTranslation } from "react-i18next"; export function usePageQuery( pageInput: Partial, ): UseQueryResult { const query = useQuery({ queryKey: ["pages", pageInput.pageId], queryFn: () => getPageById(pageInput), enabled: !!pageInput.pageId, staleTime: 5 * 60 * 1000, }); useEffect(() => { if (query.data) { if (isValidUuid(pageInput.pageId)) { queryClient.setQueryData(["pages", query.data.slugId], query.data); } else { queryClient.setQueryData(["pages", query.data.id], query.data); } } }, [query.data]); return query; } export function useCreatePageMutation() { const { t } = useTranslation(); return useMutation>({ mutationFn: (data) => createPage(data), onSuccess: (data) => {}, onError: (error) => { notifications.show({ message: t("Failed to create page"), color: "red" }); }, }); } export function useUpdatePageMutation() { const queryClient = useQueryClient(); return useMutation>({ mutationFn: (data) => updatePage(data), onSuccess: (data) => { const pageBySlug = queryClient.getQueryData([ "pages", data.slugId, ]); const pageById = queryClient.getQueryData(["pages", data.id]); if (pageBySlug) { queryClient.setQueryData(["pages", data.slugId], { ...pageBySlug, ...data, }); } if (pageById) { queryClient.setQueryData(["pages", data.id], { ...pageById, ...data }); } }, }); } export function useDeletePageMutation() { const { t } = useTranslation(); return useMutation({ mutationFn: (pageId: string) => deletePage(pageId), onSuccess: () => { notifications.show({ message: t("Page deleted successfully") }); }, onError: (error) => { notifications.show({ message: t("Failed to delete page"), color: "red" }); }, }); } export function useMovePageMutation() { return useMutation({ mutationFn: (data) => movePage(data), }); } export function useGetSidebarPagesQuery( data: SidebarPagesParams, ): UseQueryResult, Error> { return useQuery({ queryKey: ["sidebar-pages", data], queryFn: () => getSidebarPages(data), }); } export function useGetRootSidebarPagesQuery(data: SidebarPagesParams) { return useInfiniteQuery({ queryKey: ["root-sidebar-pages", data.spaceId], queryFn: async ({ pageParam }) => { return getSidebarPages({ spaceId: data.spaceId, page: pageParam }); }, initialPageParam: 1, getPreviousPageParam: (firstPage) => firstPage.meta.hasPrevPage ? firstPage.meta.page - 1 : undefined, getNextPageParam: (lastPage) => lastPage.meta.hasNextPage ? lastPage.meta.page + 1 : undefined, }); } export function usePageBreadcrumbsQuery( pageId: string, ): UseQueryResult, Error> { return useQuery({ queryKey: ["breadcrumbs", pageId], queryFn: () => getPageBreadcrumbs(pageId), enabled: !!pageId, }); } export async function fetchAncestorChildren(params: SidebarPagesParams) { // not using a hook here, so we can call it inside a useEffect hook const response = await queryClient.fetchQuery({ queryKey: ["sidebar-pages", params], queryFn: () => getSidebarPages(params), staleTime: 30 * 60 * 1000, }); return buildTree(response.items); } export function useRecentChangesQuery( spaceId?: string, ): UseQueryResult, Error> { return useQuery({ queryKey: ["recent-changes", spaceId], queryFn: () => getRecentChanges(spaceId), refetchOnMount: true, }); }