feat/ headers for functions

hackathon-Gazprom · Aug 17, 2024 · a0e059c · a0e059c
1 parent e26821c
commit a0e059c
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,9 @@
+Логин: [email protected]
+Пароль: admin
+
 # Проект "Gazprom"
 
-Проект представляет собой MVP web-приложения для онлайн-галереи, представленное командой №5 в рамках Хакатон+ по задаче от sagaart.
+Проект представляет собой MVP web-приложения для онлайн-галереи, представленное командой №1 в рамках Хакатон+ по задаче от sagaart.
 
 [**Ссылка на сайт**](https://gazprom.hopto.org)
 

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -3,7 +3,6 @@ import Header from 'src/components/Header/Header';
 import SideBar from 'src/components/SideBar/SideBar';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-// import { initialCards } from 'src/services/mock';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
 import Registration from 'src/pages/Registration/Registration';
 import {
@@ -16,19 +15,21 @@ import { membersProps, RegisterDataProps } from 'src/services/types';
 import {
   registerUser,
   selectUsers,
+  setLoading,
   setLoggedIn,
 } from 'src/store/features/slice/userSlice';
+import Preloader from 'src/ui/Preloader/Preloader';
 
 export default function App() {
-  let { loggedIn } = useAppSelector(selectUsers);
-  const dispatch = useAppDispatch();
-  const navigate = useNavigate();
+  let { loggedIn, loading } = useAppSelector(selectUsers);
   const [droppedCards, setDroppedCards] = useState<membersProps[]>([]);
   let { cards } = useAppSelector(selectMembers);
-
-  // const [cards, setCards] = useState<membersProps[]>([]);
+  const { members } = useAppSelector(selectMembers);
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
   function handleRegister({ email, password }: RegisterDataProps) {
+    dispatch(setLoading(true));
     dispatch(registerUser({ email, password }))
       .unwrap()
       .then((data) => {
@@ -40,6 +41,9 @@ export default function App() {
       })
       .catch((error) => {
         console.error('Ошибка регистрации:', error);
+      })
+      .finally(() => {
+        dispatch(setLoading(false));
       });
   }
 
@@ -49,10 +53,11 @@ export default function App() {
       dispatch(setLoggedIn(true));
     }
   }, [dispatch]);
-  const { members } = useAppSelector(selectMembers);
+
   return (
     <div>
       <Header droppedCards={droppedCards} />
+     {loading && <Preloader />}
       {loggedIn ? (
         <div className='container'>
           <SideBar />

diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -29,8 +29,8 @@ import Modal from 'src/ui/Modal/Modal';
 const cx = cn.bind(styles);
 
 export default function SideBar() {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [teamName, setTeamName] = useState('');
+  // const [isModalVisible, setIsModalVisible] = useState(false);
+  // const [teamName, setTeamName] = useState('');
   let { shortWindow } = useAppSelector(selectMembers);
   const dispatch = useAppDispatch();
   const [showMore, setShorMore] = useState(true);
@@ -44,11 +44,11 @@ export default function SideBar() {
     dispatch(setIsFilterOpen(true));
   }
 
-  const handleOk = () => {
-    // Здесь можно обработать отправку имени команды
-    console.log('Имя команды:', teamName);
-    setIsModalVisible(false);
-  };
+  // const handleOk = () => {
+  //   // Здесь можно обработать отправку имени команды
+  //   console.log('Имя команды:', teamName);
+  //   setIsModalVisible(false);
+  // };
 
   return (
     <div

diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
@@ -11,17 +11,17 @@ import Card from 'src/ui/Card/Card';
 import Arrow from 'src/ui/Arrow/Arrow';
 import Preloader from 'src/ui/Preloader/Preloader';
 import { id } from 'src/services/const';
+import { selectUsers, setLoading } from 'src/store/features/slice/userSlice';
 
 export default function Main() {
-
-
   const dispatch = useAppDispatch();
   const { team } = useAppSelector(selectTeams);
+  let { loading } = useAppSelector(selectUsers);
 
   const [allCards, setAllCards] = useState<membersProps[]>([]);
   const [updatedCards, setUpdatedCards] = useState<membersProps[]>([]);
   const [teamCard, setTeamCard] = useState<membersProps[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [drawArrows, setDrawArrows] = useState<JSX.Element[]>([]);
 
   const collectCellIds = (card: membersProps, collected: string[]) => {
     if (card.cellId) {
@@ -118,7 +118,6 @@ export default function Main() {
     );
   };
 
-  const [drawArrows, setDrawArrows] = useState<JSX.Element[]>([]);
 
   // Находим родительскую карточку
   const findArrows = (parentId: string) => {
@@ -158,7 +157,6 @@ export default function Main() {
 
   useEffect(() => {
     const foundParentCard = teamCard.find((card) => card.parent_id === null);
-
     if (foundParentCard) {
       const arrows = findArrows(foundParentCard.id);
       setDrawArrows(arrows);
@@ -171,18 +169,30 @@ export default function Main() {
 
   useEffect(() => {
     const fetchData = async () => {
-      setLoading(true);
+      dispatch(setLoading(true));
       await dispatch(fetchGetTeams());
       if (id) {
         const parsedId = parseInt(id, 10);
         await dispatch(fetchGetTeamsId(parsedId));
       }
-      setLoading(false);
+      dispatch(setLoading(false));
     };
-
     fetchData();
   }, [dispatch, id]);
 
+  //   const fetchData = async () => {
+  //     setLoading(true); // Устанавливаем загрузку в true
+  //     await dispatch(fetchGetTeams());
+  //     if (id) {
+  //       const parsedId = parseInt(id, 10);
+  //       await dispatch(fetchGetTeamsId(parsedId));
+  //     }
+  //     setLoading(false); // Устанавливаем загрузку в false
+  //     // setDataLoaded(true); // Данные загружены
+  //   };
+  //   fetchData();
+  // }, [dispatch, id]);
+
   useEffect(() => {
     if (team?.employees) {
       const allEmployeeData = [{ ...team.employees, cellId: '1-0' }];

diff --git a/src/pages/NewTeam/NewTeam.tsx b/src/pages/NewTeam/NewTeam.tsx
@@ -14,7 +14,6 @@ export default function NewTeam() {
   const { allowDrop, handleDrop } = useOutletContext<{
     allowDrop: (e: React.DragEvent<HTMLImageElement>) => void;
     handleDrop: (e: React.DragEvent<HTMLDivElement>) => void;
-    // cards: membersProps[];
   }>();
   let { isFilterOpen, cards } = useAppSelector(selectMembers);
 

diff --git a/src/pages/Teams/Teams.tsx b/src/pages/Teams/Teams.tsx
@@ -12,12 +12,15 @@ import Card from 'src/ui/Card/Card';
 import TeamsItem from 'src/ui/TeamsItem/TeamsItem';
 import Preloader from 'src/ui/Preloader/Preloader'
 import Arrow from 'src/ui/Arrow/Arrow';
+import { selectUsers, setLoading } from 'src/store/features/slice/userSlice';
 
 export default function Teams() {
   const { id } = useParams();
-  const dispatch = useAppDispatch();
   const { teams, team } = useAppSelector(selectTeams);
-  const [loading, setLoading] = useState(true);
+  let { loading } = useAppSelector(selectUsers);
+  const dispatch = useAppDispatch();
+
+  // const [loading, setLoading] = useState(true);
 
   const [allCards, setAllCards] = useState<membersProps[]>([]);
   const [updatedCards, setUpdatedCards] = useState<membersProps[]>([]);
@@ -173,15 +176,14 @@ export default function Teams() {
 
 useEffect(() => {
   const fetchData = async () => {
-    setLoading(true);
+    dispatch(setLoading(true));
     await dispatch(fetchGetTeams());
     if (id) {
       const parsedId = parseInt(id, 10);
       await dispatch(fetchGetTeamsId(parsedId));
     }
-    setLoading(false);
+    dispatch(setLoading(false));
   };
-
   fetchData();
 }, [dispatch, id]);
 

diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
@@ -1,8 +1,6 @@
 import { cellHeight, cellWidth } from 'src/services/const';
-// import { cardsList } from 'src/services/mock';
 import { membersProps } from 'src/services/types';
 import { setCards } from 'src/store/features/slice/membersSlice';
-import { useAppDispatch } from 'src/store/hooks';
 
 // Начальная область переноса
 export const handleDragStart = (

diff --git a/src/store/api.ts b/src/store/api.ts
@@ -1,10 +1,17 @@
 export const BASE_URL = 'https://gazprom.hopto.org';
 import { RegisterDataProps } from 'src/services/types';
-const TOKEN = localStorage.getItem('token');
-const headers = {
-  authorization: `Bearer ${TOKEN}`,
-  Accept: 'application/json',
-  'Content-Type': 'application/json',
+
+const getToken = () => {
+  return localStorage.getItem('token');
+};
+
+const createHeaders = () => {
+  const TOKEN = getToken();
+  return {
+    authorization: `Bearer ${TOKEN}`,
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  };
 };
 
 type RequestOptionsType = RequestInit & {
@@ -28,10 +35,7 @@ const request = (endpoint: string, options?: RequestOptionsType) =>
 export const registration = async ({ email, password }: RegisterDataProps) => {
   const options: RequestOptionsType = {
     method: 'POST',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
+    headers: createHeaders(),
     body: JSON.stringify({ email, password }),
   };
   return await request('/api/token/', options);
@@ -40,7 +44,7 @@ export const registration = async ({ email, password }: RegisterDataProps) => {
 export const getProfile = async () => {
   const options: RequestOptionsType = {
     method: 'GET',
-    headers,
+    headers: createHeaders(),
   };
   const response = await request('/api/v1/users/me/', options);
   return response;
@@ -49,7 +53,7 @@ export const getProfile = async () => {
 export const getMembersAmount = async () => {
   const options: RequestOptionsType = {
     method: 'GET',
-    headers,
+    headers: createHeaders(),
   };
   const response = await request('/api/v1/members/', options);
   return response;
@@ -58,31 +62,31 @@ export const getMembersAmount = async () => {
 export const getMembers = async (page: number) => {
   const options: RequestOptionsType = {
     method: 'GET',
-    headers,
+    headers: createHeaders(),
   };
   return await request(`/api/v1/members/?page=${page}`, options);
 };
 
 export const getTeams = async () => {
   const options: RequestOptionsType = {
     method: 'GET',
-    headers,
+    headers: createHeaders(),
   };
   return await request('/api/v1/teams/', options);
 };
 
 export const getProjects = async () => {
   const options: RequestOptionsType = {
     method: 'GET',
-    headers,
+    headers: createHeaders(),
   };
   return await request('/api/v1/projects/', options);
 };
 
 export const getTeamsId = async (id: number) => {
   const options: RequestOptionsType = {
     method: 'GET',
-    headers,
+    headers: createHeaders(),
   };
   return await request(`/api/v1/teams/${id}/`, options);
 };

diff --git a/src/store/features/slice/userSlice.ts b/src/store/features/slice/userSlice.ts
@@ -9,6 +9,7 @@ export interface StateType {
   error: string | null | unknown;
   loggedIn: boolean;
   profile: ProfileProps | null;
+  loading: boolean;
 }
 
 const initialState: StateType = {
@@ -17,6 +18,7 @@ const initialState: StateType = {
   error: null,
   loggedIn: false,
   profile: null,
+  loading: false,
 };
 // фетч добавить
 export const registerUser = createAsyncThunk(
@@ -42,6 +44,9 @@ const userSlice = createSlice({
       state.access = action.payload;
       state.loggedIn = true;
     },
+    setLoading(state, action) {
+      state.loading = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -73,6 +78,6 @@ const userSlice = createSlice({
   },
 });
 
-export const { setLoggedIn } = userSlice.actions;
+export const { setLoggedIn, setLoading } = userSlice.actions;
 export const userReducer = userSlice.reducer;
 export const selectUsers = (state: RootStore) => state.user;
diff --git a/src/ui/Modal/Modal.tsx b/src/ui/Modal/Modal.tsx
@@ -1,10 +1,10 @@
 import { Button, Input } from 'antd';
 import styles from 'src/ui/Modal/Modal.module.scss';
 
-interface RegistrationProps {
-  handleOk: () => void;
-  handleCancel:  () => void;
-}
+// interface RegistrationProps {
+//   handleOk: () => void;
+//   handleCancel:  () => void;
+// }
 
 export default function Modal() {
 

diff --git a/src/ui/Preloader/Preloader.scss → src/ui/Preloader/Preloader.module.scss b/src/ui/Preloader/Preloader.scss → src/ui/Preloader/Preloader.module.scss
diff --git a/src/ui/Preloader/Preloader.tsx b/src/ui/Preloader/Preloader.tsx
@@ -1,12 +1,10 @@
-import 'src/ui/Preloader/Preloader.scss';
+import styles from 'src/ui/Preloader/Preloader.module.scss';
 
 export default function Preloader() {
-
   return (
-    <div className='preloader'>
-      <div className='preloader__overlay'></div>
-      <div
-        className='preloader__loader'></div>
+    <div className={styles.preloader}>
+      <div className={styles.preloader__overlay}></div>
+      <div className={styles.preloader__loader}></div>
     </div>
   );
 }