fix: boards rerender optimization

src/app/deals/components/shared/Boards/Boards.tsx

@@ -11,7 +11,7 @@ import { BoardSchema } from "@/lib/client";
 import styles from "./Boards.module.css";
 
 const Boards = () => {
-    const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
+    const { boards, setSelectedBoardId, onUpdateBoard } = useBoardsContext();
     const isMobile = useIsMobile();
 
     const renderBoard = (board: BoardSchema) => <Board board={board} />;
@@ -21,7 +21,7 @@ const Boards = () => {
     };
 
     const selectBoard = (board: BoardSchema) => {
-        setSelectedBoard(board);
+        setSelectedBoardId(board.id);
     };
 
     return (

src/app/deals/components/shared/Header/Header.tsx

@@ -11,7 +11,7 @@ import useIsMobile from "@/hooks/useIsMobile";
 const Header = () => {
     const {
         projects,
-        setSelectedProject,
+        setSelectedProjectId,
         selectedProject,
         setIsEditorDrawerOpened: setIsProjectsDrawerOpened,
     } = useProjectsContext();
@@ -35,7 +35,9 @@ const Header = () => {
                     <ProjectSelect
                         data={projects}
                         value={selectedProject}
-                        onChange={value => value && setSelectedProject(value)}
+                        onChange={value =>
+                            value && setSelectedProjectId(value.id)
+                        }
                         style={{ minWidth: 200 }}
                     />
                 </Flex>

src/app/deals/contexts/BoardsContext.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import React, {
-    createContext,
-    FC,
-    useContext,
-    useEffect,
-    useState,
-} from "react";
+import React, { createContext, FC, useContext, useState } from "react";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import useBoardsList from "@/hooks/useBoardsList";
 import { useBoardsOperations } from "@/hooks/useBoardsOperations";
@@ -16,7 +10,7 @@ type BoardsContextState = {
     boards: BoardSchema[];
     setBoards: React.Dispatch<React.SetStateAction<BoardSchema[]>>;
     selectedBoard: BoardSchema | null;
-    setSelectedBoard: React.Dispatch<React.SetStateAction<BoardSchema | null>>;
+    setSelectedBoardId: React.Dispatch<React.SetStateAction<number | null>>;
     refetchBoards: () => void;
     onCreateBoard: (name: string) => void;
     onUpdateBoard: (boardId: number, board: UpdateBoardSchema) => void;
@@ -34,27 +28,16 @@ const useBoardsContextState = () => {
         setBoards,
         refetch: refetchBoards,
     } = useBoardsList({ projectId: project?.id });
-    const [selectedBoard, setSelectedBoard] = useState<BoardSchema | null>(
-        null
-    );
     const [isEditorDrawerOpened, setIsEditorDrawerOpened] =
         useState<boolean>(false);
 
-    useEffect(() => {
-        if (boards.length > 0 && selectedBoard === null) {
-            setSelectedBoard(boards[0]);
-            return;
-        }
+    const [selectedBoardId, setSelectedBoardId] = useState<number | null>(null);
+    const selectedBoard =
+        boards.find(board => board.id === selectedBoardId) ?? null;
 
-        if (!selectedBoard) return;
-
-        let newBoard = boards.find(board => board.id === selectedBoard.id);
-
-        if (!newBoard && boards.length > 0) {
-            newBoard = boards[0];
-        }
-        setSelectedBoard(newBoard ?? null);
-    }, [boards]);
+    if (selectedBoard === null && boards.length > 0) {
+        setSelectedBoardId(boards[0].id);
+    }
 
     const { onCreateBoard, onUpdateBoard, onDeleteBoard } = useBoardsOperations(
         {
@@ -69,7 +52,7 @@ const useBoardsContextState = () => {
         boards,
         setBoards,
         selectedBoard,
-        setSelectedBoard,
+        setSelectedBoardId,
         refetchBoards,
         onCreateBoard,
         onUpdateBoard,

src/app/deals/contexts/ProjectsContext.tsx

@@ -1,21 +1,13 @@
 "use client";
 
-import React, {
-    createContext,
-    FC,
-    useContext,
-    useEffect,
-    useState,
-} from "react";
+import React, { createContext, FC, useContext, useState } from "react";
 import useProjectsList from "@/hooks/useProjectsList";
 import { useProjectsOperations } from "@/hooks/useProjectsOperations";
 import { ProjectSchema, UpdateProjectSchema } from "@/lib/client";
 
 type ProjectsContextState = {
     selectedProject: ProjectSchema | null;
-    setSelectedProject: React.Dispatch<
-        React.SetStateAction<ProjectSchema | null>
-    >;
+    setSelectedProjectId: React.Dispatch<React.SetStateAction<number | null>>;
     projects: ProjectSchema[];
     onCreateProject: (name: string) => void;
     onUpdateProject: (projectId: number, project: UpdateProjectSchema) => void;
@@ -36,24 +28,16 @@ const useProjectsContextState = () => {
         setProjects,
         refetch: refetchProjects,
     } = useProjectsList();
-    const [selectedProject, setSelectedProject] =
-        useState<ProjectSchema | null>(null);
 
-    useEffect(() => {
-        if (projects.length > 0) {
-            if (selectedProject) {
-                setSelectedProject(
-                    projects.find(
-                        project => project.id === selectedProject.id
-                    ) ?? null
-                );
-                return;
-            }
-            setSelectedProject(projects[0]);
-            return;
-        }
-        setSelectedProject(null);
-    }, [projects]);
+    const [selectedProjectId, setSelectedProjectId] = useState<number | null>(
+        null
+    );
+    const selectedProject =
+        projects.find(project => project.id === selectedProjectId) ?? null;
+
+    if (selectedProject === null && projects.length > 0) {
+        setSelectedProjectId(projects[0].id);
+    }
 
     const { onCreateProject, onUpdateProject, onDeleteProject } =
         useProjectsOperations({
@@ -65,7 +49,7 @@ const useProjectsContextState = () => {
     return {
         projects,
         selectedProject,
-        setSelectedProject,
+        setSelectedProjectId,
         onCreateProject,
         onUpdateProject,
         onDeleteProject,

src/app/deals/contexts/StatusesContext.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import React, {
-    createContext,
-    FC,
-    useContext,
-    useEffect,
-    useState,
-} from "react";
+import React, { createContext, FC, useContext, useState } from "react";
 import { useMutation, UseMutationResult } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
@@ -55,10 +49,6 @@ const useStatusesContextState = () => {
     const [isEditorDrawerOpened, setIsEditorDrawerOpened] =
         useState<boolean>(false);
 
-    useEffect(() => {
-        refetchStatuses();
-    }, [selectedBoard]);
-
     const updateStatus = useMutation({
         ...updateStatusMutation(),
         onError: error => {

src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 const ProjectMobile: FC<Props> = ({ project }) => {
-    const { onUpdateProject, setSelectedProject, setIsEditorDrawerOpened } =
+    const { onUpdateProject, setSelectedProjectId, setIsEditorDrawerOpened } =
         useProjectsContext();
 
     const startEditing = () => {
@@ -27,7 +27,7 @@ const ProjectMobile: FC<Props> = ({ project }) => {
     };
 
     const onClick = () => {
-        setSelectedProject(project);
+        setSelectedProjectId(project.id);
         setIsEditorDrawerOpened(false);
     };
 

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -61,7 +61,7 @@ const SortableDnd = <T extends BaseItem>({
     );
 
     useEffect(() => {
-        setItems(sortByLexorank(initialItems));
+        setItems(initialItems);
     }, [initialItems]);
 
     const sensors = useDndSensors();

src/components/dnd/SortableItem/DragHandle.tsx

@@ -1,5 +1,6 @@
 import React, { CSSProperties, ReactNode } from "react";
 import { useDraggable } from "@dnd-kit/core";
+import useIsMobile from "@/hooks/useIsMobile";
 
 type Props = {
     id: number | string;
@@ -13,6 +14,7 @@ const DragHandle = ({ id, children, style, disabled }: Props) => {
         id,
         disabled,
     });
+    const isMobile = useIsMobile();
 
     return (
         <div
@@ -24,6 +26,7 @@ const DragHandle = ({ id, children, style, disabled }: Props) => {
                 touchAction: "auto",
                 ...style,
             }}
+            className={isMobile ? "" : "swiper-no-swiping"}
             ref={setNodeRef}>
             {children}
         </div>

src/hooks/useBoardsOperations.tsx

@@ -15,7 +15,11 @@ import {
     updateBoardMutation,
 } from "@/lib/client/@tanstack/react-query.gen";
 import { notifications } from "@/lib/notifications";
-import { getMaxByLexorank, getNewLexorank } from "@/utils/lexorank";
+import {
+    getMaxByLexorank,
+    getNewLexorank,
+    sortByLexorank,
+} from "@/utils/lexorank";
 
 type UseBoardsOperationsProps = {
     boards: BoardSchema[];
@@ -87,16 +91,18 @@ export const useBoardsOperations = ({
         });
 
         setBoards(boards =>
-            boards.map(oldBoard =>
-                oldBoard.id !== boardId
-                    ? oldBoard
-                    : {
-                          id: oldBoard.id,
-                          name: board.name ? board.name : oldBoard.name,
-                          lexorank: board.lexorank
-                              ? board.lexorank
-                              : oldBoard.lexorank,
-                      }
+            sortByLexorank(
+                boards.map(oldBoard =>
+                    oldBoard.id !== boardId
+                        ? oldBoard
+                        : {
+                              id: oldBoard.id,
+                              name: board.name ? board.name : oldBoard.name,
+                              lexorank: board.lexorank
+                                  ? board.lexorank
+                                  : oldBoard.lexorank,
+                          }
+                )
             )
         );
     };