From 15d71cb6ff92dfb400ff6a1c431306c5b9be0598 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <you@example.com>
Date: Tue, 16 Aug 2022 14:21:41 +0500
Subject: [PATCH] player info page started

---
 src/App.tsx                     |   2 +
 src/helpers/apiRequests.ts      |   9 +++
 src/pages/PlayerProfile.tsx     | 127 ++++++++++++++++++++++++++++++++
 src/styles/_player-profile.scss |  84 +++++++++++++++++++++
 src/styles/style.scss           |   1 +
 5 files changed, 223 insertions(+)
 create mode 100644 src/pages/PlayerProfile.tsx
 create mode 100644 src/styles/_player-profile.scss

diff --git a/src/App.tsx b/src/App.tsx
index 75c33b8..6b237e4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import Structure from "./pages/Structure";
 import Contacts from "./pages/Contact";
 import AboutUs from "./pages/AboutUs";
 import Tournaments from "./pages/Tournaments";
+import PlayerProfile from "./pages/PlayerProfile";
 
 const App = () => {
   // Types
@@ -68,6 +69,7 @@ const App = () => {
             <Route path="/contact" element={<Contacts />} />
             <Route path="/about-us" element={<AboutUs />} />
             <Route path="/tournaments" element={<Tournaments />} />
+            <Route path="/player/:playerId" element={<PlayerProfile />} />
           </Routes>
         </div>
         <Footer
diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts
index d63c682..c72ee0b 100644
--- a/src/helpers/apiRequests.ts
+++ b/src/helpers/apiRequests.ts
@@ -142,3 +142,12 @@ export const getEvents = (setState: any) => {
     })
     .catch();
 };
+
+export const getPlayerInfo = (setState: any, link: string) => {
+  axios
+    .get(link)
+    .then((res) => {
+      setState(res.data.data);
+    })
+    .catch();
+};
diff --git a/src/pages/PlayerProfile.tsx b/src/pages/PlayerProfile.tsx
new file mode 100644
index 0000000..a2dd8e9
--- /dev/null
+++ b/src/pages/PlayerProfile.tsx
@@ -0,0 +1,127 @@
+// Modules
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+// Helpers
+import { getPlayerInfo } from "../helpers/apiRequests";
+
+// Links
+import { hosting } from "../links";
+import { players } from "../links";
+import Rating from "./Rating";
+
+const PlayerProfile = () => {
+  const [playerInfo, setPlayerInfo]: [any, React.Dispatch<any>] = useState();
+  const { playerId } = useParams();
+
+  useEffect(() => {
+    getPlayerInfo(setPlayerInfo, `${players}/${playerId}`);
+  }, []);
+
+  return (
+    <main className="pp">
+      <div className="container">
+        <div className="pp-inner">
+          <div className="pp-left">
+            {playerInfo ? (
+              <div>
+                <img src={hosting + playerInfo[0].img} alt="" />
+              </div>
+            ) : (
+              ""
+            )}
+          </div>
+          <div className="pp-right">
+            <div className="pp-right-top">
+              {playerInfo ? <h3>{playerInfo[0].name}</h3> : ""}
+              <div className="pp-right-top-content">
+                <ul>
+                  {playerInfo ? (
+                    <li>
+                      <span>ID</span>
+                      <p>{playerInfo[0].id}</p>
+                    </li>
+                  ) : (
+                    ""
+                  )}
+                  {playerInfo ? (
+                    <li>
+                      <span>Звание</span>
+                      <p>
+                        {/* {playerInfo[0].title} */}
+                        Гроссмейстер
+                      </p>
+                    </li>
+                  ) : (
+                    ""
+                  )}
+                  {playerInfo ? (
+                    <li>
+                      <span>Год рождения</span>
+                      <p>
+                        {/* {playerInfo[0].date_of_birth} */}
+                        1990
+                      </p>
+                    </li>
+                  ) : (
+                    ""
+                  )}
+                </ul>
+              </div>
+            </div>
+            <div className="pp-right-bottom">
+              <h3>Rating</h3>
+              <div className="pp-right-bottom-content">
+                <ul>
+                  {playerInfo ? (
+                    <li>
+                      <span>Classic</span>
+                      <p>{playerInfo[0].average}</p>
+                    </li>
+                  ) : (
+                    ""
+                  )}
+                  {playerInfo ? (
+                    <li>
+                      <span>Rapid</span>
+                      <p>
+                        {/* {playerInfo[0].rapid} */}
+                        2847
+                      </p>
+                    </li>
+                  ) : (
+                    ""
+                  )}
+                  {playerInfo ? (
+                    <li>
+                      <span>Blitz</span>
+                      <p>
+                        {/* {playerInfo[0].blitz} */}
+                        2847
+                      </p>
+                    </li>
+                  ) : (
+                    ""
+                  )}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default PlayerProfile;
+
+// 0:
+// average: 2864
+// id: 1
+// img: "/players/image 12.png"
+// name: "Carlsen, Magnus"
+// national: 0
+// note: ""
+// [[Prototype]]: Object
+// length: 1
+// [[Prototype]]: Array(0)
diff --git a/src/styles/_player-profile.scss b/src/styles/_player-profile.scss
new file mode 100644
index 0000000..7a2271c
--- /dev/null
+++ b/src/styles/_player-profile.scss
@@ -0,0 +1,84 @@
+.pp {
+  padding: 8rem 0;
+}
+
+.pp-inner {
+  padding: 4.8rem;
+  box-shadow: 0px 0px 15px 0px #00000040;
+  display: grid;
+  grid-template-columns: 1fr 1.7fr;
+  gap: 8rem;
+}
+
+.pp-left {
+  div {
+    max-width: 35rem;
+    max-height: 43.8rem;
+    width: 100%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
+.pp-right {
+  display: flex;
+  flex-direction: column;
+  gap: 4.8rem;
+}
+
+.pp-right-top,
+.pp-right-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 3rem;
+
+    li {
+      width: 100%;
+
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #fff;
+        font-size: 1.8rem;
+        padding: 1.35rem;
+        display: block;
+        background: $base-green;
+        width: 100%;
+        text-align: center;
+      }
+
+      p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 1.8rem;
+        padding: 1.35rem;
+        display: block;
+        width: 100%;
+        text-align: center;
+        background: #f8f8f8;
+      }
+    }
+  }
+
+  h3 {
+    font-size: 2.8rem;
+  }
+}
+
+.pp-right-top {
+  h3 {
+    color: $base-green;
+  }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 5e181d5..a3fd3b1 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -18,3 +18,4 @@
 @import "./about-us";
 @import "./tournaments";
 @import "./burger";
+@import "./player-profile";