added participants subpage

M-Farmaha · Apr 25, 2024 · f366a5b · f366a5b
1 parent c45dc23
commit f366a5b
Show file tree

Hide file tree

Showing 12 changed files with 408 additions and 26 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,6 +9,7 @@ import { ImageGalleryModal } from "./components/ImageGallery/ImageGalleryModal";
 import { MembersModal } from "./components/MembersList/MembersModal";
 import TournamentsPage from "./pages/TournamentsPage/TournamentsPage";
 import { StagesList } from "./components/StagesList/StagesList";
+import { ParticipantsList } from "./components/ParticipantsList/ParticipantsList";
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
 
             <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 />} />

diff --git a/src/components/ParticipantsList/ParticipantsItem.jsx b/src/components/ParticipantsList/ParticipantsItem.jsx
@@ -0,0 +1,29 @@
+import { Item, ItemText, ItemWrap } from "./ParticipantsList-styled";
+import { membersApi } from "../../Api/ApiRequest";
+import { useParams } from "react-router-dom";
+
+export const ParticipantsItem = ({ el, index }) => {
+  const { id } = useParams();
+  const members = membersApi();
+  const participant = members.find((member) => member.id === el.member_id);
+
+  const isHide = id === "2024-04-07" || id === "2024-04-21";
+
+  return (
+    <>
+      <Item id={el.member_id}>
+        <ItemWrap>
+          <ItemText>{index + 1}.</ItemText>
+
+          <ItemText>{participant?.name || "Невідомий учасник"}</ItemText>
+
+          <ItemText>{isHide ? "?" : el.win}</ItemText>
+
+          <ItemText>{isHide ? "?" : el.defeat}</ItemText>
+
+          <ItemText>{isHide ? "?" : "rank"}</ItemText>
+        </ItemWrap>
+      </Item>
+    </>
+  );
+};
diff --git a/src/components/ParticipantsList/ParticipantsList-styled.jsx b/src/components/ParticipantsList/ParticipantsList-styled.jsx
@@ -0,0 +1,180 @@
+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 ItemWrap = 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 ItemText = 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) {
+    min-width: 100px;
+    flex-grow: 1;
+  }
+
+  &:nth-child(3) {
+    min-width: 50px;
+    width: 10%;
+    justify-content: center;
+    border-right: 1px solid var(--primary-black-color);
+  }
+  &:nth-child(4) {
+    min-width: 50px;
+    width: 10%;
+    justify-content: center;
+  }
+  &:nth-child(5) {
+    min-width: 50px;
+    width: 10%;
+    justify-content: right;
+  }
+`;
+
+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) {
+    min-width: 100px;
+    flex-grow: 1;
+  }
+
+  &:nth-child(3) {
+    min-width: 50px;
+    width: 10%;
+    justify-content: center;
+    border-right: 1px solid var(--primary-black-color);
+  }
+  &:nth-child(4) {
+    min-width: 50px;
+    width: 10%;
+    justify-content: center;
+  }
+  &:nth-child(5) {
+    min-width: 50px;
+    width: 10%;
+    justify-content: right;
+  }
+`;
+
+export const Button = styled.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  flex-shrink: 0;
+
+  height: 50px;
+  padding: 12px;
+
+  border-radius: 50px;
+  background-color: transparent;
+  border: 2px solid var(--primary-white-color);
+  color: var(--primary-white-color);
+
+  font-size: 14px;
+  font-weight: 400;
+
+  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    border: 2px solid var(--accent-hover-color);
+    color: var(--accent-hover-color);
+  }
+`;
+
+export const ButtonIconSvg = styled.svg`
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+`;
diff --git a/src/components/ParticipantsList/ParticipantsList.jsx b/src/components/ParticipantsList/ParticipantsList.jsx
@@ -0,0 +1,45 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { TitleSection } from "../TitleSection/TitleSection";
+
+import {
+  Button,
+  ButtonIconSvg,
+  List,
+  Section,
+} from "./ParticipantsList-styled";
+import { ParticipantsListHeading } from "./ParticipantsListHeading";
+import sprite from "../../sprite.svg";
+import { ParticipantsItem } from "./ParticipantsItem";
+
+export const ParticipantsList = () => {
+  const { state } = useLocation();
+  const navigate = useNavigate();
+
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  return (
+    <>
+      <Section>
+        <TitleSection
+          icon={"#icon-users"}
+          title={"Кількість учасників: " + state?.players?.length}
+        >
+          <Button onClick={handleBack}>
+            <ButtonIconSvg>
+              <use href={sprite + "#icon-undo"}></use>
+            </ButtonIconSvg>
+            Назад
+          </Button>
+        </TitleSection>
+        <List>
+          <ParticipantsListHeading />
+          {state?.players?.map((el, index) => (
+            <ParticipantsItem key={el.member_id} el={el} index={index} />
+          ))}
+        </List>
+      </Section>
+    </>
+  );
+};
diff --git a/src/components/ParticipantsList/ParticipantsListHeading.jsx b/src/components/ParticipantsList/ParticipantsListHeading.jsx
@@ -0,0 +1,39 @@
+import {
+  ButtonIconSvg,
+  Heading,
+  HeadingText,
+  HeadingWrap,
+} from "./ParticipantsList-styled";
+import sprite from "../../sprite.svg";
+
+export const ParticipantsListHeading = () => {
+  return (
+    <>
+      <Heading style={{ height: "50px" }}>
+        <HeadingWrap>
+          <HeadingText>№</HeadingText>
+
+          <HeadingText>Учасник</HeadingText>
+
+          <HeadingText>
+            <ButtonIconSvg color="#00b64c">
+              <use href={sprite + "#icon-evil"}></use>
+            </ButtonIconSvg>
+          </HeadingText>
+
+          <HeadingText>
+            <ButtonIconSvg color="#b60000">
+              <use href={sprite + "#icon-sad"}></use>
+            </ButtonIconSvg>
+          </HeadingText>
+
+          <HeadingText>
+            <ButtonIconSvg color="#000000">
+              <use href={sprite + "#icon-star"}></use>
+            </ButtonIconSvg>
+          </HeadingText>
+        </HeadingWrap>
+      </Heading>
+    </>
+  );
+};
diff --git a/src/components/StagesList/StagesItem.jsx b/src/components/StagesList/StagesItem.jsx
@@ -1,9 +1,12 @@
 import { format } from "date-fns";
 import ukLocale from "date-fns/locale/uk";
-import { Item, StagesItemText, StagesItemWrap } from "./StagesList-styled";
+import { Item, ItemText, ItemWrap } from "./StagesList-styled";
 import { membersApi } from "../../Api/ApiRequest";
+import { useNavigate } from "react-router-dom";
 
 export const StagesItem = ({ el, index }) => {
+  const navigate = useNavigate();
+
   const members = membersApi();
   const { member_id } = el?.players?.reduce((acc, curr) => {
     if (
@@ -17,25 +20,29 @@ export const StagesItem = ({ el, index }) => {
   });
 
   const winner = members.find((member) => member.id === member_id);
-  const winnerName = winner ? winner.name : "Не знайдено";
+  const winnerName = winner ? winner?.name : "Не знайдено";
+
+  const handleItemClick = () => {
+    navigate(el.date, { state: { players: el.players } });
+  };
 
   return (
     <>
-      <Item id={el.id}>
-        <StagesItemWrap>
-          <StagesItemText>{index + 1}.</StagesItemText>
+      <Item id={el.date} onClick={handleItemClick}>
+        <ItemWrap>
+          <ItemText>{index + 1}.</ItemText>
 
-          <StagesItemText>
+          <ItemText>
             {format(new Date(el.date), " d MMMM yyyyр.", {
               locale: ukLocale,
             })}
-          </StagesItemText>
-          <StagesItemText>
+          </ItemText>
+          <ItemText>
             {el.date === "2024-04-07" || el.date === "2024-04-21"
               ? "Приховано"
               : winnerName}
-          </StagesItemText>
-        </StagesItemWrap>
+          </ItemText>
+        </ItemWrap>
       </Item>
     </>
   );