Upgrade all packages

Author: BohdanUlich

__tests__/.gitkeep

@@ -5,19 +5,26 @@ interface FetchCategoriesParams {
   q?: string | null;
   page?: number;
   limit?: number;
+  labels?: string[];
 }
 
 export const fetchCategories = async ({
   q,
   page = 1,
   limit = 20,
+  labels,
 }: FetchCategoriesParams): Promise<CategoriesListResponse> => {
   let url = `${CATEGORIES_API_ENDPOINT}?page=${page}&limit=${limit}`;
 
   if (q) {
     url += `&q=${encodeURIComponent(q)}`;
   }
 
+  if (labels?.length) {
+    const labelsParams = labels.map((label) => `label=${label}`).join("&");
+    url += `&${labelsParams}`;
+  }
+
   const response = await fetchService(url, { method: "GET" });
 
   if (!response.success) {

__tests__/getCategoryIdsFromLabels.test.ts

@@ -10,10 +10,12 @@ interface UseGetCategoriesParams {
 export const useGetCategories = ({ limit }: UseGetCategoriesParams = {}) => {
   const searchParams = useSearchParams();
   const q = searchParams.get("q");
+  const labels = searchParams.getAll("label");
 
   return useInfiniteQuery({
-    queryKey: [CATEGORIES_API_ENDPOINT, q],
-    queryFn: ({ pageParam }) => fetchCategories({ q, page: pageParam, limit }),
+    queryKey: [CATEGORIES_API_ENDPOINT, q, labels],
+    queryFn: ({ pageParam }) =>
+      fetchCategories({ q, page: pageParam, limit, labels }),
     initialPageParam: 1,
     getNextPageParam: (lastPage) => {
       if (lastPage.pagination.hasMore) {

api/categories/fetchCategories.ts

@@ -42,9 +42,14 @@ export async function PUT(
       })
       .parse(body);
 
+    const updatedLabels = parsedBody.labels.map(({ id, ...rest }) => ({
+      _id: id,
+      ...rest,
+    }));
+
     const category = await Category.findOneAndUpdate(
       { _id: id },
-      { $set: { ...parsedBody } },
+      { $set: { name: parsedBody.name, labels: updatedLabels } },
       { new: true }
     );
 
@@ -106,11 +111,6 @@ export async function DELETE(
 
     await Category.findOneAndDelete({ _id: categoryId });
 
-    await Label.updateMany(
-      { category_ids: categoryId },
-      { $pull: { category_ids: categoryId } }
-    );
-
     return NextResponse.json({ success: true });
   } catch (error) {
     return NextResponse.json(

api/categories/useGetCategories.ts

@@ -17,6 +17,7 @@ export async function GET(req: NextRequest) {
 
   const { searchParams } = new URL(req.url);
   const searchQuery = searchParams.get("q");
+  const labels = searchParams.getAll("label");
   const page = parseInt(searchParams.get("page") || "1", 10);
   const limit = parseInt(searchParams.get("limit") || "20", 10);
 
@@ -68,6 +69,14 @@ export async function GET(req: NextRequest) {
 
     aggregationPipeline.push({ $skip: (page - 1) * limit }, { $limit: limit });
 
+    if (labels.length > 0) {
+      aggregationPipeline.push({
+        $match: {
+          "labels.id": { $in: labels },
+        },
+      });
+    }
+
     const categories = await Category.aggregate(aggregationPipeline);
 
     const totalCategories = await Category.countDocuments({

app/api/categories/[id]/route.ts

@@ -106,7 +106,7 @@ export async function GET(req: NextRequest) {
 
     const populatedCodeItems = await CodeItem.populate(codeItems, {
       path: "label_ids",
-      select: "id name color",
+      select: "id name color text_color",
       options: { skipInvalidIds: true },
     });
 
@@ -119,6 +119,7 @@ export async function GET(req: NextRequest) {
             id: label._id,
             name: label.name,
             color: label.color,
+            text_color: label.text_color,
           }))
         : [],
     }));

app/api/categories/route.ts

@@ -14,7 +14,6 @@ interface UpdateLabelRequest {
 const labelSchema = z.object({
   name: z.string().min(1),
   color: z.string().min(1),
-  category_ids: z.array(z.string()),
   type: z.string().min(1),
   text_color: z.string().min(1),
 });
@@ -39,7 +38,7 @@ const updateLabel = async (id: string, parsedBody: LabelSchema) => {
   if (label.type === CATEGORY_TYPE) {
     // Update label in all categories
     await Category.updateMany(
-      { _id: { $in: label.category_ids }, "labels._id": id },
+      { "labels._id": id },
       { $set: { "labels.$": label } }
     );
   }

app/api/code-items/route.ts

@@ -51,7 +51,6 @@ export async function GET(req: NextRequest) {
           _id: 0,
           name: 1,
           color: 1,
-          category_ids: 1,
           type: 1,
           text_color: 1,
         },

app/api/labels/[id]/route.ts

@@ -16,12 +16,13 @@ interface EditPageProps {
 
 const CodeItemEditPage = async ({ params }: EditPageProps) => {
   const queryClient = new QueryClient();
-  const { id: codeItemId } = params;
+  const { id: codeItemId } = await params;
+  const resolvedCookies = await cookies();
 
   await queryClient.prefetchQuery({
     queryKey: [CODEITEMS_API_ENDPOINT, codeItemId],
     queryFn: () =>
-      fetchOneCodeItem({ codeItemId, headers: { Cookie: cookies() } }),
+      fetchOneCodeItem({ codeItemId, headers: { Cookie: resolvedCookies } }),
   });
 
   return (

app/api/labels/route.ts

@@ -19,7 +19,9 @@ interface CodeItemsPageProps {
 
 const CodeItemsPage = async ({ searchParams }: CodeItemsPageProps) => {
   const queryClient = new QueryClient();
-  const params = new URLSearchParams(searchParams);
+  const resolvedSearchParams = await searchParams;
+  const resolvedCookies = await cookies();
+  const params = new URLSearchParams(resolvedSearchParams);
   const categoryId = params.get("categoryId");
 
   const codeItemsResponse = await queryClient.fetchInfiniteQuery({
@@ -32,7 +34,7 @@ const CodeItemsPage = async ({ searchParams }: CodeItemsPageProps) => {
         labels: [],
         page: 1,
         limit: 20,
-        headers: { Cookie: cookies() },
+        headers: { Cookie: resolvedCookies },
       }),
   });
   const pageTitle = codeItemsResponse?.pages[0].pageTitle ?? "Code items";

app/code-items/edit/[id]/page.tsx

@@ -16,12 +16,13 @@ interface EditPageProps {
 
 const CodeIteShowPage = async ({ params }: EditPageProps) => {
   const queryClient = new QueryClient();
-  const { id: codeItemId } = params;
+  const { id: codeItemId } = await params;
+  const resolvedCookies = await cookies();
 
   await queryClient.prefetchQuery({
     queryKey: [CODEITEMS_API_ENDPOINT, codeItemId],
     queryFn: () =>
-      fetchOneCodeItem({ codeItemId, headers: { Cookie: cookies() } }),
+      fetchOneCodeItem({ codeItemId, headers: { Cookie: resolvedCookies } }),
   });
 
   return (

app/code-items/page.tsx

@@ -15,8 +15,13 @@ import { ProgressBar } from "@/components/ProgressBar";
 export const metadata: Metadata = {
   title: "Next App",
   description: "Generated by create next app",
-  viewport:
-    "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
+};
+
+export const viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {

app/code-items/show/[id]/page.tsx

@@ -6,10 +6,12 @@ import { SearchInput } from "@/components/inputs";
 import { MainLayout } from "@/components/MainLayout";
 import { FiltersModal } from "@/components/modals";
 import { CATEGORY_TYPE } from "@/types";
+import { useGetLabels } from "@/api";
 
 const Home = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  useGetLabels({ labelType: CATEGORY_TYPE });
 
   return (
     <MainLayout title="Categories">

app/layout.tsx

@@ -21,7 +21,7 @@ export const MainLayout = ({
   titleProps,
 }: MainLayoutProps) => {
   return (
-    <Box component="main" pt={12} pb={4}>
+    <Box component="main" pt={12} pb={8}>
       <Container maxWidth="lg">
         <Grid2 container gap={2} direction="column">
           {toolbar}

app/page.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useMemo } from "react";
 import { Box, Grid } from "@mui/material";
 import { useCategories } from "@/providers";
-import { getCategoryIdsFromLabels } from "@/helpers";
-import { CATEGORY_TYPE } from "@/types";
-import { useGetCategories, useGetLabels } from "@/api";
+import { useGetCategories } from "@/api";
 import { CategoryCard } from "./CategoryCard";
 import { CategoryCardSkeleton } from "./CategoryCardSkeleton";
 import { LoadingSpinner } from "../LoadingSpinner";
 import { useInView } from "react-intersection-observer";
+import { isCategoryLabelsEdited } from "@/helpers";
 
 export const CategoriesList = () => {
   const {
@@ -25,40 +23,18 @@ export const CategoriesList = () => {
     () => categoriesResponse?.pages.flatMap((page) => page.data) || [],
     [categoriesResponse]
   );
-  const { data: labels } = useGetLabels({ labelType: CATEGORY_TYPE });
   const { currentCategories, setCurrentCategories } = useCategories();
-  const searchParams = useSearchParams();
-  const labelIds = searchParams.getAll("label");
-  const [filteredCategories, setFilteredCategories] = useState(categories);
 
   useEffect(() => {
-    // Initial categories filtering when label ids are in search params
-    if (labels?.length && categories.length && labelIds.length) {
-      const categoryIds = getCategoryIdsFromLabels({ labelIds, labels });
-
-      const filteredCategories = categories.filter((category) =>
-        categoryIds.includes(category.id)
-      );
-
-      setFilteredCategories(filteredCategories);
-      setCurrentCategories(filteredCategories);
-
-      return;
-    }
-
-    // Initial set of categories without filters
+    // Initial set of categories
     if ((!categories.length && currentCategories.length) || categories.length) {
       setCurrentCategories(categories);
     }
-
-    //eslint-disable-next-line
-  }, [labels, categories, setCurrentCategories, searchParams]);
+  }, [categories, setCurrentCategories]);
 
   const onFinishCreatingCategory = useCallback(() => {
-    labelIds.length
-      ? setCurrentCategories(filteredCategories)
-      : setCurrentCategories(categories);
-  }, [categories, labelIds, filteredCategories, setCurrentCategories]);
+    setCurrentCategories(categories);
+  }, [categories, setCurrentCategories]);
 
   const { ref, inView } = useInView({
     triggerOnce: false,
@@ -85,6 +61,11 @@ export const CategoriesList = () => {
                 onFinishCreatingCategory={onFinishCreatingCategory}
                 categoryId={category.id}
                 labels={category.labels || []}
+                isCategoryLabelsEdited={isCategoryLabelsEdited({
+                  categories,
+                  categoryId: category.id,
+                  newLabels: category.labels || [],
+                })}
               />
             </Grid>
           ))}