From c1efaab359c0e63f87ba228d18929c39eecf4936 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Wed, 27 Jul 2022 15:39:14 +0500
Subject: [PATCH] structure page api integrated

---
 src/components/global/Nav.tsx |   2 +-
 src/helpers/apiRequests.ts    |  10 +++
 src/links.ts                  |   2 +
 src/pages/Structure.tsx       | 119 ++++++++++++++++++----------------
 4 files changed, 77 insertions(+), 56 deletions(-)

diff --git a/src/components/global/Nav.tsx b/src/components/global/Nav.tsx
index 2ea0b48..f8ab669 100644
--- a/src/components/global/Nav.tsx
+++ b/src/components/global/Nav.tsx
@@ -43,7 +43,7 @@ const Nav = ({ dropdown, setDropdown }: dropdown) => {
                     <Link to={"/"}>О федерации</Link>
                   </li>
                   <li>
-                    <Link to={"/"}>Структура федерации</Link>
+                    <Link to={"/structure"}>Структура федерации</Link>
                   </li>
                   <li>
                     <Link to={"/"}>О федерации</Link>
diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts
index c44871e..7dcaef9 100644
--- a/src/helpers/apiRequests.ts
+++ b/src/helpers/apiRequests.ts
@@ -12,6 +12,7 @@ import {
   postsAside,
   post,
   videos,
+  structure,
 } from "../links";
 import React from "react";
 
@@ -92,3 +93,12 @@ export const getVideos = (setState: any) => {
     })
     .catch();
 };
+
+export const getStructure = (setState: any) => {
+  axios
+    .get(structure)
+    .then((res) => {
+      setState(res.data.data);
+    })
+    .catch();
+};
diff --git a/src/links.ts b/src/links.ts
index 019f6f0..1bb1c2a 100644
--- a/src/links.ts
+++ b/src/links.ts
@@ -13,3 +13,5 @@ export const postsAside: string =
 export const post: string = hosting + "/api/v1/posts"; // /id ? locale
 
 export const videos: string = hosting + "/api/v1/videos";
+
+export const structure: string = hosting + "/api/v1/structure";
diff --git a/src/pages/Structure.tsx b/src/pages/Structure.tsx
index 91270cd..103413e 100644
--- a/src/pages/Structure.tsx
+++ b/src/pages/Structure.tsx
@@ -1,79 +1,88 @@
 // Modules
-import { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 import { v4 as uuidv4 } from "uuid";
 
 // Components
 import PersonInfo from "../components/structure/PersonInfo";
 import SectionTitle from "../components/global/SectionTitle";
 
-// Images
-import arkady from "../images/arkady.jpg";
-import sasha from "../images/sasha.jpg";
+// Helpers
+import { getStructure } from "../helpers/apiRequests";
 
-// Types
-import { personProps } from "../types/personProps";
-
-const personData: personProps[] = [
-  {
-    img: arkady,
-    position: "Assistant to the FIDE President",
-    name: "Kiselev, Konstantin",
-    email: "fidepresident@fide.com",
-    tel: "+993 65 65-65-65",
-    facebook: "@fidepresident",
-  },
-  {
-    img: sasha,
-    position: "FIDE President",
-    name: "Dvorkovich, Arkady",
-    email: "fidepresident@fide.com",
-    tel: "+993 65 65-65-65",
-    facebook: "@fidepresident",
-  },
-  {
-    img: arkady,
-    position: "Assistant to the FIDE President",
-    name: "Kiselev, Konstantin",
-    email: "fidepresident@fide.com",
-    tel: "+993 65 65-65-65",
-    facebook: "@fidepresident",
-  },
-  {
-    img: sasha,
-    position: "FIDE President",
-    name: "Dvorkovich, Arkady",
-    email: "fidepresident@fide.com",
-    tel: "+993 65 65-65-65",
-    facebook: "@fidepresident",
-  },
-];
+// Links
+import { hosting } from "../links";
 
 // Link: /structure
 
 const Structure = () => {
+  const [structureData, setStructureData]: [any, React.Dispatch<any>] =
+    useState();
+
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
+
+  useEffect(() => {
+    getStructure(setStructureData);
+  }, []);
   return (
     <main className="structure">
       <div className="container">
         <div className="structure-inner">
           <SectionTitle title={"Структура федерации"} />
-          <div className="structure-content">
-            {personData.map((person) => {
-              return (
-                <PersonInfo
+          {structureData ? (
+            <div className="structure-content">
+              {structureData.map((person: any) => {
+                return (
+                  <PersonInfo
+                    key={uuidv4()}
+                    img={hosting + person.img}
+                    email={person.email}
+                    name={person.name}
+                    position={person.job}
+                    tel={person.phone}
+                    facebook={person.facebook}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "4.8rem",
+              }}
+            >
+              {["", "", "", "", "", ""].map(() => (
+                <div
+                  className="person"
                   key={uuidv4()}
-                  img={person.img}
-                  email={person.email}
-                  name={person.name}
-                  position={person.position}
-                  tel={person.tel}
-                  facebook={person.facebook}
-                />
-              );
-            })}
-          </div>
+                  style={{ width: "100%" }}
+                >
+                  <div
+                    className="person-left"
+                    style={{ width: "100%", maxWidth: "40%" }}
+                  >
+                    <Skeleton height={"25rem"} width={"100%"} />
+                  </div>
+                  <div
+                    className="person-right"
+                    style={{ width: "100%", maxWidth: "60%" }}
+                  >
+                    <Skeleton height={"3.3rem"} width={"70%"} />
+                    <Skeleton height={"3.8rem"} width={"80%"} />
+                    <div className="person-right-bottom">
+                      <Skeleton height={"2.2rem"} width={"80%"} />
+                      <Skeleton height={"2.2rem"} width={"80%"} />
+                      <Skeleton height={"2.2rem"} width={"80%"} />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </div>
     </main>