corrected pathes; added global state

src/Api/tournaments.json

@@ -55,9 +55,9 @@
         "date": "2023-07-16",
         "players": [
           { "member_id": "39", "win": 2, "defeat": 3, "position": 3 },
-          { "member_id": "57", "win": 0, "defeat": 3, "position": 1 },
+          { "member_id": "57", "win": 0, "defeat": 3, "position": 4 },
           { "member_id": "5", "win": 0, "defeat": 3, "position": 4 },
-          { "member_id": "85", "win": 5, "defeat": 0, "position": 4 },
+          { "member_id": "85", "win": 5, "defeat": 0, "position": 1 },
           { "member_id": "76", "win": 4, "defeat": 2, "position": 2 }
         ]
       },
@@ -182,6 +182,16 @@
           { "member_id": "11", "win": 5, "defeat": 1, "position": 2 },
           { "member_id": "1", "win": 3, "defeat": 3, "position": 3 }
         ]
+      },
+      {
+        "date": "2024-05-19",
+        "players": [
+          { "member_id": "30", "win": 0, "defeat": 8, "position": 5 },
+          { "member_id": "85", "win": 5, "defeat": 6, "position": 4 },
+          { "member_id": "76", "win": 6, "defeat": 3, "position": 2 },
+          { "member_id": "57", "win": 6, "defeat": 4, "position": 3 },
+          { "member_id": "1", "win": 7, "defeat": 3, "position": 1 }
+        ]
       }
     ]
   }

src/App.js

@@ -18,11 +18,9 @@ function App() {
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<HomePage />} />F
-
             <Route path="tournaments" element={<TournamentsPage />} />
             <Route path="tournaments/:id" element={<StagesList />} />
             <Route path="tournaments/:id/:id" element={<ParticipantsList />} />
-
             <Route path="members" element={<MembersPage />}>
               <Route path="user/:id" element={<MembersModal />} />
             </Route>

src/Layout/Layout.jsx

@@ -4,8 +4,32 @@ import { Footer } from "../components/Footer/Footer";
 import { ScrollToTopButton } from "../components/ScrollToTopButton/ScrollToTopButton";
 import { ContactsSection } from "../components/ContactsSection/ContactsSection";
 import { LastUpdateSection } from "../components/LastUpdateSection/LastUpdateSection";
