Skip to content

Commit 7a3ad9d

Browse files
BohdanUlichBohdanUlich
committed
Upgrade react-query and add SSR
1 parent b7dc1ad commit 7a3ad9d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+3891
-704
lines changed

‎hooks/categories/index.ts ‎api/categories/index.ts

File renamed without changes.

‎hooks/categories/useCreateCategory.ts ‎api/categories/useCreateCategory.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { fetchService } from "@/services";
22
import { ApiResponse, CATEGORIES_API_ENDPOINT, Category } from "@/types";
33
import { useSnackbar } from "notistack";
4-
import { useMutation, useQueryClient } from "react-query";
4+
import { useMutation, useQueryClient } from "@tanstack/react-query";
55

66
export const useCreateCategory = () => {
77
const { enqueueSnackbar } = useSnackbar();
88
const queryClient = useQueryClient();
99

10-
const { mutateAsync: createCategory, isLoading } = useMutation(
11-
async (newCategory: Omit<Category, "id">) => {
10+
const { mutateAsync: createCategory, isPending } = useMutation({
11+
mutationFn: async (newCategory: Omit<Category, "id">) => {
1212
const response: ApiResponse<Category> = await fetchService(
1313
CATEGORIES_API_ENDPOINT,
1414
{
@@ -24,21 +24,21 @@ export const useCreateCategory = () => {
2424
throw new Error(response.error);
2525
}
2626

27-
await queryClient.invalidateQueries(CATEGORIES_API_ENDPOINT);
27+
await queryClient.invalidateQueries({
28+
queryKey: [CATEGORIES_API_ENDPOINT],
29+
});
2830

2931
return response.data;
3032
},
31-
{
32-
onSuccess: () => {
33-
enqueueSnackbar("Category created successfully", {
34-
variant: "success",
35-
});
36-
},
37-
onError: (error: Error) => {
38-
enqueueSnackbar(error.message, { variant: "error" });
39-
},
40-
}
41-
);
33+
onSuccess: () => {
34+
enqueueSnackbar("Category created successfully", {
35+
variant: "success",
36+
});
37+
},
38+
onError: (error: Error) => {
39+
enqueueSnackbar(error.message, { variant: "error" });
40+
},
41+
});
4242

43-
return { createCategory, isLoading };
43+
return { createCategory, isPending };
4444
};

‎api/categories/useDeleteCategory.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { fetchService } from "@/services";
2+
import { ApiResponse, CATEGORIES_API_ENDPOINT } from "@/types";
3+
import { useSnackbar } from "notistack";
4+
import { useMutation, useQueryClient } from "@tanstack/react-query";
5+
6+
export const useDeleteCategory = () => {
7+
const { enqueueSnackbar } = useSnackbar();
8+
const queryClient = useQueryClient();
9+
10+
const { mutateAsync: deleteCategory, isPending } = useMutation({
11+
mutationFn: async (categoryId: string) => {
12+
const response: ApiResponse<{}> = await fetchService(
13+
`${CATEGORIES_API_ENDPOINT}/${categoryId}`,
14+
{
15+
method: "DELETE",
16+
}
17+
);
18+
19+
if (!response.success) {
20+
throw new Error(response.error);
21+
}
22+
23+
await queryClient.invalidateQueries({
24+
queryKey: [CATEGORIES_API_ENDPOINT],
25+
});
26+
},
27+
onSuccess: () => {
28+
enqueueSnackbar("Category deleted successfully", {
29+
variant: "success",
30+
});
31+
},
32+
onError: (error: Error) => {
33+
enqueueSnackbar(error.message, { variant: "error" });
34+
},
35+
});
36+
37+
return { deleteCategory, isPending };
38+
};

‎hooks/categories/useGetCategories.ts ‎api/categories/useGetCategories.ts

+9-20
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import { fetchService } from "@/services";
22
import { ApiResponse, CATEGORIES_API_ENDPOINT, Category } from "@/types";
3-
import { useQuery } from "react-query";
4-
import { useSnackbar } from "notistack";
5-
import { useGetUser } from "../useGetUser";
3+
import { useQuery } from "@tanstack/react-query";
4+
import { useGetUser } from "../../hooks/useGetUser";
65
import { useSearchParams } from "next/navigation";
76

8-
const fetchCategories = async ({
7+
export const fetchCategories = async ({
98
userId,
109
q,
1110
}: {
1211
userId: string;
13-
q: string | null;
12+
q?: string | null;
1413
}): Promise<Category[]> => {
1514
let url = `${CATEGORIES_API_ENDPOINT}?userId=${userId}`;
1615
if (q) {
@@ -30,22 +29,12 @@ const fetchCategories = async ({
3029

3130
export const useGetCategories = () => {
3231
const { userId } = useGetUser();
33-
const { enqueueSnackbar } = useSnackbar();
3432
const searchParams = useSearchParams();
3533
const q = searchParams.get("q");
3634

37-
return useQuery(
38-
[CATEGORIES_API_ENDPOINT, userId, q],
39-
() => fetchCategories({ userId, q }),
40-
{
41-
enabled: !!userId,
42-
retry: 2,
43-
staleTime: 600000,
44-
onError: (error) =>
45-
enqueueSnackbar(`${error}`, {
46-
variant: "error",
47-
preventDuplicate: true,
48-
}),
49-
}
50-
);
35+
return useQuery({
36+
queryKey: [CATEGORIES_API_ENDPOINT, userId, q],
37+
queryFn: () => fetchCategories({ userId, q }),
38+
enabled: !!userId,
39+
});
5140
};

‎hooks/categories/useUpdateCategory.ts ‎api/categories/useUpdateCategory.ts

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { fetchService } from "@/services";
22
import { ApiResponse, CATEGORIES_API_ENDPOINT, Category } from "@/types";
33
import { useSnackbar } from "notistack";
4-
import { useMutation, useQueryClient } from "react-query";
4+
import { useMutation, useQueryClient } from "@tanstack/react-query";
55

66
interface UseUpdateCategoryProps {
77
hideSuccessMessage?: boolean;
@@ -13,8 +13,8 @@ export const useUpdateCategory = ({
1313
const { enqueueSnackbar } = useSnackbar();
1414
const queryClient = useQueryClient();
1515

16-
const { mutateAsync: updateCategory, isLoading } = useMutation(
17-
async (category: Category) => {
16+
const { mutateAsync: updateCategory, isPending } = useMutation({
17+
mutationFn: async (category: Category) => {
1818
const response: ApiResponse<Category> = await fetchService(
1919
`${CATEGORIES_API_ENDPOINT}/${category.id}`,
2020
{
@@ -30,23 +30,23 @@ export const useUpdateCategory = ({
3030
throw new Error(response.error);
3131
}
3232

33-
await queryClient.invalidateQueries(CATEGORIES_API_ENDPOINT);
33+
await queryClient.invalidateQueries({
34+
queryKey: [CATEGORIES_API_ENDPOINT],
35+
});
3436

3537
return response.data;
3638
},
37-
{
38-
onSuccess: () => {
39-
if (!hideSuccessMessage) {
40-
enqueueSnackbar("Category updated successfully", {
41-
variant: "success",
42-
});
43-
}
44-
},
45-
onError: (error: Error) => {
46-
enqueueSnackbar(error.message, { variant: "error" });
47-
},
48-
}
49-
);
39+
onSuccess: () => {
40+
if (!hideSuccessMessage) {
41+
enqueueSnackbar("Category updated successfully", {
42+
variant: "success",
43+
});
44+
}
45+
},
46+
onError: (error: Error) => {
47+
enqueueSnackbar(error.message, { variant: "error" });
48+
},
49+
});
5050

51-
return { updateCategory, isLoading };
51+
return { updateCategory, isPending };
5252
};

‎api/codeItems/fetchCodeItems.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { fetchService } from "@/services";
2+
import { ApiResponse, CodeItem, CODEITEMS_API_ENDPOINT } from "@/types";
3+
4+
interface FetchCodeItemsParams {
5+
userId: string;
6+
q?: string | null;
7+
categoryId: any;
8+
}
9+
10+
export const fetchCodeItems = async ({
11+
userId,
12+
q,
13+
categoryId,
14+
}: FetchCodeItemsParams): Promise<CodeItem[]> => {
15+
let url = `${CODEITEMS_API_ENDPOINT}?userId=${userId}&categoryId=${categoryId}`;
16+
17+
if (q) {
18+
url += `&q=${q}`;
19+
}
20+
21+
const response: ApiResponse<CodeItem[]> = await fetchService(url, {
22+
method: "GET",
23+
});
24+
25+
if (!response.success) {
26+
throw new Error(response?.error);
27+
}
28+
29+
return response.data;
30+
};

‎api/codeItems/fetchOneCodeItem.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { fetchService } from "@/services";
2+
import { ApiResponse, CodeItem, CODEITEMS_API_ENDPOINT } from "@/types";
3+
4+
interface FetchOneCodeItemParams {
5+
codeItemId: string;
6+
userId: string;
7+
}
8+
9+
export const fetchOneCodeItem = async ({
10+
codeItemId,
11+
userId,
12+
}: FetchOneCodeItemParams): Promise<CodeItem> => {
13+
let url = `${CODEITEMS_API_ENDPOINT}/${codeItemId}?userId=${userId}`;
14+
15+
const response: ApiResponse<CodeItem> = await fetchService(url, {
16+
method: "GET",
17+
});
18+
19+
if (!response.success) {
20+
throw new Error(response?.error);
21+
}
22+
23+
return response.data;
24+
};

‎hooks/codeItems/index.ts ‎api/codeItems/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ export * from "./useGetCodeItems";
22
export * from "./useCreateCodeItem";
33
export * from "./useDeleteCodeItem";
44
export * from "./useUpdateCodeItem";
5-
export * from "./useGetOneCodeItem";
5+
export * from "./fetchCodeItems";
6+
export * from "./fetchOneCodeItem";

‎hooks/codeItems/useCreateCodeItem.ts ‎api/codeItems/useCreateCodeItem.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { fetchService } from "@/services";
22
import { ApiResponse, CODEITEMS_API_ENDPOINT, CodeItem } from "@/types";
33
import { useSnackbar } from "notistack";
4-
import { useMutation, useQueryClient } from "react-query";
4+
import { useMutation, useQueryClient } from "@tanstack/react-query";
55

66
export const useCreateCodeItem = () => {
77
const { enqueueSnackbar } = useSnackbar();
88
const queryClient = useQueryClient();
99

10-
const { mutateAsync: createCodeItem, isLoading } = useMutation(
11-
async (newCodeItem: Omit<CodeItem, "id">) => {
10+
const { mutateAsync: createCodeItem, isPending } = useMutation({
11+
mutationFn: async (newCodeItem: Omit<CodeItem, "id">) => {
1212
const response: ApiResponse<CodeItem> = await fetchService(
1313
CODEITEMS_API_ENDPOINT,
1414
{
@@ -24,21 +24,21 @@ export const useCreateCodeItem = () => {
2424
throw new Error(response.error);
2525
}
2626

27-
await queryClient.invalidateQueries(CODEITEMS_API_ENDPOINT);
27+
await queryClient.invalidateQueries({
28+
queryKey: [CODEITEMS_API_ENDPOINT],
29+
});
2830

2931
return response.data;
3032
},
31-
{
32-
onSuccess: () => {
33-
enqueueSnackbar("Category created successfully", {
34-
variant: "success",
35-
});
36-
},
37-
onError: (error: Error) => {
38-
enqueueSnackbar(error.message, { variant: "error" });
39-
},
40-
}
41-
);
33+
onSuccess: () => {
34+
enqueueSnackbar("Category created successfully", {
35+
variant: "success",
36+
});
37+
},
38+
onError: (error: Error) => {
39+
enqueueSnackbar(error.message, { variant: "error" });
40+
},
41+
});
4242

43-
return { createCodeItem, isLoading };
43+
return { createCodeItem, isPending };
4444
};

‎api/codeItems/useDeleteCodeItem.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useSnackbar } from "notistack";
2+
import { fetchService } from "@/services";
3+
import { useMutation, useQueryClient } from "@tanstack/react-query";
4+
import { ApiResponse, CODEITEMS_API_ENDPOINT } from "@/types";
5+
6+
export const useDeleteCodeItem = () => {
7+
const queryClient = useQueryClient();
8+
const { enqueueSnackbar } = useSnackbar();
9+
10+
const { mutateAsync: deleteCodeItem, isPending } = useMutation({
11+
mutationFn: async (codeItemId: string) => {
12+
const response: ApiResponse<{}> = await fetchService(
13+
`${CODEITEMS_API_ENDPOINT}/${codeItemId}`,
14+
{
15+
method: "DELETE",
16+
}
17+
);
18+
19+
if (!response.success) {
20+
throw new Error(response.error);
21+
}
22+
23+
await queryClient.invalidateQueries({
24+
queryKey: [CODEITEMS_API_ENDPOINT],
25+
});
26+
},
27+
onSuccess: () => {
28+
enqueueSnackbar("Code-item deleted successfully", {
29+
variant: "success",
30+
});
31+
},
32+
onError: (error: Error) => {
33+
enqueueSnackbar(error.message, { variant: "error" });
34+
},
35+
});
36+
37+
return { deleteCodeItem, isPending };
38+
};

‎api/codeItems/useGetCodeItems.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useGetUser } from "@/hooks";
2+
import { useQuery } from "@tanstack/react-query";
3+
import { useSearchParams } from "next/navigation";
4+
import { fetchCodeItems } from "./fetchCodeItems";
5+
import { CODEITEMS_API_ENDPOINT } from "@/types";
6+
7+
export const useGetCodeItems = () => {
8+
const { userId } = useGetUser();
9+
const searchParams = useSearchParams();
10+
const q = searchParams.get("q");
11+
const categoryId = searchParams.get("categoryId");
12+
13+
return useQuery({
14+
queryFn: () => fetchCodeItems({ userId, q, categoryId }),
15+
queryKey: [CODEITEMS_API_ENDPOINT, userId, q, categoryId],
16+
enabled: !!userId,
17+
});
18+
};

0 commit comments

Comments
 (0)