From f366a5bff453c352e27aaeb22fff964802b89b6f Mon Sep 17 00:00:00 2001
From: M-Farmaha <115003821+M-Farmaha@users.noreply.github.com>
Date: Thu, 25 Apr 2024 03:44:30 +0300
Subject: [PATCH] added participants subpage
---
src/App.js | 2 +
.../ParticipantsList/ParticipantsItem.jsx | 29 +++
.../ParticipantsList-styled.jsx | 180 ++++++++++++++++++
.../ParticipantsList/ParticipantsList.jsx | 45 +++++
.../ParticipantsListHeading.jsx | 39 ++++
src/components/StagesList/StagesItem.jsx | 27 ++-
.../StagesList/StagesList-styled.jsx | 37 +++-
src/components/StagesList/StagesList.jsx | 20 +-
.../TitleSection/TitleSection-styled.jsx | 9 +-
src/components/TitleSection/TitleSection.jsx | 29 ++-
.../TournamentsList/TournamentsList.jsx | 1 +
src/sprite.svg | 16 ++
12 files changed, 408 insertions(+), 26 deletions(-)
create mode 100644 src/components/ParticipantsList/ParticipantsItem.jsx
create mode 100644 src/components/ParticipantsList/ParticipantsList-styled.jsx
create mode 100644 src/components/ParticipantsList/ParticipantsList.jsx
create mode 100644 src/components/ParticipantsList/ParticipantsListHeading.jsx
diff --git a/src/App.js b/src/App.js
index 8893199..297eecf 100644
--- 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() {
} />
} />
+ } />
}>
} />
diff --git a/src/components/ParticipantsList/ParticipantsItem.jsx b/src/components/ParticipantsList/ParticipantsItem.jsx
new file mode 100644
index 0000000..f29066a
--- /dev/null
+++ 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 (
+ <>
+ -
+
+ {index + 1}.
+
+ {participant?.name || "Невідомий учасник"}
+
+ {isHide ? "?" : el.win}
+
+ {isHide ? "?" : el.defeat}
+
+ {isHide ? "?" : "rank"}
+
+
+
+ );
+};
diff --git a/src/components/ParticipantsList/ParticipantsList-styled.jsx b/src/components/ParticipantsList/ParticipantsList-styled.jsx
new file mode 100644
index 0000000..0c7f745
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f94c08d
--- /dev/null
+++ 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 (
+ <>
+
+
+
+
+
+
+ {state?.players?.map((el, index) => (
+
+ ))}
+
+
+
+ );
+};
diff --git a/src/components/ParticipantsList/ParticipantsListHeading.jsx b/src/components/ParticipantsList/ParticipantsListHeading.jsx
new file mode 100644
index 0000000..5a20572
--- /dev/null
+++ 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 (
+ <>
+
+
+ №
+
+ Учасник
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/StagesList/StagesItem.jsx b/src/components/StagesList/StagesItem.jsx
index 1676d35..6ec5b8a 100644
--- 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 (
<>
- -
-
- {index + 1}.
+
-
+
+ {index + 1}.
-
+
{format(new Date(el.date), " d MMMM yyyyр.", {
locale: ukLocale,
})}
-
-
+
+
{el.date === "2024-04-07" || el.date === "2024-04-21"
? "Приховано"
: winnerName}
-
-
+
+
);
diff --git a/src/components/StagesList/StagesList-styled.jsx b/src/components/StagesList/StagesList-styled.jsx
index 675334d..7e609bb 100644
--- a/src/components/StagesList/StagesList-styled.jsx
+++ b/src/components/StagesList/StagesList-styled.jsx
@@ -34,7 +34,7 @@ export const Item = styled.li`
}
`;
-export const StagesItemWrap = styled.div`
+export const ItemWrap = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
@@ -48,7 +48,7 @@ export const StagesItemWrap = styled.div`
height: 100%;
`;
-export const StagesItemText = styled.p`
+export const ItemText = styled.p`
overflow: hidden;
display: flex;
justify-content: left;
@@ -131,3 +131,36 @@ export const HeadingText = styled.div`
}
}
`;
+
+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/StagesList/StagesList.jsx b/src/components/StagesList/StagesList.jsx
index 62edf4d..9f04a3c 100644
--- a/src/components/StagesList/StagesList.jsx
+++ b/src/components/StagesList/StagesList.jsx
@@ -1,18 +1,32 @@
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
import { TitleSection } from "../TitleSection/TitleSection";
import { StagesItem } from "./StagesItem";
-import { List, Section } from "./StagesList-styled";
+import { Button, ButtonIconSvg, List, Section } from "./StagesList-styled";
import { StagesListHeading } from "./StagesListHeading";
+import sprite from "../../sprite.svg";
export const StagesList = () => {
const { state } = useLocation();
+ const navigate = useNavigate();
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
return (
<>
+ >
+
+
{state?.stages?.map((el, index) => (
diff --git a/src/components/TitleSection/TitleSection-styled.jsx b/src/components/TitleSection/TitleSection-styled.jsx
index caa30d8..2e879c4 100644
--- a/src/components/TitleSection/TitleSection-styled.jsx
+++ b/src/components/TitleSection/TitleSection-styled.jsx
@@ -10,12 +10,19 @@ export const Section = styled.section`
color: var(--primary-white-color);
`;
-export const Title = styled.h2`
+export const SectionWrap = styled.div`
+ height: 80px;
max-width: 1200px;
padding: 24px;
margin-left: auto;
margin-right: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 20px;
+`;
+export const Title = styled.h2`
display: flex;
justify-content: left;
align-items: center;
diff --git a/src/components/TitleSection/TitleSection.jsx b/src/components/TitleSection/TitleSection.jsx
index c83fc07..7a30eb2 100644
--- a/src/components/TitleSection/TitleSection.jsx
+++ b/src/components/TitleSection/TitleSection.jsx
@@ -1,19 +1,28 @@
-import { IconSvg, IconWrap, Section, Title } from "./TitleSection-styled";
+import {
+ IconSvg,
+ IconWrap,
+ Section,
+ SectionWrap,
+ Title,
+} from "./TitleSection-styled";
import sprite from "../../sprite.svg";
-export const TitleSection = ({ icon, title }) => {
+export const TitleSection = ({ icon, title, children }) => {
return (
<>
-
- <IconWrap>
- <IconSvg>
- <use href={sprite + icon}></use>
- </IconSvg>
- </IconWrap>
- {title}
-
+
+
+ <IconWrap>
+ <IconSvg>
+ <use href={sprite + icon}></use>
+ </IconSvg>
+ </IconWrap>
+ {title}
+
+ {children}
+
);
diff --git a/src/components/TournamentsList/TournamentsList.jsx b/src/components/TournamentsList/TournamentsList.jsx
index 0996c3b..4287b7b 100644
--- a/src/components/TournamentsList/TournamentsList.jsx
+++ b/src/components/TournamentsList/TournamentsList.jsx
@@ -10,6 +10,7 @@ export const TournamentsList = ({ tournamentsArray, membersArray }) => {
icon={"#icon-cup"}
title={"Кількість турнірів: " + tournamentsArray.length}
/>
+
{tournamentsArray?.map((el, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+