fix: reactive subpage list

This commit is contained in:
Philipinho
2026-06-29 19:58:22 +01:00
parent 2959504470
commit 96faff7175
@@ -333,6 +333,22 @@ export function useDeletedPagesQuery(
}); });
} }
function getChildrenCacheKeys(
parentPageId: string | null,
spaceId: string,
): QueryKey[] {
if (parentPageId === null) {
return [["root-sidebar-pages", spaceId]];
}
return queryClient
.getQueriesData({
predicate: (query) =>
query.queryKey[0] === "sidebar-pages" &&
(query.queryKey[1] as { pageId?: string })?.pageId === parentPageId,
})
.map(([key]) => key);
}
export function invalidateOnCreatePage(data: Partial<IPage>) { export function invalidateOnCreatePage(data: Partial<IPage>) {
const newPage: Partial<IPage> = { const newPage: Partial<IPage> = {
creatorId: data.creatorId, creatorId: data.creatorId,
@@ -346,35 +362,27 @@ export function invalidateOnCreatePage(data: Partial<IPage>) {
title: data.title, title: data.title,
}; };
let queryKey: QueryKey = null;
if (data.parentPageId === null) {
queryKey = ["root-sidebar-pages", data.spaceId];
} else {
queryKey = [
"sidebar-pages",
{ pageId: data.parentPageId, spaceId: data.spaceId },
];
}
//update all sidebar pages //update all sidebar pages
queryClient.setQueryData<InfiniteData<IPagination<Partial<IPage>>>>( getChildrenCacheKeys(data.parentPageId, data.spaceId).forEach((queryKey) => {
queryKey, queryClient.setQueryData<InfiniteData<IPagination<Partial<IPage>>>>(
(old) => { queryKey,
if (!old) return old; (old) => {
return { if (!old) return old;
...old, return {
pages: old.pages.map((page, index) => { ...old,
if (index === old.pages.length - 1) { pages: old.pages.map((page, index) => {
return { if (index === old.pages.length - 1) {
...page, return {
items: [...page.items, newPage], ...page,
}; items: [...page.items, newPage],
} };
return page; }
}), return page;
}; }),
}, };
); },
);
});
//update sidebar haschildren //update sidebar haschildren
if (data.parentPageId !== null) { if (data.parentPageId !== null) {
@@ -438,34 +446,30 @@ export function invalidateOnUpdatePage(
title: string, title: string,
icon: string, icon: string,
) { ) {
let queryKey: QueryKey = null;
if (parentPageId === null) {
queryKey = ["root-sidebar-pages", spaceId];
} else {
queryKey = ["sidebar-pages", { pageId: parentPageId, spaceId: spaceId }];
}
//update all sidebar pages //update all sidebar pages
queryClient.setQueryData<InfiniteData<IPagination<IPage>>>( getChildrenCacheKeys(parentPageId, spaceId).forEach((queryKey) => {
queryKey, queryClient.setQueryData<InfiniteData<IPagination<IPage>>>(
(old) => { queryKey,
if (!old) return old; (old) => {
return { if (!old) return old;
...old, return {
pages: old.pages.map((page) => ({ ...old,
...page, pages: old.pages.map((page) => ({
items: page.items.map((sidebarPage: IPage) => ...page,
sidebarPage.id === id items: page.items.map((sidebarPage: IPage) =>
? { sidebarPage.id === id
...sidebarPage, ? {
...(title !== undefined ? { title } : {}), ...sidebarPage,
...(icon !== undefined ? { icon } : {}), ...(title !== undefined ? { title } : {}),
} ...(icon !== undefined ? { icon } : {}),
: sidebarPage, }
), : sidebarPage,
})), ),
}; })),
}, };
); },
);
});
//update recent changes //update recent changes
queryClient.invalidateQueries({ queryClient.invalidateQueries({
@@ -481,24 +485,21 @@ export function updateCacheOnMovePage(
pageData: Partial<IPage>, pageData: Partial<IPage>,
) { ) {
// Remove page from old parent's cache // Remove page from old parent's cache
const oldQueryKey = getChildrenCacheKeys(oldParentId, spaceId).forEach((oldQueryKey) => {
oldParentId === null queryClient.setQueryData<InfiniteData<IPagination<IPage>>>(
? ["root-sidebar-pages", spaceId] oldQueryKey,
: ["sidebar-pages", { pageId: oldParentId, spaceId }]; (old) => {
if (!old) return old;
queryClient.setQueryData<InfiniteData<IPagination<IPage>>>( return {
oldQueryKey, ...old,
(old) => { pages: old.pages.map((page) => ({
if (!old) return old; ...page,
return { items: page.items.filter((item) => item.id !== pageId),
...old, })),
pages: old.pages.map((page) => ({ };
...page, },
items: page.items.filter((item) => item.id !== pageId), );
})), });
};
},
);
// Update old parent's hasChildren flag if it has no more children // Update old parent's hasChildren flag if it has no more children
if (oldParentId !== null) { if (oldParentId !== null) {
@@ -540,36 +541,33 @@ export function updateCacheOnMovePage(
} }
// Add page to new parent's cache // Add page to new parent's cache
const newQueryKey = getChildrenCacheKeys(newParentId, spaceId).forEach((newQueryKey) => {
newParentId === null queryClient.setQueryData<InfiniteData<IPagination<Partial<IPage>>>>(
? ["root-sidebar-pages", spaceId] newQueryKey,
: ["sidebar-pages", { pageId: newParentId, spaceId }]; (old) => {
if (!old) return old;
queryClient.setQueryData<InfiniteData<IPagination<Partial<IPage>>>>( // Check if page already exists in new location
newQueryKey, const exists = old.pages.some((page) =>
(old) => { page.items.some((item) => item.id === pageId),
if (!old) return old; );
if (exists) return old;
// Check if page already exists in new location return {
const exists = old.pages.some((page) => ...old,
page.items.some((item) => item.id === pageId), pages: old.pages.map((page, index) => {
); if (index === old.pages.length - 1) {
if (exists) return old; return {
...page,
return { items: [...page.items, pageData],
...old, };
pages: old.pages.map((page, index) => { }
if (index === old.pages.length - 1) { return page;
return { }),
...page, };
items: [...page.items, pageData], },
}; );
} });
return page;
}),
};
},
);
// Update new parent's hasChildren flag // Update new parent's hasChildren flag
if (newParentId !== null) { if (newParentId !== null) {