fix: moved projects from redux to context

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

@@ -1,39 +1,21 @@
 "use client";
 
-import { useEffect } from "react";
-import { useSelector } from "react-redux";
 import { Group } from "@mantine/core";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
-import {
-    selectProject,
-    setProjects,
-} from "@/lib/features/projects/projectsSlice";
-import { RootState, useAppDispatch } from "@/lib/store";
 
 const Header = () => {
-    const projectsState = useSelector(
+    const { projects, setSelectedProject, selectedProject } =
-        (state: RootState) => state.projectsState
+        useProjectsContext();
-    );
-    const dispatch = useAppDispatch();
-
-    useEffect(() => {
-        const mockProjects = [
-            { id: 1, name: "Проект 1" },
-            { id: 2, name: "Проект 2" },
-            { id: 3, name: "Проект 3" },
-        ];
-        dispatch(setProjects(mockProjects));
-        dispatch(selectProject(mockProjects[0]));
-    }, []);
 
     return (
         <Group
             justify={"flex-end"}
             w={"100%"}>
             <ProjectSelect
-                data={projectsState.projects}
+                data={projects}
-                value={projectsState.selectedProject}
+                value={selectedProject}
-                onChange={value => value && dispatch(selectProject(value))}
+                onChange={value => value && setSelectedProject(value)}
             />
         </Group>
     );

src/app/deals/contexts/ProjectsContext.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React, {
+    createContext,
+    FC,
+    useContext,
+    useEffect,
+    useState,
+} from "react";
+import useProjects from "@/app/deals/hooks/useProjects";
+import { ProjectSchema } from "@/types/ProjectSchema";
+
+type ProjectsContextState = {
+    selectedProject: ProjectSchema | null;
+    setSelectedProject: React.Dispatch<
+        React.SetStateAction<ProjectSchema | null>
+    >;
+    projects: ProjectSchema[];
+};
+
+const ProjectsContext = createContext<ProjectsContextState | undefined>(
+    undefined
+);
+
+const useProjectsContextState = () => {
+    const { projects, refetchProjects } = useProjects();
+    const [selectedProject, setSelectedProject] =
+        useState<ProjectSchema | null>(null);
+
+    useEffect(() => {
+        if (projects.length > 0) {
+            if (selectedProject) {
+                setSelectedProject(
+                    projects.find(
+                        project => project.id === selectedProject.id
+                    ) ?? null
+                );
+            } else {
+                setSelectedProject(projects[0]);
+            }
+        } else {
+            setSelectedProject(null);
+        }
+    }, [projects]);
+
+    return {
+        projects,
+        selectedProject,
+        setSelectedProject,
+    };
+};
+
+type ProjectsContextProviderProps = {
+    children: React.ReactNode;
+};
+
+export const ProjectsContextProvider: FC<ProjectsContextProviderProps> = ({
+    children,
+}) => {
+    const state = useProjectsContextState();
+
+    return (
+        <ProjectsContext.Provider value={state}>
+            {children}
+        </ProjectsContext.Provider>
+    );
+};
+
+export const useProjectsContext = () => {
+    const context = useContext(ProjectsContext);
+    if (!context) {
+        throw new Error(
+            "useProjectsContext must be used within a ProjectsContextProvider"
+        );
+    }
+    return context;
+};

src/app/deals/hooks/useProjects.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { ProjectSchema } from "@/types/ProjectSchema";
+
+const useProjects = () => {
+    const [projects, setProjects] = useState<ProjectSchema[]>([]);
+
+    useEffect(() => {
+        const mockProjects = [
+            { id: 1, name: "Проект 1" },
+            { id: 2, name: "Проект 2" },
+            { id: 3, name: "Проект 3" },
+        ];
+        setProjects(mockProjects);
+    }, []);
+
+    const refetchProjects = () => {};
+
+    return {
+        projects,
+        setProjects,
+        refetchProjects,
+    };
+};
+
+export default useProjects;

src/app/deals/page.tsx

@@ -1,5 +1,6 @@
 import Boards from "@/app/deals/components/Boards/Boards";
 import Header from "@/app/deals/components/Header/Header";
+import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
 import PageBlock from "@/components/PageBlock/PageBlock";
 import PageContainer from "@/components/PageContainer/PageContainer";
 
@@ -7,8 +8,10 @@ export default function DealsPage() {
     return (
         <PageContainer>
             <PageBlock>
-                <Header />
+                <ProjectsContextProvider>
-                <Boards />
+                    <Header />
+                    <Boards />
+                </ProjectsContextProvider>
             </PageBlock>
         </PageContainer>
     );

src/lib/features/projects/projectsSlice.ts

@@ -1,29 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { ProjectSchema } from "@/types/ProjectSchema";
-
-interface ProjectsState {
-    projects: ProjectSchema[];
-    selectedProject: ProjectSchema | null;
-}
-
-const initialState: ProjectsState = {
-    projects: [],
-    selectedProject: null,
-};
-
-export const projectsSlice = createSlice({
-    name: "projects",
-    initialState,
-    reducers: {
-        setProjects: (state, action: PayloadAction<ProjectSchema[]>) => {
-            state.projects = action.payload;
-        },
-        selectProject: (state, action: PayloadAction<ProjectSchema>) => {
-            state.selectedProject = action.payload;
-        },
-    },
-});
-
-export const { setProjects, selectProject } = projectsSlice.actions;
-
-export default projectsSlice.reducer;

src/lib/features/rootReducer.ts

@@ -1,10 +1,8 @@
 import { combineReducers } from "@reduxjs/toolkit";
 import authReducer from "@/lib/features/auth/authSlice";
-import projectsReducer from "@/lib/features/projects/projectsSlice";
 
 const rootReducer = combineReducers({
     auth: authReducer,
-    projectsState: projectsReducer,
 });
 
 export default rootReducer;