From 01b80c0023c64754641f8939b00bc9b83eca7e24 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Thu, 9 Feb 2023 14:25:28 +0500
Subject: [PATCH] api

---
 src/components/header/SubNav.tsx | 100 ++++++++++---------------------
 src/styles/_nav.scss             |   2 +-
 src/styles/style.scss            |  37 ++++++------
 3 files changed, 51 insertions(+), 88 deletions(-)

diff --git a/src/components/header/SubNav.tsx b/src/components/header/SubNav.tsx
index a9c019b..1beafdf 100644
--- a/src/components/header/SubNav.tsx
+++ b/src/components/header/SubNav.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 
 // Types
 import { RootState } from "../../types/store.types";
+import { ICategoriesData } from "../../types/data.types";
 
 // Actions
 import { setActiveLink } from "../../actions/setActiveLink.action";
@@ -18,52 +19,8 @@ import { linkMotion } from "../../animations/subNav.animations";
 import { Api } from "../../api/Api";
 import { url } from "../../url";
 
-interface subNavDataType {
-  data: string;
-  link: string;
-}
-const subNavData: subNavDataType[] = [
-  {
-    data: "Главная",
-    link: "/",
-  },
-  {
-    data: "В Туркменистане",
-    link: "/1",
-  },
-  {
-    data: "Новости",
-    link: "/2",
-  },
-  {
-    data: "В мире",
-    link: "/3",
-  },
-  {
-    data: "Политика",
-    link: "/4",
-  },
-  {
-    data: "Экономика",
-    link: "/5",
-  },
-  {
-    data: "Спорт",
-    link: "/6",
-  },
-  {
-    data: "Культура",
-    link: "/7",
-  },
-  {
-    data: "Общество",
-    link: "/8",
-  },
-  {
-    data: "Наука и Технологии",
-    link: "/9",
-  },
-];
+// Components
+import Loader from "../global/Loader";
 
 const SubNav = () => {
   const activeLink = useSelector<RootState, RootState["activeLink"]["active"]>(
@@ -79,7 +36,7 @@ const SubNav = () => {
     dispatch(setActiveLink(active));
   };
 
-  const [data, setData] = useState<any>();
+  const [data, setData] = useState<ICategoriesData>();
 
   // Api
   const api = new Api(url + "/categories");
@@ -87,33 +44,38 @@ const SubNav = () => {
   useEffect(() => {
     api.get(data, setData);
   }, [language]);
-  console.log(data);
 
   return (
     <nav className="subnav">
       <div className="container">
         <ul className="subnav-inner">
-          {subNavData.map((subNavEl: subNavDataType, index: number) => {
-            return (
-              <motion.li
-                key={uuidv4()}
-                initial={linkMotion.rest}
-                animate={
-                  activeLink === index + 1 ? linkMotion.active : linkMotion.rest
-                }
-              >
-                <motion.div>
-                  <Link
-                    to="/"
-                    onClick={() => onClickLink(index + 1)}
-                    className={activeLink === index + 1 ? "active" : ""}
-                  >
-                    {subNavEl.data}
-                  </Link>
-                </motion.div>
-              </motion.li>
-            );
-          })}
+          {data ? (
+            data.data.map((dataEl, index) => {
+              return (
+                <motion.li
+                  key={uuidv4()}
+                  initial={linkMotion.rest}
+                  animate={
+                    activeLink === index + 1
+                      ? linkMotion.active
+                      : linkMotion.rest
+                  }
+                >
+                  <motion.div>
+                    <Link
+                      to="/"
+                      onClick={() => onClickLink(index + 1)}
+                      className={activeLink === index + 1 ? "active" : ""}
+                    >
+                      {dataEl.name}
+                    </Link>
+                  </motion.div>
+                </motion.li>
+              );
+            })
+          ) : (
+            <Loader />
+          )}
         </ul>
       </div>
     </nav>
diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
index f072754..a4a0423 100644
--- a/src/styles/_nav.scss
+++ b/src/styles/_nav.scss
@@ -107,7 +107,7 @@
   display: flex;
   align-items: center;
   gap: 2.4rem;
-  justify-content: space-between;
+  // justify-content: space-between;
 
   li {
     color: $black;
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 234a7d0..4c937b3 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,18 +1,19 @@
-@import './variables';
-@import './mixins';
-@import './general';
-@import './nav';
-@import './main';
-@import './videos';
-@import './section-title';
-@import './footer';
-@import './news';
-@import './newsCategory';
-@import './newsDate';
-@import './newsScroll';
-@import './asideNews';
-@import './aside';
-@import './news-section';
-@import './news-article';
-@import './category';
-@import './calendar';
+@import "./variables";
+@import "./mixins";
+@import "./general";
+@import "./nav";
+@import "./main";
+@import "./videos";
+@import "./section-title";
+@import "./footer";
+@import "./news";
+@import "./newsCategory";
+@import "./newsDate";
+@import "./newsScroll";
+@import "./asideNews";
+@import "./aside";
+@import "./news-section";
+@import "./news-article";
+@import "./category";
+@import "./calendar";
+@import "./loader";