diff --git a/src/app/deals/components/shared/Boards/Boards.tsx b/src/app/deals/components/shared/Boards/Boards.tsx index f58ed6f..09e562a 100644 --- a/src/app/deals/components/shared/Boards/Boards.tsx +++ b/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) => ; @@ -21,7 +21,7 @@ const Boards = () => { }; const selectBoard = (board: BoardSchema) => { - setSelectedBoard(board); + setSelectedBoardId(board.id); }; return ( diff --git a/src/app/deals/components/shared/Header/Header.tsx b/src/app/deals/components/shared/Header/Header.tsx index 5263948..27fa351 100644 --- a/src/app/deals/components/shared/Header/Header.tsx +++ b/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 = () => { value && setSelectedProject(value)} + onChange={value => + value && setSelectedProjectId(value.id) + } style={{ minWidth: 200 }} /> diff --git a/src/app/deals/contexts/BoardsContext.tsx b/src/app/deals/contexts/BoardsContext.tsx index 8aae7ff..4ca5147 100644 --- a/src/app/deals/contexts/BoardsContext.tsx +++ b/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>; selectedBoard: BoardSchema | null; - setSelectedBoard: React.Dispatch>; + setSelectedBoardId: React.Dispatch>; 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( - null - ); const [isEditorDrawerOpened, setIsEditorDrawerOpened] = useState(false); - useEffect(() => { - if (boards.length > 0 && selectedBoard === null) { - setSelectedBoard(boards[0]); - return; - } + const [selectedBoardId, setSelectedBoardId] = useState(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, diff --git a/src/app/deals/contexts/ProjectsContext.tsx b/src/app/deals/contexts/ProjectsContext.tsx index ec3da88..c8fd6d8 100644 --- a/src/app/deals/contexts/ProjectsContext.tsx +++ b/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 - >; + setSelectedProjectId: React.Dispatch>; 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(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( + 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, diff --git a/src/app/deals/contexts/StatusesContext.tsx b/src/app/deals/contexts/StatusesContext.tsx index 5ac2255..35f1482 100644 --- a/src/app/deals/contexts/StatusesContext.tsx +++ b/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(false); - useEffect(() => { - refetchStatuses(); - }, [selectedBoard]); - const updateStatus = useMutation({ ...updateStatusMutation(), onError: error => { diff --git a/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx b/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx index e3ccd32..330ab58 100644 --- a/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx +++ b/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx @@ -11,7 +11,7 @@ type Props = { }; const ProjectMobile: FC = ({ project }) => { - const { onUpdateProject, setSelectedProject, setIsEditorDrawerOpened } = + const { onUpdateProject, setSelectedProjectId, setIsEditorDrawerOpened } = useProjectsContext(); const startEditing = () => { @@ -27,7 +27,7 @@ const ProjectMobile: FC = ({ project }) => { }; const onClick = () => { - setSelectedProject(project); + setSelectedProjectId(project.id); setIsEditorDrawerOpened(false); }; diff --git a/src/components/dnd/SortableDnd/SortableDnd.tsx b/src/components/dnd/SortableDnd/SortableDnd.tsx index b1762c9..e7c1379 100644 --- a/src/components/dnd/SortableDnd/SortableDnd.tsx +++ b/src/components/dnd/SortableDnd/SortableDnd.tsx @@ -61,7 +61,7 @@ const SortableDnd = ({ ); useEffect(() => { - setItems(sortByLexorank(initialItems)); + setItems(initialItems); }, [initialItems]); const sensors = useDndSensors(); diff --git a/src/components/dnd/SortableItem/DragHandle.tsx b/src/components/dnd/SortableItem/DragHandle.tsx index cd6a3d6..64cf2a4 100644 --- a/src/components/dnd/SortableItem/DragHandle.tsx +++ b/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 (
{ touchAction: "auto", ...style, }} + className={isMobile ? "" : "swiper-no-swiping"} ref={setNodeRef}> {children}
diff --git a/src/hooks/useBoardsOperations.tsx b/src/hooks/useBoardsOperations.tsx index 0c20bdd..de36cd2 100644 --- a/src/hooks/useBoardsOperations.tsx +++ b/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, + } + ) ) ); };