filled in tournaments database

src/Api/tournaments.json

@@ -17,6 +17,61 @@
           { "member_id": "11", "win": 2, "defeat": 6 },
           { "member_id": "57", "win": 2, "defeat": 6 }
         ]
+      },
+      {
+        "date": "2023-07-02",
+        "players": [
+          { "member_id": "42", "win": 5, "defeat": 2 },
+          { "member_id": "1", "win": 6, "defeat": 1 },
+          { "member_id": "76", "win": 5, "defeat": 2 },
+          { "member_id": "39", "win": 3, "defeat": 4 },
+          { "member_id": "85", "win": 3, "defeat": 4 },
+          { "member_id": "11", "win": 5, "defeat": 2 },
+          { "member_id": "57", "win": 0, "defeat": 7 },
+          { "member_id": "30", "win": 1, "defeat": 6 }
+        ]
+      },
+      {
+        "date": "2023-07-09",
+        "players": [
+          { "member_id": "42", "win": 2, "defeat": 2 },
+          { "member_id": "1", "win": 5, "defeat": 2 },
+          { "member_id": "76", "win": 4, "defeat": 2 },
+          { "member_id": "85", "win": 4, "defeat": 4 },
+          { "member_id": "57", "win": 2, "defeat": 4 },
+          { "member_id": "111", "win": 0, "defeat": 3 }
+        ]
+      },
+      {
+        "date": "2023-07-15",
+        "players": [
+          { "member_id": "39", "win": 2, "defeat": 4 },
+          { "member_id": "1", "win": 6, "defeat": 0 },
+          { "member_id": "85", "win": 3, "defeat": 3 },
+          { "member_id": "111", "win": 1, "defeat": 5 }
+        ]
+      },
+      {
+        "date": "2023-07-15",
+        "players": [
+          { "member_id": "39", "win": 2, "defeat": 3 },
+          { "member_id": "5", "win": 0, "defeat": 3 },
+          { "member_id": "57", "win": 0, "defeat": 3 },
+          { "member_id": "85", "win": 5, "defeat": 0 },
+          { "member_id": "76", "win": 4, "defeat": 2 }
+        ]
+      },
+      {
+        "date": "2023-07-15",
+        "players": [
+          { "member_id": "61", "win": 1, "defeat": 1 },
+          { "member_id": "39", "win": 7, "defeat": 4 },
+          { "member_id": "5", "win": 0, "defeat": 5 },
+          { "member_id": "8", "win": 5, "defeat": 4 },
+          { "member_id": "85", "win": 4, "defeat": 6 },
+          { "member_id": "76", "win": 6, "defeat": 5 },
+          { "member_id": "11", "win": 5, "defeat": 4 }
+        ]
       }
     ]
   },

src/App.js

@@ -8,27 +8,25 @@ import Layout from "./Layout/Layout";
 import { ImageGalleryModal } from "./components/ImageGallery/ImageGalleryModal";
 import { MembersModal } from "./components/MembersList/MembersModal";
 import TournamentsPage from "./pages/TournamentsPage/TournamentsPage";
