sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-20 00:14:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: UI pagination and members search (#724)

Browse Source 
* feat: pagination (UI)

* Fixes

* feat: add search to member list page

* responsiveness
This commit is contained in:
Philip Okugbe
2025-02-13 23:28:00 +00:00
committed by GitHub
parent ae842f94d0
commit 0ef6b1978a
19 changed files with 605 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/space/queries/space-query.ts
+48 -44
View File
@@ -1,16 +1,17 @@
import {
keepPreviousData,
useMutation,
useQuery,
useQueryClient,
UseQueryResult,
} from '@tanstack/react-query';
} from "@tanstack/react-query";
import {
IAddSpaceMember,
IChangeSpaceMemberRole,
IRemoveSpaceMember,
ISpace,
ISpaceMember,
} from '@/features/space/types/space.types';
} from "@/features/space/types/space.types";
import {
addSpaceMember,
changeMemberRole,
@@ -21,22 +22,23 @@ import {
createSpace,
updateSpace,
deleteSpace,
} from '@/features/space/services/space-service.ts';
import { notifications } from '@mantine/notifications';
import { IPagination, QueryParams } from '@/lib/types.ts';
} from "@/features/space/services/space-service.ts";
import { notifications } from "@mantine/notifications";
import { IPagination, QueryParams } from "@/lib/types.ts";
export function useGetSpacesQuery(
params?: QueryParams
params?: QueryParams,
): UseQueryResult<IPagination<ISpace>, Error> {
return useQuery({
queryKey: ['spaces', params],
queryKey: ["spaces", params],
queryFn: () => getSpaces(params),
placeholderData: keepPreviousData,
});
}
export function useSpaceQuery(spaceId: string): UseQueryResult<ISpace, Error> {
return useQuery({
queryKey: ['space', spaceId],
queryKey: ["space", spaceId],
queryFn: () => getSpaceById(spaceId),
enabled: !!spaceId,
staleTime: 5 * 60 * 1000,
@@ -50,22 +52,22 @@ export function useCreateSpaceMutation() {
mutationFn: (data) => createSpace(data),
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ['spaces'],
queryKey: ["spaces"],
});
notifications.show({ message: 'Space created successfully' });
notifications.show({ message: "Space created successfully" });
},
onError: (error) => {
const errorMessage = error['response']?.data?.message;
notifications.show({ message: errorMessage, color: 'red' });
const errorMessage = error["response"]?.data?.message;
notifications.show({ message: errorMessage, color: "red" });
},
});
}
export function useGetSpaceBySlugQuery(
spaceId: string
spaceId: string,
): UseQueryResult<ISpace, Error> {
return useQuery({
queryKey: ['space', spaceId],
queryKey: ["space", spaceId],
queryFn: () => getSpaceById(spaceId),
enabled: !!spaceId,
staleTime: 5 * 60 * 1000,
@@ -78,25 +80,25 @@ export function useUpdateSpaceMutation() {
return useMutation<ISpace, Error, Partial<ISpace>>({
mutationFn: (data) => updateSpace(data),
onSuccess: (data, variables) => {
notifications.show({ message: 'Space updated successfully' });
notifications.show({ message: "Space updated successfully" });
const space = queryClient.getQueryData([
'space',
"space",
variables.spaceId,
]) as ISpace;
if (space) {
const updatedSpace = { ...space, ...data };
queryClient.setQueryData(['space', variables.spaceId], updatedSpace);
queryClient.setQueryData(['space', data.slug], updatedSpace);
queryClient.setQueryData(["space", variables.spaceId], updatedSpace);
queryClient.setQueryData(["space", data.slug], updatedSpace);
}
queryClient.invalidateQueries({
queryKey: ['spaces'],
queryKey: ["spaces"],
});
},
onError: (error) => {
const errorMessage = error['response']?.data?.message;
notifications.show({ message: errorMessage, color: 'red' });
const errorMessage = error["response"]?.data?.message;
notifications.show({ message: errorMessage, color: "red" });
},
});
}
@@ -107,37 +109,39 @@ export function useDeleteSpaceMutation() {
return useMutation({
mutationFn: (data: Partial<ISpace>) => deleteSpace(data.id),
onSuccess: (data, variables) => {
notifications.show({ message: 'Space deleted successfully' });
notifications.show({ message: "Space deleted successfully" });
if (variables.slug) {
queryClient.removeQueries({
queryKey: ['space', variables.slug],
queryKey: ["space", variables.slug],
exact: true,
});
}
const spaces = queryClient.getQueryData(['spaces']) as any;
const spaces = queryClient.getQueryData(["spaces"]) as any;
if (spaces) {
spaces.items = spaces.items?.filter(
(space: ISpace) => space.id !== variables.id
(space: ISpace) => space.id !== variables.id,
);
queryClient.setQueryData(['spaces'], spaces);
queryClient.setQueryData(["spaces"], spaces);
}
},
onError: (error) => {
const errorMessage = error['response']?.data?.message;
notifications.show({ message: errorMessage, color: 'red' });
const errorMessage = error["response"]?.data?.message;
notifications.show({ message: errorMessage, color: "red" });
},
});
}
export function useSpaceMembersQuery(
spaceId: string
spaceId: string,
params?: QueryParams,
): UseQueryResult<IPagination<ISpaceMember>, Error> {
return useQuery({
queryKey: ['spaceMembers', spaceId],
queryFn: () => getSpaceMembers(spaceId),
queryKey: ["spaceMembers", spaceId, params],
queryFn: () => getSpaceMembers(spaceId, params),
enabled: !!spaceId,
placeholderData: keepPreviousData,
});
}
@@ -147,14 +151,14 @@ export function useAddSpaceMemberMutation() {
return useMutation<void, Error, IAddSpaceMember>({
mutationFn: (data) => addSpaceMember(data),
onSuccess: (data, variables) => {
notifications.show({ message: 'Members added successfully' });
notifications.show({ message: "Members added successfully" });
queryClient.invalidateQueries({
queryKey: ['spaceMembers', variables.spaceId],
queryKey: ["spaceMembers", variables.spaceId],
});
},
onError: (error) => {
const errorMessage = error['response']?.data?.message;
notifications.show({ message: errorMessage, color: 'red' });
const errorMessage = error["response"]?.data?.message;
notifications.show({ message: errorMessage, color: "red" });
},
});
}
@@ -165,14 +169,14 @@ export function useRemoveSpaceMemberMutation() {
return useMutation<void, Error, IRemoveSpaceMember>({
mutationFn: (data) => removeSpaceMember(data),
onSuccess: (data, variables) => {
notifications.show({ message: 'Removed successfully' });
queryClient.refetchQueries({
queryKey: ['spaceMembers', variables.spaceId],
notifications.show({ message: "Removed successfully" });
queryClient.invalidateQueries({
queryKey: ["spaceMembers", variables.spaceId],
});
},
onError: (error) => {
const errorMessage = error['response']?.data?.message;
notifications.show({ message: errorMessage, color: 'red' });
const errorMessage = error["response"]?.data?.message;
notifications.show({ message: errorMessage, color: "red" });
},
});
}
@@ -183,15 +187,15 @@ export function useChangeSpaceMemberRoleMutation() {
return useMutation<void, Error, IChangeSpaceMemberRole>({
mutationFn: (data) => changeMemberRole(data),
onSuccess: (data, variables) => {
notifications.show({ message: 'Member role updated successfully' });
notifications.show({ message: "Member role updated successfully" });
// due to pagination levels, change in cache instead
queryClient.refetchQueries({
queryKey: ['spaceMembers', variables.spaceId],
queryKey: ["spaceMembers", variables.spaceId],
});
},
onError: (error) => {
const errorMessage = error['response']?.data?.message;
notifications.show({ message: errorMessage, color: 'red' });
const errorMessage = error["response"]?.data?.message;
notifications.show({ message: errorMessage, color: "red" });
},
});
}