+import { useEffect } from "react";
+import { useStateContext } from "../state/stateContext";
+import { membersApi, photosApi, tournamentsApi } from "../Api/ApiRequest";
 
 const Layout = () => {
+  const { setGlobalState } = useStateContext();
+
+  useEffect(() => {
+    const members = membersApi();
+    members?.sort((a, b) => a.name.localeCompare(b.name));
+
+    const tournaments = tournamentsApi();
+    tournaments?.sort((a, b) => a.name.localeCompare(b.name));
+
+    const photos = photosApi();
+    photos?.sort((a, b) => b.date.localeCompare(a.date));
+
+    setGlobalState((prev) => ({
+      ...prev,
+      members,
+      tournaments,
+      photos,
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <AppBar />

src/components/ImageGallery/ImageGalleryModal.jsx

@@ -14,9 +14,12 @@ import sprite from "../../sprite.svg";
 import { Loader } from "../Loaders/Loaders";
 import { Modal } from "../Modal/Modal";
 import { Portal } from "../../Routes/Portal/Portal";
-import { photosApi } from "../../Api/ApiRequest";
+import { useStateContext } from "../../state/stateContext";
 
 export const ImageGalleryModal = () => {
+  const { globalState } = useStateContext();
+  const { photos } = globalState;
+
   const { id } = useParams();
   const navigate = useNavigate();
 
@@ -39,9 +42,7 @@ export const ImageGalleryModal = () => {
       setScrollPosition(rect.y - window.innerHeight / 2 + 100);
     }
 
-    const gallery = photosApi();
-    const orderedGallery =
-      order === "newest" ? gallery : [...gallery].reverse();
+    const orderedGallery = order === "newest" ? photos : [...photos].reverse();
     setGalleryArray(orderedGallery);
 
     const current = orderedGallery.find((el) => String(el.id) === String(id));
@@ -52,7 +53,7 @@ export const ImageGalleryModal = () => {
       document.documentElement.classList.remove("modal-open");
       window.scrollTo(0, scrollPosition);
     };
-  }, [id, liElement, order, scrollPosition]);
+  }, [id, liElement, order, photos, scrollPosition]);
 
   const closeModal = () => {
     navigate("/gallery");

src/components/LastUpdateSection/LastUpdateSection.jsx

@@ -11,7 +11,7 @@ export const LastUpdateSection = () => {
               <use href={sprite + "#icon-loop"}></use>
             </IconSvg>
           </IconWrap>
-          Останнє оновлення: 03.05.2024
+          Останнє оновлення: 25.05.2024
         </Text>
       </Section>
     </>

src/components/MembersList/MembersModal.jsx

@@ -13,9 +13,12 @@ import {
 
 import { Modal } from "../Modal/Modal";
 import { Portal } from "../../Routes/Portal/Portal";
-import { membersApi } from "../../Api/ApiRequest";
+import { useStateContext } from "../../state/stateContext";
 
 export const MembersModal = () => {
+  const { globalState } = useStateContext();
+  const { members } = globalState;
+
   const { id } = useParams();
   const navigate = useNavigate();
 
@@ -50,16 +53,15 @@ export const MembersModal = () => {
     document.body.classList.add("modal-open");
     document.documentElement.classList.add("modal-open");
 
-    const members = membersApi();
-    const current = members.find((el) => String(el.id) === String(id));
+    const current = members?.find((el) => String(el.id) === String(id));
     setCurrentMember(current);
 
     return () => {
       document.body.classList.remove("modal-open");
       document.documentElement.classList.remove("modal-open");
       window.scrollTo(0, scrollPosition);
     };
-  }, [id, scrollPosition]);
+  }, [id, members, scrollPosition]);
 
   const closeModal = () => {
     navigate("/members");

src/components/ParticipantsList/ParticipantsItem.jsx

@@ -1,17 +1,19 @@
 import { Item, ItemText, ItemWrap } from "./ParticipantsList-styled";
-import { membersApi } from "../../Api/ApiRequest";
 import { useParams } from "react-router-dom";
 import { defineRank } from "../../helpers/defineRank";
+import { useStateContext } from "../../state/stateContext";
+import { isDateHidden } from "../../helpers/isDateHidden";
 
 export const ParticipantsItem = ({ el, index }) => {
+  const { globalState } = useStateContext();
+  const { members } = globalState;
+
   const { id } = useParams();
-  const members = membersApi();
   const participant = members.find((member) => member.id === el.member_id);
 
   const participantRank = defineRank(el.position);
 
-  const isHide =
-    id === "2024-04-07" || id === "2024-04-21" || id === "2024-04-28";
+  const isHide = isDateHidden(id);
 
   return (
     <>

src/components/ParticipantsList/ParticipantsList.jsx

@@ -10,22 +10,30 @@ import {
 import { ParticipantsListHeading } from "./ParticipantsListHeading";
 import sprite from "../../sprite.svg";
 import { ParticipantsItem } from "./ParticipantsItem";
+import { useStateContext } from "../../state/stateContext";
 
 export const ParticipantsList = () => {
-  const { state } = useLocation();
+  const { globalState } = useStateContext();
+  const { tournaments } = globalState;
+
+  const { pathname } = useLocation();
   const navigate = useNavigate();
 
+  const parts = pathname.split("/");
+  const tournamentId = parts[2];
+  const stageId = parts[3];
+
+  const { stages } = tournaments?.find((t) => t.id === tournamentId);
+  const currentStage = stages?.find((s) => s.date === stageId);
+
   const handleBack = () => {
-    navigate(-1);
+    navigate(`/tournaments/${tournamentId}`);
   };
 
   return (
     <>
       <Section>
-        <TitleSection
-          icon={"#icon-users"}
-          title={"Кількість учасників: " + state?.players?.length}
-        >
+        <TitleSection icon={"#icon-users"} title={currentStage?.date}>
           <Button onClick={handleBack}>
             <ButtonIconSvg>
               <use href={sprite + "#icon-undo"}></use>
@@ -35,7 +43,7 @@ export const ParticipantsList = () => {
         </TitleSection>
         <List>
           <ParticipantsListHeading />
-          {state?.players?.map((el, index) => (
+          {currentStage?.players?.map((el, index) => (
             <ParticipantsItem key={el.member_id} el={el} index={index} />
           ))}
         </List>

src/components/StagesList/StagesItem.jsx

@@ -1,17 +1,17 @@
 import { format } from "date-fns";
 import ukLocale from "date-fns/locale/uk";
 import { Item, ItemText, ItemWrap } from "./StagesList-styled";
-import { membersApi } from "../../Api/ApiRequest";
 import { useNavigate } from "react-router-dom";
+import { useStateContext } from "../../state/stateContext";
+import { isDateHidden } from "../../helpers/isDateHidden";
 
 export const StagesItem = ({ el, index }) => {
-  const isHide =
-    el.date === "2024-04-07" ||
-    el.date === "2024-04-21" ||
-    el.date === "2024-04-28";
+  const { globalState } = useStateContext();
+  const { members } = globalState;
+
   const navigate = useNavigate();
 
-  const members = membersApi();
+  const isHide = isDateHidden(el.date);
 
   const winner = el?.players?.find((player) => player.position === 1);
   const { name } = members?.find((member) => member.id === winner.member_id);

src/components/StagesList/StagesList.jsx

@@ -1,24 +1,29 @@
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { TitleSection } from "../TitleSection/TitleSection";
 import { StagesItem } from "./StagesItem";
 import { Button, ButtonIconSvg, List, Section } from "./StagesList-styled";
 import { StagesListHeading } from "./StagesListHeading";
 import sprite from "../../sprite.svg";
+import { useStateContext } from "../../state/stateContext";
 
 export const StagesList = () => {
-  const { state } = useLocation();
+  const { globalState } = useStateContext();
+  const { tournaments } = globalState;
+
   const navigate = useNavigate();
+  const { id } = useParams();
+  const currentTournament = tournaments?.find((t) => t.id === id);
 
   const handleBack = () => {
-    navigate(-1);
+    navigate("/tournaments");
   };
 
   return (
     <>
       <Section>
         <TitleSection
           icon={"#icon-medal"}
-          title={"Кількість етапів: " + state?.stages?.length}
+          title={"Кількість етапів: " + currentTournament?.stages?.length}
         >
           <Button onClick={handleBack}>
             <ButtonIconSvg>
@@ -29,7 +34,7 @@ export const StagesList = () => {
         </TitleSection>
         <List>
           <StagesListHeading />
-          {state?.stages?.map((el, index) => (
+          {currentTournament?.stages?.map((el, index) => (
             <StagesItem key={el.date} el={el} index={index} />
           ))}
         </List>

src/components/StatsSection/StatsSection.jsx

@@ -1,10 +1,14 @@
 import { List, Section, SectionWrap } from "./StatsSection-styled";
 
 import { StatItem } from "./StatsItem";
+import { useStateContext } from "../../state/stateContext";
 
-export const StatsSection = ({ membersArray }) => {
-  const players = membersArray.length;
-  const trainers = membersArray.filter((member) => member.type === "Тренер");
+export const StatsSection = () => {
+  const { globalState } = useStateContext();
+  const { members } = globalState;
+
+  const players = members.length;
+  const trainers = members.filter((member) => member.type === "Тренер");
   const experience = new Date().getFullYear() - 2016;
 
   const stats = [

src/components/TournamentsList/TournamentsItem.jsx

@@ -10,7 +10,7 @@ export const TournamentsItem = ({ el, index }) => {
   const navigate = useNavigate();
 
   const handleItemClick = () => {
-    navigate(el.id, { state: { stages: el.stages } });
+    navigate(el.id);
   };
 
   return (

src/components/TournamentsList/TournamentsList.jsx

@@ -1,24 +1,23 @@
 import { List, Section } from "./TournamentsList-styled";
 import { TournamentsItem } from "./TournamentsItem";
 import { TitleSection } from "../TitleSection/TitleSection";
+import { useStateContext } from "../../state/stateContext";
+
+export const TournamentsList = () => {
+  const { globalState } = useStateContext();
+  const { tournaments } = globalState;
 
-export const TournamentsList = ({ tournamentsArray, membersArray }) => {
   return (
     <>
       <Section>
         <TitleSection
           icon={"#icon-cup"}
-          title={"Кількість турнірів: " + tournamentsArray.length}
+          title={"Кількість турнірів: " + tournaments?.length}
         />
 
         <List>
-          {tournamentsArray?.map((el, index) => (
-            <TournamentsItem
-              key={el.id}
-              el={el}
-              index={index}
-              membersArray={membersArray}
-            />
+          {tournaments?.map((el, index) => (
+            <TournamentsItem key={el.id} el={el} index={index} />
           ))}
         </List>
       </Section>

src/helpers/isDateHidden.js

@@ -0,0 +1,4 @@
+export const isDateHidden = (date) => {
+  const hiddenDates = ["2024-04-07", "2024-04-21", "2024-04-28", "2024-05-19"];
+  return hiddenDates.includes(date);
+};

src/index.js

@@ -4,11 +4,13 @@ import "./index.css";
 import "modern-normalize";
 
 import App from "./App";
-
+import { StateProvider } from "./state/stateContext";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <StateProvider>
+      <App />
+    </StateProvider>
   </React.StrictMode>
 );