structure page api integrated

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>

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();
+};

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";

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>