fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: only tanstack usage in optimistic updates

Browse Source
This commit is contained in:
AlexSserb
2025-08-29 23:39:51 +04:00
parent 8b06d08664
commit 568bd4ad36
19 changed files with 218 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/deals/components/desktop/DealsTable/DealsTable.tsx
View File

@ -59,7 +59,7 @@ const DealsTable = () => {
} as MRT_TableOptions<DealSchema>
}
/>
{paginationInfo.totalPages > 1 && (
{paginationInfo && paginationInfo.totalPages > 1 && (
<Group justify={"flex-end"}>
<Pagination
withEdges

6
src/app/deals/contexts/BoardsContext.tsx
View File

@ -9,7 +9,7 @@ import makeContext from "@/lib/contextFactory/contextFactory";
type BoardsContextState = {
boards: BoardSchema[];
setBoards: React.Dispatch<React.SetStateAction<BoardSchema[]>>;
setBoards: (boards: BoardSchema[]) => void;
selectedBoard: BoardSchema | null;
setSelectedBoardId: React.Dispatch<React.SetStateAction<number | null>>;
refetchBoards: () => void;
@ -22,6 +22,7 @@ const useBoardsContextState = (): BoardsContextState => {
boards,
setBoards,
refetch: refetchBoards,
queryKey,
} = useBoardsList({ projectId: project?.id });
const [selectedBoardId, setSelectedBoardId] = useState<number | null>(null);
@ -34,8 +35,7 @@ const useBoardsContextState = (): BoardsContextState => {
const boardsCrud = useBoardsCrud({
boards,
setBoards,
refetchBoards,
queryKey,
projectId: project?.id,
});

4
src/app/deals/contexts/DealsContext.tsx
View File

@ -9,10 +9,10 @@ import makeContext from "@/lib/contextFactory/contextFactory";
type DealsContextState = {
deals: DealSchema[];
setDeals: React.Dispatch<React.SetStateAction<DealSchema[]>>;
setDeals: (deals: DealSchema[]) => void;
refetchDeals: () => void;
dealsCrud: DealsCrud;
paginationInfo: PaginationInfoSchema;
paginationInfo?: PaginationInfoSchema;
page: number;
setPage: React.Dispatch<React.SetStateAction<number>>;
};

14
src/app/deals/contexts/ProjectsContext.tsx
View File

@ -9,17 +9,13 @@ import makeContext from "@/lib/contextFactory/contextFactory";
type ProjectsContextState = {
selectedProject: ProjectSchema | null;
setSelectedProjectId: React.Dispatch<React.SetStateAction<number | null>>;
refetchProjects: () => Promise<void>;
refetchProjects: () => void;
projects: ProjectSchema[];
projectsCrud: ProjectsCrud;
};
const useProjectsContextState = (): ProjectsContextState => {
const {
projects,
setProjects,
refetch: refetchProjects,
} = useProjectsList();
const { projects, refetch: refetchProjects, queryKey } = useProjectsList();
const [selectedProjectId, setSelectedProjectId] = useState<number | null>(
null
@ -31,11 +27,7 @@ const useProjectsContextState = (): ProjectsContextState => {
setSelectedProjectId(projects[0].id);
}
const projectsCrud = useProjectsCrud({
projects,
setProjects,
refetchProjects,
});
const projectsCrud = useProjectsCrud({ queryKey });
return {
projects,

7
src/app/deals/contexts/StatusesContext.tsx
View File

@ -1,6 +1,5 @@
"use client";
import React from "react";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { StatusesCrud, useStatusesCrud } from "@/hooks/cruds/useStatusesCrud";
import useStatusesList from "@/hooks/lists/useStatusesList";
@ -9,7 +8,7 @@ import makeContext from "@/lib/contextFactory/contextFactory";
type StatusesContextState = {
statuses: StatusSchema[];
setStatuses: React.Dispatch<React.SetStateAction<StatusSchema[]>>;
setStatuses: (statuses: StatusSchema[]) => void;
refetchStatuses: () => void;
statusesCrud: StatusesCrud;
};
@ -20,14 +19,14 @@ const useStatusesContextState = (): StatusesContextState => {
statuses,
setStatuses,
refetch: refetchStatuses,
queryKey,
} = useStatusesList({
boardId: selectedBoard?.id,
});
const statusesCrud = useStatusesCrud({
statuses,
setStatuses,
refetchStatuses,
queryKey,
boardId: selectedBoard?.id,
});

7
src/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext.tsx
View File

@ -1,6 +1,5 @@
"use client";
import React from "react";
import { StatusesCrud, useStatusesCrud } from "@/hooks/cruds/useStatusesCrud";
import useStatusesList from "@/hooks/lists/useStatusesList";
import { BoardSchema, StatusSchema } from "@/lib/client";
@ -9,7 +8,7 @@ import makeContext from "@/lib/contextFactory/contextFactory";
type BoardStatusesContextState = {
board: BoardSchema;
statuses: StatusSchema[];
setStatuses: React.Dispatch<React.SetStateAction<StatusSchema[]>>;
setStatuses: (statuses: StatusSchema[]) => void;
refetchStatuses: () => void;
statusesCrud: StatusesCrud;
};
@ -25,15 +24,15 @@ const useBoardStatusesContextState = ({
statuses,
setStatuses,
refetch: refetchStatuses,
queryKey,
} = useStatusesList({
boardId: board.id,
});
const statusesCrud = useStatusesCrud({
statuses,
setStatuses,
refetchStatuses,
boardId: board.id,
queryKey,
});
return {

7
src/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext.tsx
View File

@ -1,6 +1,5 @@
"use client";
import React from "react";
import { BoardsCrud, useBoardsCrud } from "@/hooks/cruds/useBoardsCrud";
import useBoardsList from "@/hooks/lists/useBoardsList";
import { BoardSchema, ProjectSchema } from "@/lib/client";
@ -8,7 +7,7 @@ import makeContext from "@/lib/contextFactory/contextFactory";
type ProjectBoardsContextState = {
boards: BoardSchema[];
setBoards: React.Dispatch<React.SetStateAction<BoardSchema[]>>;
setBoards: (boards: BoardSchema[]) => void;
project: ProjectSchema;
refetchBoards: () => void;
boardsCrud: BoardsCrud;
@ -23,12 +22,12 @@ const useProjectBoardsContextState = ({ project }: Props) => {
boards,
setBoards,
refetch: refetchBoards,
queryKey,
} = useBoardsList({ projectId: project?.id });
const boardsCrud = useBoardsCrud({
boards,
setBoards,
refetchBoards,
queryKey,
projectId: project?.id,
});

4
src/app/deals/hooks/useDealsAndStatusesDnd.ts
View File

@ -112,7 +112,7 @@ const useDealsAndStatusesDnd = (): ReturnType => {
);
if (!overStatusId) return;
debouncedSetDeals(deals =>
debouncedSetDeals(
deals.map(deal =>
deal.id === activeDealId
? {
@ -142,7 +142,7 @@ const useDealsAndStatusesDnd = (): ReturnType => {
const newRank = getNewStatusRank(activeStatusId, overStatusId);
if (!newRank) return;
debouncedSetStatuses(statuses =>
debouncedSetStatuses(
statuses.map(status =>
status.id === activeStatusId
? { ...status, lexorank: newRank }

91
src/hooks/cruds/baseCrud/useCrudOperations.tsx
View File

@ -1,5 +1,9 @@
import React from "react";
import { useMutation, UseMutationOptions } from "@tanstack/react-query";
import {
useMutation,
UseMutationOptions,
useQueryClient,
} from "@tanstack/react-query";
import { AxiosError } from "axios";
import { Text } from "@mantine/core";
import { modals } from "@mantine/modals";
@ -20,9 +24,8 @@ type CrudOperations<TEntity, TUpdate> = {
};
type UseEntityOperationsProps<TEntity extends BaseEntity, TUpdate, TCreate> = {
entities: TEntity[];
setEntities: React.Dispatch<React.SetStateAction<TEntity[]>>;
refetch: () => void;
key: string;
queryKey: any[];
mutations: {
create: UseMutationOptions<
any,
@ -50,9 +53,8 @@ const useCrudOperations = <
TUpdate extends object,
TCreate extends object,
>({
entities,
setEntities,
refetch,
key,
queryKey,
mutations,
getCreateEntity,
getUpdateEntity,
@ -61,30 +63,81 @@ const useCrudOperations = <
TEntity,
TUpdate
> => {
const onError = (error: AxiosError<HttpValidationError>) => {
const queryClient = useQueryClient();
const onError = (
error: AxiosError<HttpValidationError>,
_: any,
context: any
) => {
console.error(error);
notifications.error({
message: error.response?.data?.detail as string | undefined,
});
refetch();
if (context?.previous) {
queryClient.setQueryData(queryKey, context.previous);
}
};
const onSettled = () => queryClient.invalidateQueries({ queryKey });
const createMutation = useMutation({
...mutations.create,
onError,
onSuccess: (res: { entity: TEntity }) => {
setEntities([...entities, res.entity]);
},
onSettled,
});
const updateMutation = useMutation({
...mutations.update,
onError,
onSettled,
onMutate: async ({ body: { entity: update } }) => {
await queryClient.cancelQueries({ queryKey: [key] });
const previous = queryClient.getQueryData(queryKey);
queryClient.setQueryData(queryKey, (old: { items: TEntity[] }) => {
let updated = old.items.map((entity: TEntity) =>
entity.id === update.id
? getUpdateEntity(entity, update)
: entity
);
if ("lexorank" in update) {
updated = sortByLexorank(
updated as (TEntity & { lexorank: string })[]
);
}
return {
...old,
items: updated,
};
});
return { previous };
},
});
const deleteMutation = useMutation({
...mutations.delete,
onError,
onSettled,
onMutate: async ({ path: { pk } }) => {
await queryClient.cancelQueries({ queryKey: [key] });
const previous = queryClient.getQueryData(queryKey);
queryClient.setQueryData(queryKey, (old: { items: TEntity[] }) => {
const filtered = old.items.filter(e => e.id !== pk);
return {
...old,
items: filtered,
};
});
return { previous };
},
});
const onCreate = (name: string) => {
@ -99,7 +152,7 @@ const useCrudOperations = <
});
};
const onUpdate = (id: number, update: TUpdate) => {
const onUpdate = async (id: number, update: TUpdate) => {
updateMutation.mutate({
body: {
entity: update,
@ -107,17 +160,6 @@ const useCrudOperations = <
path: { pk: id },
query: undefined,
});
setEntities(prev => {
const updated = prev.map(entity =>
entity.id === id ? getUpdateEntity(entity, update) : entity
);
if ("lexorank" in update) {
return sortByLexorank(
updated as (TEntity & { lexorank: string })[]
);
}
return updated;
});
};
const onDelete = (entity: TEntity, onSuccess?: () => void) => {
@ -131,7 +173,6 @@ const useCrudOperations = <
onConfirm: () => {
deleteMutation.mutate({ path: { pk: entity.id } } as any);
onSuccess && onSuccess();
setEntities(prev => prev.filter(e => e.id !== entity.id));
},
});
};

12
src/hooks/cruds/useBoardsCrud.tsx
View File

@ -1,4 +1,3 @@
import React from "react";
import { LexoRank } from "lexorank";
import { useCrudOperations } from "@/hooks/cruds/baseCrud";
import {
@ -15,9 +14,8 @@ import { getMaxByLexorank, getNewLexorank } from "@/utils/lexorank";
type UseBoardsOperationsProps = {
boards: BoardSchema[];
setBoards: React.Dispatch<React.SetStateAction<BoardSchema[]>>;
refetchBoards: () => void;
projectId?: number;
queryKey: any[];
};
export type BoardsCrud = {
@ -28,15 +26,13 @@ export type BoardsCrud = {
export const useBoardsCrud = ({
boards,
setBoards,
refetchBoards,
projectId,
queryKey,
}: UseBoardsOperationsProps): BoardsCrud => {
return useCrudOperations<BoardSchema, UpdateBoardSchema, CreateBoardSchema>(
{
entities: boards,
setEntities: setBoards,
refetch: refetchBoards,
key: "getBoards",
queryKey,
mutations: {
create: createBoardMutation(),
update: updateBoardMutation(),

12
src/hooks/cruds/useDealsCrud.tsx
View File

@ -1,4 +1,3 @@
import React from "react";
import { LexoRank } from "lexorank";
import { useCrudOperations } from "@/hooks/cruds/baseCrud";
import {
@ -16,10 +15,9 @@ import { getNewLexorank } from "@/utils/lexorank";
type UseDealsOperationsProps = {
deals: DealSchema[];
setDeals: React.Dispatch<React.SetStateAction<DealSchema[]>>;
refetchDeals: () => void;
boardId?: number;
statuses: StatusSchema[];
queryKey: any[];
};
export type DealsCrud = {
@ -30,15 +28,13 @@ export type DealsCrud = {
export const useDealsCrud = ({
deals,
setDeals,
refetchDeals,
boardId,
statuses,
queryKey,
}: UseDealsOperationsProps): DealsCrud => {
return useCrudOperations<DealSchema, UpdateDealSchema, CreateDealSchema>({
entities: deals,
setEntities: setDeals,
refetch: refetchDeals,
key: "getDeals",
queryKey,
mutations: {
create: createDealMutation(),
update: updateDealMutation(),

16
src/hooks/cruds/useProjectsCrud.tsx
View File

@ -1,4 +1,3 @@
import React from "react";
import { useCrudOperations } from "@/hooks/cruds/baseCrud";
import {
CreateProjectSchema,
@ -12,9 +11,7 @@ import {
} from "@/lib/client/@tanstack/react-query.gen";
type Props = {
projects: ProjectSchema[];
setProjects: React.Dispatch<React.SetStateAction<ProjectSchema[]>>;
refetchProjects: () => void;
queryKey: any[];
};
export type ProjectsCrud = {
@ -23,19 +20,14 @@ export type ProjectsCrud = {
onDelete: (project: ProjectSchema) => void;
};
export const useProjectsCrud = ({
projects,
setProjects,
refetchProjects,
}: Props): ProjectsCrud => {
export const useProjectsCrud = ({ queryKey }: Props): ProjectsCrud => {
return useCrudOperations<
ProjectSchema,
UpdateProjectSchema,
CreateProjectSchema
>({
entities: projects,
setEntities: setProjects,
refetch: refetchProjects,
key: "getProjects",
queryKey,
mutations: {
create: createProjectMutation(),
update: updateProjectMutation(),

12
src/hooks/cruds/useStatusesCrud.tsx
View File

@ -1,4 +1,3 @@
import React from "react";
import { LexoRank } from "lexorank";
import { useCrudOperations } from "@/hooks/cruds/baseCrud";
import {
@ -15,9 +14,8 @@ import { getMaxByLexorank, getNewLexorank } from "@/utils/lexorank";
type Props = {
statuses: StatusSchema[];
setStatuses: React.Dispatch<React.SetStateAction<StatusSchema[]>>;
refetchStatuses: () => void;
boardId?: number;
queryKey: any[];
};
export type StatusesCrud = {
@ -28,18 +26,16 @@ export type StatusesCrud = {
export const useStatusesCrud = ({
statuses,
setStatuses,
refetchStatuses,
boardId,
queryKey,
}: Props): StatusesCrud => {
return useCrudOperations<
StatusSchema,
UpdateStatusSchema,
CreateStatusSchema
>({
entities: statuses,
setEntities: setStatuses,
refetch: refetchStatuses,
key: "getStatuses",
queryKey,
mutations: {
create: createStatusMutation(),
update: updateStatusMutation(),

43
src/hooks/lists/useBoardsList.ts
View File

@ -1,7 +1,9 @@
import { useEffect, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { BoardSchema } from "@/lib/client";
import { getBoardsOptions } from "@/lib/client/@tanstack/react-query.gen";
import {
getBoardsOptions,
getBoardsQueryKey,
} from "@/lib/client/@tanstack/react-query.gen";
type Props = {
projectId?: number;
@ -9,26 +11,29 @@ type Props = {
const useBoardsList = ({ projectId }: Props) => {
const queryClient = useQueryClient();
const options = {
path: { projectId: projectId ?? 0 },
};
const { data, refetch } = useQuery({
...getBoardsOptions(options),
enabled: !!projectId,
});
const [boards, setBoards] = useState<BoardSchema[]>([]);
const queryKey = getBoardsQueryKey(options);
const fetchBoards = () => {
if (!projectId) return;
queryClient
.fetchQuery({
...getBoardsOptions({ path: { projectId } }),
})
.then(data => {
setBoards(data.boards);
})
.catch(err => console.error(err));
const setBoards = (boards: BoardSchema[]) => {
queryClient.setQueryData(queryKey, (old: { items: BoardSchema[] }) => ({
...old,
items: boards,
}));
};
useEffect(() => {
fetchBoards();
}, [projectId]);
return { boards, setBoards, refetch: fetchBoards };
return {
boards: data?.items ?? [],
setBoards,
refetch,
queryKey,
};
};
export default useBoardsList;

58
src/hooks/lists/useDealsList.ts
View File

@ -1,7 +1,10 @@
import { useEffect, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { DealSchema, PaginationInfoSchema } from "@/lib/client";
import { getDealsOptions } from "@/lib/client/@tanstack/react-query.gen";
import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { DealSchema } from "@/lib/client";
import {
getDealsOptions,
getDealsQueryKey,
} from "@/lib/client/@tanstack/react-query.gen";
type Props = {
boardId?: number | null;
@ -14,47 +17,40 @@ const useDealsList = ({
projectId = null,
boardId = null,
}: Props) => {
const [deals, setDeals] = useState<DealSchema[]>([]);
const [page, setPage] = useState(1);
const [paginationInfo, setPaginationInfo] = useState<PaginationInfoSchema>({
totalPages: 1,
totalItems: 1,
});
const itemsPerPage = 10;
const queryClient = useQueryClient();
const [page, setPage] = useState(1);
const itemsPerPage = 10;
const refetchDeals = () => {
if (!boardId && !projectId) return;
queryClient
.fetchQuery({
...getDealsOptions({
const options = {
query: {
boardId: boardId ?? null,
projectId: projectId ?? null,
page: withPagination ? page : null,
itemsPerPage: withPagination ? itemsPerPage : null,
},
}),
})
.then(data => {
setDeals(data.deals);
setPaginationInfo(data.paginationInfo);
})
.catch(err => console.error(err));
};
const { data, refetch } = useQuery({
...getDealsOptions(options),
enabled: !!boardId || !!projectId,
});
const queryKey = getDealsQueryKey(options);
const setDeals = (deals: DealSchema[]) => {
queryClient.setQueryData(queryKey, (old: { items: DealSchema[] }) => ({
...old,
items: deals,
}));
};
useEffect(() => {
refetchDeals();
}, [boardId, withPagination, projectId, page]);
return {
deals,
deals: data?.items ?? [],
setDeals,
refetchDeals,
refetchDeals: refetch,
page,
setPage,
paginationInfo,
paginationInfo: data?.paginationInfo,
queryKey,
};
};

41
src/hooks/lists/useProjectsList.ts
View File

@ -1,29 +1,34 @@
import { useEffect, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { ProjectSchema } from "@/lib/client";
import { getProjectsOptions } from "@/lib/client/@tanstack/react-query.gen";
import {
getProjectsOptions,
getProjectsQueryKey,
} from "@/lib/client/@tanstack/react-query.gen";
const useProjectsList = () => {
const queryClient = useQueryClient();
const [projects, setProjects] = useState<ProjectSchema[]>([]);
const fetchProjects = async () => {
return queryClient
.fetchQuery({
const { data, refetch } = useQuery({
...getProjectsOptions(),
});
const queryKey = getProjectsQueryKey();
const setProjects = (statuses: ProjectSchema[]) => {
queryClient.setQueryData(
queryKey,
(old: { items: ProjectSchema[] }) => ({
...old,
items: statuses,
})
.then(data => {
setProjects(data.projects);
})
.catch(err => console.error(err));
);
};
useEffect(() => {
fetchProjects();
}, []);
return { projects, setProjects, refetch: fetchProjects };
return {
projects: data?.items ?? [],
setProjects,
refetch,
queryKey,
};
};
export default useProjectsList;

48
src/hooks/lists/useStatusesList.ts
View File

@ -1,7 +1,9 @@
import { useEffect, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { StatusSchema } from "@/lib/client";
import { getStatusesOptions } from "@/lib/client/@tanstack/react-query.gen";
import {
getStatusesOptions,
getStatusesQueryKey,
} from "@/lib/client/@tanstack/react-query.gen";
type Props = {
boardId?: number;
@ -9,30 +11,32 @@ type Props = {
const useStatusesList = ({ boardId }: Props) => {
const queryClient = useQueryClient();
const options = {
path: { boardId: boardId ?? 0 },
};
const { data, refetch } = useQuery({
...getStatusesOptions(options),
enabled: !!boardId,
});
const [statuses, setStatuses] = useState<StatusSchema[]>([]);
const queryKey = getStatusesQueryKey(options);
const fetchStatuses = () => {
if (!boardId) {
setStatuses([]);
return;
}
queryClient
.fetchQuery({
...getStatusesOptions({ path: { boardId } }),
const setStatuses = (statuses: StatusSchema[]) => {
queryClient.setQueryData(
queryKey,
(old: { items: StatusSchema[] }) => ({
...old,
items: statuses,
})
.then(data => {
setStatuses(data.statuses);
})
.catch(err => console.error(err));
);
};
useEffect(() => {
fetchStatuses();
}, [boardId]);
return { statuses, setStatuses, refetch: fetchStatuses };
return {
statuses: data?.items ?? [],
setStatuses,
refetch,
queryKey,
};
};
export default useStatusesList;

16
src/lib/client/types.gen.ts
View File

@ -229,9 +229,9 @@ export type DeleteStatusResponse = {
*/
export type GetBoardsResponse = {
/**
* Boards
* Items
*/
boards: Array<BoardSchema>;
items: Array<BoardSchema>;
};
/**
@ -239,9 +239,9 @@ export type GetBoardsResponse = {
*/
export type GetDealsResponse = {
/**
* Deals
* Items
*/
deals: Array<DealSchema>;
items: Array<DealSchema>;
paginationInfo: PaginationInfoSchema;
};
@ -250,9 +250,9 @@ export type GetDealsResponse = {
*/
export type GetProjectsResponse = {
/**
* Projects
* Items
*/
projects: Array<ProjectSchema>;
items: Array<ProjectSchema>;
};
/**
@ -260,9 +260,9 @@ export type GetProjectsResponse = {
*/
export type GetStatusesResponse = {
/**
* Statuses
* Items
*/
statuses: Array<StatusSchema>;
items: Array<StatusSchema>;
};
/**

8
src/lib/client/zod.gen.ts
View File

@ -168,7 +168,7 @@ export const zDeleteStatusResponse = z.object({
* GetBoardsResponse
*/
export const zGetBoardsResponse = z.object({
boards: z.array(zBoardSchema),
items: z.array(zBoardSchema),
});
/**
@ -183,7 +183,7 @@ export const zPaginationInfoSchema = z.object({
* GetDealsResponse
*/
export const zGetDealsResponse = z.object({
deals: z.array(zDealSchema),
items: z.array(zDealSchema),
paginationInfo: zPaginationInfoSchema,
});
@ -191,14 +191,14 @@ export const zGetDealsResponse = z.object({
* GetProjectsResponse
*/
export const zGetProjectsResponse = z.object({
projects: z.array(zProjectSchema),
items: z.array(zProjectSchema),
});
/**
* GetStatusesResponse
*/
export const zGetStatusesResponse = z.object({
statuses: z.array(zStatusSchema),
items: z.array(zStatusSchema),
});
/**