fix/ create team5

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());
   }, []);

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) {

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;

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 {

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>