diff --git a/src/app/deals/components/Header/Header.tsx b/src/app/deals/components/Header/Header.tsx index 16219b2..da6d97d 100644 --- a/src/app/deals/components/Header/Header.tsx +++ b/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( - (state: RootState) => state.projectsState - ); - 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])); - }, []); + const { projects, setSelectedProject, selectedProject } = + useProjectsContext(); return ( value && dispatch(selectProject(value))} + data={projects} + value={selectedProject} + onChange={value => value && setSelectedProject(value)} /> ); diff --git a/src/app/deals/contexts/ProjectsContext.tsx b/src/app/deals/contexts/ProjectsContext.tsx new file mode 100644 index 0000000..4303e7a --- /dev/null +++ b/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 + >; + projects: ProjectSchema[]; +}; + +const ProjectsContext = createContext( + undefined +); + +const useProjectsContextState = () => { + const { projects, refetchProjects } = useProjects(); + const [selectedProject, setSelectedProject] = + useState(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 = ({ + children, +}) => { + const state = useProjectsContextState(); + + return ( + + {children} + + ); +}; + +export const useProjectsContext = () => { + const context = useContext(ProjectsContext); + if (!context) { + throw new Error( + "useProjectsContext must be used within a ProjectsContextProvider" + ); + } + return context; +}; diff --git a/src/app/deals/hooks/useProjects.ts b/src/app/deals/hooks/useProjects.ts new file mode 100644 index 0000000..5ec90b3 --- /dev/null +++ b/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([]); + + 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; diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index fedcf06..a95f206 100644 --- a/src/app/deals/page.tsx +++ b/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 ( -
- + +
+ + ); diff --git a/src/lib/features/projects/projectsSlice.ts b/src/lib/features/projects/projectsSlice.ts deleted file mode 100644 index c1fd8dd..0000000 --- a/src/lib/features/projects/projectsSlice.ts +++ /dev/null @@ -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) => { - state.projects = action.payload; - }, - selectProject: (state, action: PayloadAction) => { - state.selectedProject = action.payload; - }, - }, -}); - -export const { setProjects, selectProject } = projectsSlice.actions; - -export default projectsSlice.reducer; diff --git a/src/lib/features/rootReducer.ts b/src/lib/features/rootReducer.ts index 5266bf1..5f0140b 100644 --- a/src/lib/features/rootReducer.ts +++ b/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;