From 8795399ae0aa7ff9a81d4e3628cd0b387f5444cf Mon Sep 17 00:00:00 2001
From: Nickolai <lindeman072@mail.ru>
Date: Sun, 18 Aug 2024 23:36:39 +0400
Subject: [PATCH] fix/ create team5

---
 src/pages/Projects/Projects.tsx        |  4 ++++
 src/pages/Teams/Teams.tsx              |  5 ++---
 src/store/features/slice/teamsSlice.ts |  7 ++++++-
 src/ui/Preloader/Preloader.module.scss |  3 ++-
 src/ui/ProjectsItem/ProjectsItem.tsx   | 26 ++++++++++++++++++++------
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/pages/Projects/Projects.tsx b/src/pages/Projects/Projects.tsx
index 0702818..f00e511 100644
--- a/src/pages/Projects/Projects.tsx
+++ b/src/pages/Projects/Projects.tsx
@@ -10,6 +10,10 @@ import {
 export default function Projects() {
   const dispatch = useAppDispatch();
   const { projects } = useAppSelector(selectProjects);
+  console.log('projects: ', projects);
+
+
+
   useEffect(() => {
     dispatch(fetchGetProjects());
   }, []);
diff --git a/src/pages/Teams/Teams.tsx b/src/pages/Teams/Teams.tsx
index 9a7db55..89f5204 100644
--- a/src/pages/Teams/Teams.tsx
+++ b/src/pages/Teams/Teams.tsx
@@ -16,16 +16,15 @@ import { selectUsers, setLoading } from 'src/store/features/slice/userSlice';
 import TeamsItemPersonal from 'src/ui/TeamsItem/TeamsItemPersonal';
 
 export default function Teams() {
-  const { id } = useParams();
-  const { teams, team, addTeam } = useAppSelector(selectTeams);
   let { loading } = useAppSelector(selectUsers);
   const dispatch = useAppDispatch();
+  const { id } = useParams();
+  const { teams, team, addTeam } = useAppSelector(selectTeams);
   const [allCards, setAllCards] = useState<membersProps[]>([]);
   const [updatedCards, setUpdatedCards] = useState<membersProps[]>([]);
   const [teamCard, setTeamCard] = useState<membersProps[]>([]);
   // const teamsRout = location.pathname === '/teams';
   // console.log('teamsRout: ', teamsRout);
-  console.log('addTeam: ', addTeam);
 
   const collectCellIds = (card: membersProps, collected: string[]) => {
     if (card.cellId) {
diff --git a/src/store/features/slice/teamsSlice.ts b/src/store/features/slice/teamsSlice.ts
index 8ad6a8b..355c6fa 100644
--- a/src/store/features/slice/teamsSlice.ts
+++ b/src/store/features/slice/teamsSlice.ts
@@ -11,6 +11,7 @@ export interface StateType {
   error: string | null | unknown;
   nameTeam: string;
   addTeam: TeamsProps[];
+  selectedTeam: null,
  }
 
 const initialState: StateType = {
@@ -20,6 +21,7 @@ const initialState: StateType = {
   error: null,
   nameTeam: '',
   addTeam: [],
+  selectedTeam: null,
  };
 
 export const fetchGetTeams = createAsyncThunk(
@@ -48,6 +50,9 @@ const teamsSlice = createSlice({
     setAddTeam(state, action) {
       state.addTeam = action.payload;
     },
+    setSelectedTeam(state, action) {
+      state.selectedTeam = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -78,6 +83,6 @@ const teamsSlice = createSlice({
   },
 });
 
-export const { setNameTeam, setAddTeam } = teamsSlice.actions;
+export const { setNameTeam, setAddTeam, setSelectedTeam } = teamsSlice.actions;
 export const teamsReducer = teamsSlice.reducer;
 export const selectTeams = (state: RootStore) => state.teams;
diff --git a/src/ui/Preloader/Preloader.module.scss b/src/ui/Preloader/Preloader.module.scss
index 8c8f7c8..5864eb4 100644
--- a/src/ui/Preloader/Preloader.module.scss
+++ b/src/ui/Preloader/Preloader.module.scss
@@ -15,8 +15,9 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: $main-text-grey;
     z-index: 5;
+    background-color: rgba(240, 240, 240, 0.5);
+    backdrop-filter: blur(12px);
   }
 
   &__loader {
diff --git a/src/ui/ProjectsItem/ProjectsItem.tsx b/src/ui/ProjectsItem/ProjectsItem.tsx
index fda0395..baf0440 100644
--- a/src/ui/ProjectsItem/ProjectsItem.tsx
+++ b/src/ui/ProjectsItem/ProjectsItem.tsx
@@ -1,17 +1,31 @@
 import styles from 'src/ui/ProjectsItem/ProjectsItem.module.scss';
 import { ProjectseProps } from 'src/services/types';
+import { useNavigate } from 'react-router-dom';
 
 export default function ProjectsItem({ name, teams }: ProjectseProps) {
+  const navigate = useNavigate();
+
+  const handleTeamClick = (teamId: number) => {
+    navigate(`/teams/${teamId}`);
+  };
+
   return (
     <div className={styles.projectsItem}>
       <p className={styles.title}>{name}</p>
       <div className={styles.mainContainer}>
-        {teams &&
-          teams.map((item) => (
-            <p key={item.id} className={`${styles.text} ${styles.text_link}`}>
-              {item.name}
-            </p>
-          ))}
+      {teams &&
+          teams.map((item) => {
+            const teamId = item.id ? Number(item.id) : undefined;
+            return (
+              <p
+                key={item.id}
+                onClick={() => teamId !== undefined && handleTeamClick(teamId)}
+                className={`${styles.text} ${styles.text_link}`}
+              >
+                {item.name}
+              </p>
+            );
+          })}
         <p className={styles.text}>
           Опорное месторождение Ямальского центра газодобычи
         </p>