+import { StagesList } from "./components/StagesList/StagesList";
 
 function App() {
   return (
     <>
       <BrowserRouter basename="/100-club">
         <Routes>
           <Route path="/" element={<Layout />}>
-            <Route index element={<HomePage />} />
-
-            <Route path="tournaments" element={<TournamentsPage />}>
-              <Route path="user/:id" element={<MembersModal />} />
-            </Route>
+            <Route index element={<HomePage />} />F
+
+            <Route path="tournaments" element={<TournamentsPage />} />
+            <Route path="tournaments/:id" element={<StagesList />} />
 
             <Route path="members" element={<MembersPage />}>
               <Route path="user/:id" element={<MembersModal />} />
             </Route>
-
             <Route path="gallery" element={<GalleryPage />}>
               <Route path="photo/:id" element={<ImageGalleryModal />} />
             </Route>
-
             <Route path="*" element={<Navigate to="/" replace />} />
           </Route>
         </Routes>

src/components/AppBar/AppBar.jsx

@@ -46,7 +46,7 @@ export const AppBar = () => {
             <NavItem>
               <NavLinkStyled to="/tournaments">
                 <NavIconSvg>
-                  <use href={sprite + "#icon-tournament"}></use>
+                  <use href={sprite + "#icon-cup"}></use>
                 </NavIconSvg>
                 Турніри
               </NavLinkStyled>

src/components/LastUpdateSection/LastUpdateSection.jsx

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

src/components/StagesList/StagesItem.jsx

@@ -0,0 +1,42 @@
+import { format } from "date-fns";
+import ukLocale from "date-fns/locale/uk";
+import { Item, StagesItemText, StagesItemWrap } from "./StagesList-styled";
+import { membersApi } from "../../Api/ApiRequest";
+
+export const StagesItem = ({ el, index }) => {
+  const members = membersApi();
+  const { member_id } = el?.players?.reduce((acc, curr) => {
+    if (
+      curr.win > acc.win ||
+      (curr.win === acc.win && curr.defeat < acc.defeat)
+    ) {
+      return curr;
+    } else {
+      return acc;
+    }
+  });
+
+  const winner = members.find((member) => member.id === member_id);
+  const winnerName = winner ? winner.name : "Не знайдено";
+
+  return (
+    <>
+      <Item id={el.id}>
+        <StagesItemWrap>
+          <StagesItemText>{index + 1}.</StagesItemText>
+
+          <StagesItemText>
+            {format(new Date(el.date), " d MMMM yyyyр.", {
+              locale: ukLocale,
+            })}
+          </StagesItemText>
+          <StagesItemText>
+            {el.date === "2024-04-7" || el.date === "2024-04-21"
+              ? "Приховано"
+              : winnerName}
+          </StagesItemText>
+        </StagesItemWrap>
+      </Item>
+    </>
+  );
+};

src/components/StagesList/StagesList-styled.jsx

@@ -0,0 +1,133 @@
+import styled from "styled-components";
+
+export const Section = styled.section`
+  padding-bottom: 50px;
+  min-height: 800px;
+  background-color: var(--secondary-white-color);
+`;
+
+export const List = styled.ul``;
+
+export const Item = styled.li`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 50px;
+
+  &:nth-child(odd) {
+    background-color: var(--primary-white-color);
+  }
+
+  &:nth-child(even) {
+    background-color: var(--secondary-white-color);
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  @media screen and (min-width: 1200px) {
+    &:hover {
+      background-color: var(--primary-black-color);
+      color: var(--primary-white-color);
+    }
+  }
+`;
+
+export const StagesItemWrap = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding-left: 24px;
+  padding-right: 24px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
+  width: 100%;
+  height: 100%;
+`;
+
+export const StagesItemText = styled.p`
+  overflow: hidden;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  height: 100%;
+
+  font-size: 16px;
+  font-weight: 400;
+
+  &:nth-child(1) {
+    width: 35px;
+  }
+
+  &:nth-child(2) {
+    width: 140px;
+    flex-grow: 1;
+  }
+
+  &:nth-child(3) {
+    width: 130px;
+    justify-content: right;
+    text-align: right;
+
+    @media screen and (min-width: 450px) {
+      width: 150px;
+    }
+  }
+`;
+
+export const Heading = styled.div`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100px;
+  background-color: var(--tertiary-white-color);
+  color: var(--primary-black-color);
+`;
+
+export const HeadingWrap = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding-left: 24px;
+  padding-right: 24px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
+  width: 100%;
+  height: 100%;
+`;
+
+export const HeadingText = styled.div`
+  overflow: hidden;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  height: 100%;
+
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.6;
+
+  &:nth-child(1) {
+    width: 35px;
+  }
+
+  &:nth-child(2) {
+    width: 140px;
+    flex-grow: 1;
+  }
+
+  &:nth-child(3) {
+    width: 120px;
+    justify-content: right;
+    text-align: right;
+
+    @media screen and (min-width: 450px) {
+      width: 150px;
+    }
+  }
+`;

src/components/StagesList/StagesList.jsx

@@ -0,0 +1,25 @@
+import { useLocation } from "react-router-dom";
+import { TitleSection } from "../TitleSection/TitleSection";
+import { StagesItem } from "./StagesItem";
+import { List, Section } from "./StagesList-styled";
+import { StagesListHeading } from "./StagesListHeading";
+
+export const StagesList = () => {
+  const { state } = useLocation();
+  return (
+    <>
+      <Section>
+        <TitleSection
+          icon={"#icon-medal"}
+          title={"Кількість етапів: " + state?.stages?.length}
+        />
+        <List>
+          <StagesListHeading />
+          {state?.stages?.map((el, index) => (
+            <StagesItem key={el.date} el={el} index={index} />
+          ))}
+        </List>
+      </Section>
+    </>
+  );
+};

src/components/StagesList/StagesListHeading.jsx

@@ -0,0 +1,16 @@
+import { Heading, HeadingText, HeadingWrap } from "./StagesList-styled";
+
+export const StagesListHeading = () => {
+  return (
+    <>
+      <Heading style={{ height: "50px" }}>
+        <HeadingWrap>
+          <HeadingText>№</HeadingText>
+          <HeadingText>Дата проведення</HeadingText>
+
+          <HeadingText>Переможець</HeadingText>
+        </HeadingWrap>
+      </Heading>
+    </>
+  );
+};

src/components/TournamentsList/TournamentsItem.jsx

@@ -1,3 +1,4 @@
+import { useNavigate } from "react-router-dom";
 import { TournamentLogo } from "../Logo/Logo";
 import {
   Item,
@@ -6,9 +7,15 @@ import {
 } from "./TournamentsList-styled";
 
 export const TournamentsItem = ({ el, index }) => {
+  const navigate = useNavigate();
+
+  const handleItemClick = () => {
+    navigate(el.id, { state: { stages: el.stages } });
+  };
+
   return (
     <>
-      <Item id={el.id}>
+      <Item id={el.id} onClick={handleItemClick}>
         <MembersItemWrap>
           <MembersItemText>{index + 1}.</MembersItemText>
           <TournamentLogo path={el.logo} />

src/components/TournamentsList/TournamentsList.jsx

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

src/index.css

@@ -15,10 +15,12 @@
 
   --primary-white-color: #ffffff;
   --secondary-white-color: #f7f7f7;
+  --tertiary-white-color: #d9ffdc;
 
   --primary-grey-color: #bdbdbd;
   --secondary-grey-color: #9f9f9f;
 
+
   --type-kid-color: #b7ff00;
   --type-amateur-color: #6cff4b;
   --type-semiprofi-color: #00ff8c;