From cecba1099289c0a740ad651390dd15083e5ada32 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Sat, 6 Aug 2022 01:57:16 +0500
Subject: [PATCH] Tournaments page done

---
 src/components/tournaments/Tournament.tsx | 32 ++++++++
 src/pages/Tournaments.tsx                 | 93 ++++++++++++++++++++---
 src/styles/_tournaments.scss              | 62 +++++++++++++++
 3 files changed, 178 insertions(+), 9 deletions(-)
 create mode 100644 src/components/tournaments/Tournament.tsx

diff --git a/src/components/tournaments/Tournament.tsx b/src/components/tournaments/Tournament.tsx
new file mode 100644
index 0000000..899783a
--- /dev/null
+++ b/src/components/tournaments/Tournament.tsx
@@ -0,0 +1,32 @@
+// Modules
+import { Link } from "react-router-dom";
+
+// Types
+interface Props {
+  img: string;
+  name: string;
+  start: string;
+  end: string;
+  place: string;
+}
+
+const Tournament = ({ img, name, start, end, place }: Props) => {
+  return (
+    <Link to={"/"} className="tournament">
+      <div className="tournament-top">
+        <div></div>
+        <img src={img} alt="" />
+      </div>
+      <div className="tournament-bottom">
+        <h3>{name}</h3>
+        <p>
+          <span>{`${start} - ${end}`}</span>
+          <span className="separator">|</span>
+          <span>{place}</span>
+        </p>
+      </div>
+    </Link>
+  );
+};
+
+export default Tournament;
diff --git a/src/pages/Tournaments.tsx b/src/pages/Tournaments.tsx
index 4dbb485..2f90568 100644
--- a/src/pages/Tournaments.tsx
+++ b/src/pages/Tournaments.tsx
@@ -1,27 +1,102 @@
 // Modules
+import React, { useState, useEffect } from "react";
+import { v4 as uuidv4 } from "uuid";
+import Skeleton from "react-loading-skeleton";
+
+// Helpers
+import { getEvents } from "../helpers/apiRequests";
+import { dateParser } from "../helpers/dateParser";
+import { highlightColor } from "../helpers/otherVariables";
 
 // Components
 import SectionTitle from "../components/global/SectionTitle";
+import Tournament from "../components/tournaments/Tournament";
 
 // Images
 import match from "../images/match.jpg";
 
 const Tournaments = () => {
+  const [tournaments, setTournaments]: [any, React.Dispatch<any>] = useState();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    getEvents(setTournaments);
+  }, []);
   return (
     <main className="tournaments">
       <div className="container">
         <div className="tournaments-inner">
           <SectionTitle title="Турниры" />
           <div className="tournaments-wrapper">
-            <div
-              className="tournaments-head"
-              style={{
-                background: `linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.9) 0.01%, rgba(0, 0, 0, 0.4) 100%), url(${match}), no-repeat`,
-              }}
-            >
-              <span>25 nov - 16 dec</span>
-              <h2>FIDE WORLD CHAMPIONSHIP MATCH</h2>
-              <span>Dubai, UAE, 2021</span>
+            {tournaments ? (
+              tournaments.map((tournament: any) => {
+                if (tournament.current === 1) {
+                  return (
+                    <div
+                      key={uuidv4()}
+                      className="tournaments-head"
+                      style={{
+                        background: `linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.9) 0.01%, rgba(0, 0, 0, 0.4) 100%), url(${match}), no-repeat`,
+                      }}
+                    >
+                      <span>{`${dateParser(
+                        tournament.events[0].start.split(" ")[0]
+                      )} - ${dateParser(
+                        tournament.events[0].end.split(" ")[0]
+                      )}`}</span>
+                      <h2>{tournament.events[0].name}</h2>
+                      <span>{tournament.events[0].place}</span>
+                    </div>
+                  );
+                }
+              })
+            ) : (
+              <Skeleton
+                highlightColor={highlightColor}
+                width={"100%"}
+                height={"36.2rem"}
+              />
+            )}
+            <div className="tournaments-lower">
+              {tournaments
+                ? tournaments.map((tournament: any) => {
+                    if (tournament.current !== "1") {
+                      return (
+                        <Tournament
+                          key={uuidv4()}
+                          img={match}
+                          name={tournament.events[0].name}
+                          start={dateParser(
+                            tournament.events[0].start.split(" ")[0]
+                          )}
+                          end={dateParser(
+                            tournament.events[0].end.split(" ")[0]
+                          )}
+                          place={tournament.events[0].place}
+                        />
+                      );
+                    }
+                  })
+                : ["", "", "", "", "", ""].map(() => {
+                    return (
+                      <div key={uuidv4()}>
+                        <Skeleton
+                          highlightColor={highlightColor}
+                          width={"100%"}
+                          height={"26rem"}
+                          style={{ marginBottom: "3.2rem" }}
+                        />
+                        <Skeleton
+                          highlightColor={highlightColor}
+                          width={"100%"}
+                          height={"2.5rem"}
+                        />
+                      </div>
+                    );
+                  })}
             </div>
           </div>
         </div>
diff --git a/src/styles/_tournaments.scss b/src/styles/_tournaments.scss
index 1354422..02eaa52 100644
--- a/src/styles/_tournaments.scss
+++ b/src/styles/_tournaments.scss
@@ -13,6 +13,7 @@
 
 .tournaments-head {
   background-position: 60% top !important;
+  background-size: cover !important;
   padding: 5.6rem 4rem;
   display: flex;
   flex-direction: column;
@@ -37,3 +38,64 @@
   width: 100%;
   min-height: 36.2rem;
 }
+
+.tournaments-lower {
+  @include grid($row: false, $layout: repeat(3, 1fr));
+  row-gap: 4rem;
+  column-gap: 8.5rem;
+}
+
+.tournament-top {
+  position: relative;
+  width: 100%;
+  max-height: 26rem;
+
+  div {
+    z-index: 3;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    content: "";
+  }
+
+  img {
+    width: 100%;
+    object-fit: cover;
+  }
+}
+
+.tournament-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  border: 0.1rem solid #cecece;
+  border-top: none;
+  padding: 3.2rem 2.4rem;
+
+  h3 {
+    font-size: 2.4rem;
+    font-weight: bold;
+    color: $base-green;
+  }
+
+  p {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
+
+  span {
+    font-size: 1.8rem;
+    line-height: 2.5rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .separator {
+    color: $base-green;
+  }
+}