From b7065344e84039c58243c72353939c3d24a703fd Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Wed, 27 Jul 2022 16:01:20 +0500
Subject: [PATCH] contact page api intergrated

---
 src/components/contact/ContactForm.tsx | 159 +++++++++++++++++--------
 src/helpers/apiRequests.ts             |  10 ++
 src/links.ts                           |   2 +
 src/pages/Structure.tsx                |  37 +++++-
 4 files changed, 154 insertions(+), 54 deletions(-)

diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx
index f6aa2c4..dab3502 100644
--- a/src/components/contact/ContactForm.tsx
+++ b/src/components/contact/ContactForm.tsx
@@ -1,8 +1,14 @@
 // Modules
+import React, { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 
 // Images
 import board from "../../images/board.jpg";
 
+// Helpers
+import { getContact } from "../../helpers/apiRequests";
+import { highlightColor } from "../../helpers/otherVariables";
+
 // Icons
 import forward from "../../icons/arrow-forward.svg";
 import email from "../../icons/email-black.svg";
@@ -14,6 +20,12 @@ import ig from "../../icons/instagram-grey.svg";
 import twitter from "../../icons/twitter-gray.svg";
 
 const ContactForm = () => {
+  const [contact, setContact]: [any, React.Dispatch<any>] = useState();
+
+  useEffect(() => {
+    getContact(setContact);
+  }, []);
+
   return (
     <form
       className="contact-form"
@@ -42,60 +54,111 @@ const ContactForm = () => {
         </div>
         <div className="contact-form-right-middle">
           <div className="contact-form-link">
-            <a
-              className="contact-form-link-left"
-              target="_blank"
-              rel="noreferrer"
-              href="tel:+99312468787"
-            >
-              <div className="link-icon">
-                <img src={phone} alt="" />
-              </div>
-              <span>+993 12 46-87-87</span>
-            </a>
+            {contact ? (
+              <a
+                className="contact-form-link-left"
+                target="_blank"
+                rel="noreferrer"
+                href={"tel:" + contact[0].phone}
+              >
+                <div className="link-icon">
+                  <img src={phone} alt="" />
+                </div>
+                <span>{contact[0].phone}</span>
+              </a>
+            ) : (
+              <Skeleton
+                highlightColor={highlightColor}
+                height={"1.9rem"}
+                style={{ minWidth: "12rem" }}
+                width={"100%"}
+              />
+            )}
             <div className="contact-form-link-right">
-              <a
-                href="/"
-                target="_blank"
-                rel="noreferrer"
-                className="link-icon"
-              >
-                <img src={ig} alt="" />
-              </a>
-              <a
-                href="/"
-                target="_blank"
-                rel="noreferrer"
-                className="link-icon"
-              >
-                <img src={twitter} alt="" />
-              </a>
+              {contact ? (
+                <a
+                  href={contact[0].instagram}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="link-icon"
+                >
+                  <img src={ig} alt="" />
+                </a>
+              ) : (
+                <Skeleton
+                  height={"3rem"}
+                  width={"3rem"}
+                  highlightColor={highlightColor}
+                />
+              )}
+              {contact ? (
+                <a
+                  href={contact[0].twitter}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="link-icon"
+                >
+                  <img src={twitter} alt="" />
+                </a>
+              ) : (
+                <Skeleton
+                  height={"3rem"}
+                  width={"3rem"}
+                  highlightColor={highlightColor}
+                />
+              )}
             </div>
           </div>
           <div className="contact-form-link">
-            <div className="contact-form-link-left">
-              <div className="link-icon">
-                <img src={pin} alt="" />
+            {contact ? (
+              <div className="contact-form-link-left">
+                <div className="link-icon">
+                  <img src={pin} alt="" />
+                </div>
+                <span>{contact[0].address}</span>
               </div>
-              <span>Atatürk köçesi 80, Aşgabat 744000, Туркменистан</span>
-            </div>
+            ) : (
+              <Skeleton
+                height={"1.9rem"}
+                style={{ minWidth: "25rem" }}
+                width={"100%"}
+                highlightColor={highlightColor}
+              />
+            )}
+
             <div className="contact-form-link-right">
-              <a
-                href="/"
-                target="_blank"
-                rel="noreferrer"
-                className="link-icon"
-              >
-                <img src={yt} alt="" />
-              </a>
-              <a
-                href="/"
-                target="_blank"
-                rel="noreferrer"
-                className="link-icon"
-              >
-                <img src={fb} alt="" />
-              </a>
+              {contact ? (
+                <a
+                  href={contact[0].youtube}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="link-icon"
+                >
+                  <img src={yt} alt="" />
+                </a>
+              ) : (
+                <Skeleton
+                  height={"3rem"}
+                  width={"3rem"}
+                  highlightColor={highlightColor}
+                />
+              )}
+              {contact ? (
+                <a
+                  href={contact[0].facebook}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="link-icon"
+                >
+                  <img src={fb} alt="" />
+                </a>
+              ) : (
+                <Skeleton
+                  height={"3rem"}
+                  width={"3rem"}
+                  highlightColor={highlightColor}
+                />
+              )}
             </div>
           </div>
         </div>
diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts
index 7dcaef9..64c9272 100644
--- a/src/helpers/apiRequests.ts
+++ b/src/helpers/apiRequests.ts
@@ -13,6 +13,7 @@ import {
   post,
   videos,
   structure,
+  contacts,
 } from "../links";
 import React from "react";
 
@@ -102,3 +103,12 @@ export const getStructure = (setState: any) => {
     })
     .catch();
 };
+
+export const getContact = (setState: any) => {
+  axios
+    .get(contacts)
+    .then((res) => {
+      setState(res.data.data);
+    })
+    .catch();
+};
diff --git a/src/links.ts b/src/links.ts
index 1bb1c2a..a560223 100644
--- a/src/links.ts
+++ b/src/links.ts
@@ -15,3 +15,5 @@ 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";
+
+export const contacts: string = hosting + "/api/v1/contact-info";
diff --git a/src/pages/Structure.tsx b/src/pages/Structure.tsx
index 103413e..99d4988 100644
--- a/src/pages/Structure.tsx
+++ b/src/pages/Structure.tsx
@@ -9,6 +9,7 @@ import SectionTitle from "../components/global/SectionTitle";
 
 // Helpers
 import { getStructure } from "../helpers/apiRequests";
+import { highlightColor } from "../helpers/otherVariables";
 
 // Links
 import { hosting } from "../links";
@@ -65,18 +66,42 @@ const Structure = () => {
                     className="person-left"
                     style={{ width: "100%", maxWidth: "40%" }}
                   >
-                    <Skeleton height={"25rem"} width={"100%"} />
+                    <Skeleton
+                      height={"25rem"}
+                      width={"100%"}
+                      highlightColor={highlightColor}
+                    />
                   </div>
                   <div
                     className="person-right"
                     style={{ width: "100%", maxWidth: "60%" }}
                   >
-                    <Skeleton height={"3.3rem"} width={"70%"} />
-                    <Skeleton height={"3.8rem"} width={"80%"} />
+                    <Skeleton
+                      height={"3.3rem"}
+                      width={"70%"}
+                      highlightColor={highlightColor}
+                    />
+                    <Skeleton
+                      height={"3.8rem"}
+                      width={"80%"}
+                      highlightColor={highlightColor}
+                    />
                     <div className="person-right-bottom">
-                      <Skeleton height={"2.2rem"} width={"80%"} />
-                      <Skeleton height={"2.2rem"} width={"80%"} />
-                      <Skeleton height={"2.2rem"} width={"80%"} />
+                      <Skeleton
+                        height={"2.2rem"}
+                        width={"80%"}
+                        highlightColor={highlightColor}
+                      />
+                      <Skeleton
+                        height={"2.2rem"}
+                        width={"80%"}
+                        highlightColor={highlightColor}
+                      />
+                      <Skeleton
+                        height={"2.2rem"}
+                        width={"80%"}
+                        highlightColor={highlightColor}
+                      />
                     </div>
                   </div>
                 </div>