From 343b5ab6dc1169f51b573d59a1556f946ea33653 Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Tue, 7 Mar 2023 15:15:01 +0500
Subject: [PATCH] categoryes lang added

---
 src/components/header/Nav.tsx          | 88 ++++++++++++--------------
 src/components/header/SubNav.tsx       | 65 ++++++++-----------
 src/components/header/SubNavLiMain.tsx | 42 ++++++------
 3 files changed, 87 insertions(+), 108 deletions(-)

diff --git a/src/components/header/Nav.tsx b/src/components/header/Nav.tsx
index 0b86a58..3cf2706 100644
--- a/src/components/header/Nav.tsx
+++ b/src/components/header/Nav.tsx
@@ -1,29 +1,29 @@
 // Modules
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { motion } from "framer-motion";
-import { Api } from "../../api/Api";
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Api } from '../../api/Api';
 
 // Icons
-import { ReactComponent as Logo } from "../../assets/icons/logo.svg";
-import { ReactComponent as Instagram } from "../../assets/icons/insta-black.svg";
-import { ReactComponent as Facebook } from "../../assets/icons/fb-black.svg";
-import { ReactComponent as TikTok } from "../../assets/icons/tiktok-black.svg";
+import { ReactComponent as Logo } from '../../assets/icons/logo.svg';
+import { ReactComponent as Instagram } from '../../assets/icons/insta-black.svg';
+import { ReactComponent as Facebook } from '../../assets/icons/fb-black.svg';
+import { ReactComponent as TikTok } from '../../assets/icons/tiktok-black.svg';
 
 // Components
-import Search from "./Search";
-import LanguageSelect from "./LanguageSelect";
+import Search from './Search';
+import LanguageSelect from './LanguageSelect';
 
 // Hooks
-import useMediaQuery from "../../hooks/useMediaQuery";
+import useMediaQuery from '../../hooks/useMediaQuery';
 
 // Animation
-import { searchMobileMotion } from "../../animations/search.animation";
+import { searchMobileMotion } from '../../animations/search.animation';
 
 const Nav = () => {
-  const isSmall = useMediaQuery("(max-width: 850px)");
+  const isSmall = useMediaQuery('(max-width: 850px)');
   const [isInputFocused, setIsInputFocused] = useState<boolean>(false);
-  const language = new Api("").language;
+  const language = new Api('').language;
   return (
     <nav className="nav">
       <div className="container">
@@ -36,40 +36,37 @@ const Nav = () => {
                 setIsInputFocused={setIsInputFocused}
               />
 
-              <LanguageSelect
-                isSmall={isSmall}
-                isInputFocused={isInputFocused}
-              />
+              <LanguageSelect isSmall={isSmall} isInputFocused={isInputFocused} />
             </div>
             <div className="nav-mid">
               <Link to="/">
                 <h1>
-                  {language === "TM"
-                    ? "Türkmenistan Habarlar Portaly"
-                    : language === "RU"
-                    ? "Туркменистан новостной портал"
-                    : language === "EN"
-                    ? "Turkmenistan news portal"
-                    : ""}
+                  {language === 'TM'
+                    ? 'Türkmenistan Habarlar Portaly'
+                    : language === 'RU'
+                    ? 'Туркменистан новостной портал'
+                    : language === 'EN'
+                    ? 'Turkmenistan news portal'
+                    : ''}
                 </h1>
               </Link>
             </div>
             <div className="nav-right">
               <ul>
                 <li>
-                  <a href="#" target={"_blank"}>
+                  <a href="#" target={'_blank'}>
                     <Instagram />
                     {/* <span>hhm@inst.com</span> */}
                   </a>
                 </li>
                 <li>
-                  <a href="#" target={"_blank"}>
+                  <a href="#" target={'_blank'}>
                     <Facebook />
                     {/* <span>hhm@face.com</span> */}
                   </a>
                 </li>
                 <li>
-                  <a href="#" target={"_blank"}>
+                  <a href="#" target={'_blank'}>
                     <TikTok />
                     {/* <span>@hhm</span> */}
                   </a>
@@ -81,30 +78,26 @@ const Nav = () => {
           <motion.div className="nav-inner mobile">
             <motion.div
               className="nav-mid"
-              initial={isSmall ? "logoRest" : {}}
-              animate={
-                isSmall ? (isInputFocused ? "logoActive" : "logoRest") : {}
-              }
-              variants={searchMobileMotion}
-            >
+              initial={isSmall ? 'logoRest' : {}}
+              animate={isSmall ? (isInputFocused ? 'logoActive' : 'logoRest') : {}}
+              variants={searchMobileMotion}>
               <Link to="/">
                 <h1>
-                  {language === "TM"
-                    ? "Türkmenistan Habarlar Portaly"
-                    : language === "RU"
-                    ? "Туркменистан новостной портал"
-                    : language === "EN"
-                    ? "Turkmenistan news portal"
-                    : ""}
+                  {language === 'TM'
+                    ? 'Türkmenistan Habarlar Portaly'
+                    : language === 'RU'
+                    ? 'Туркменистан новостной портал'
+                    : language === 'EN'
+                    ? 'Turkmenistan news portal'
+                    : ''}
                 </h1>
               </Link>
             </motion.div>
             <motion.div
               className="search-wrap"
-              initial={isSmall ? "rest" : {}}
-              animate={isSmall ? (isInputFocused ? "active" : "rest") : {}}
-              variants={searchMobileMotion}
-            >
+              initial={isSmall ? 'rest' : {}}
+              animate={isSmall ? (isInputFocused ? 'active' : 'rest') : {}}
+              variants={searchMobileMotion}>
               <Search
                 isSmall={isSmall}
                 isInputFocused={isInputFocused}
@@ -112,10 +105,7 @@ const Nav = () => {
               />
             </motion.div>
             <div className="lang-wrap">
-              <LanguageSelect
-                isSmall={isSmall}
-                isInputFocused={isInputFocused}
-              />
+              <LanguageSelect isSmall={isSmall} isInputFocused={isInputFocused} />
             </div>
           </motion.div>
         )}
diff --git a/src/components/header/SubNav.tsx b/src/components/header/SubNav.tsx
index 26cc497..98765f9 100644
--- a/src/components/header/SubNav.tsx
+++ b/src/components/header/SubNav.tsx
@@ -1,37 +1,34 @@
 // Modules
-import { useLocation } from "react-router-dom";
-import { v4 as uuidv4 } from "uuid";
-import { useDispatch, useSelector } from "react-redux";
-import { useEffect, useState } from "react";
+import { useLocation } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useState } from 'react';
 
 // Types
-import { ICategoryData, RootState } from "../../types/store.types";
-import { ICategoriesData } from "../../types/data.types";
+import { ICategoryData, RootState } from '../../types/store.types';
+import { ICategoriesData } from '../../types/data.types';
 
 // Actions
-import { setActiveLink } from "../../actions/setActiveLink.action";
+import { setActiveLink } from '../../actions/setActiveLink.action';
 
 // Api
-import { Api } from "../../api/Api";
-import { url } from "../../url";
-import { categoriesParams } from "../../api/params";
+import { Api } from '../../api/Api';
+import { url } from '../../url';
+import { categoriesParams } from '../../api/params';
 
 // Components
-import Loader from "../global/Loader";
-import SubNavLi from "./SubNavLi";
-import SubNavLiMain from "./SubNavLiMain";
-import { setCategories } from "../../actions/setData";
+import Loader from '../global/Loader';
+import SubNavLi from './SubNavLi';
+import SubNavLiMain from './SubNavLiMain';
+import { setCategories } from '../../actions/setData';
 
 const SubNav = () => {
-  const activeLink = useSelector<RootState, RootState["activeLink"]["active"]>(
-    (state) => state.activeLink.active
-  );
-  const language = useSelector<RootState, RootState["language"]["title"]>(
-    (state) => state.language.title
+  const activeLink = useSelector<RootState, RootState['activeLink']['active']>(
+    (state) => state.activeLink.active,
   );
 
-  const categories = useSelector<RootState, RootState["categories"]["data"]>(
-    (state) => state.categories.data
+  const categories = useSelector<RootState, RootState['categories']['data']>(
+    (state) => state.categories.data,
   );
 
   const dispatch = useDispatch();
@@ -41,40 +38,30 @@ const SubNav = () => {
   };
 
   // Api
-  const api = new Api(url + "/categories", categoriesParams);
+  const api = new Api(url + '/categories', categoriesParams);
+  const language = api.language;
 
   useEffect(() => {
-    api.get(categories, (data: ICategoryData["data"]) =>
-      dispatch(setCategories(data))
-    );
+    api.get(categories, (data: ICategoryData['data']) => dispatch(setCategories(data)));
   }, [language]);
 
   const location = useLocation();
   useEffect(() => {
-    if (!location.pathname.includes("category")) {
+    if (!location.pathname.includes('category')) {
       onClickLink(0);
       return;
     }
-    const category =
-      location.pathname.split("/")[location.pathname.split("/").length - 1];
+    const category = location.pathname.split('/')[location.pathname.split('/').length - 1];
     onClickLink(parseInt(category));
   }, [location]);
 
   return (
     <nav className="subnav">
       <div className="container">
-        <ul
-          className={`subnav-inner ${
-            !(categories.data[0].id > -1) ? "loading" : ""
-          }`}
-        >
+        <ul className={`subnav-inner ${!(categories.data[0].id > -1) ? 'loading' : ''}`}>
           {categories.data[0].id > -1 ? (
             <>
-              <SubNavLiMain
-                data={categories}
-                activeLink={activeLink}
-                onClickLink={onClickLink}
-              />
+              <SubNavLiMain data={categories} activeLink={activeLink} onClickLink={onClickLink} />
               {categories.data.map((dataEl, index) =>
                 index <= 4 ? (
                   <SubNavLi
@@ -83,7 +70,7 @@ const SubNav = () => {
                     activeLink={activeLink}
                     onClickLink={onClickLink}
                   />
-                ) : null
+                ) : null,
               )}
             </>
           ) : (
diff --git a/src/components/header/SubNavLiMain.tsx b/src/components/header/SubNavLiMain.tsx
index 601e2cc..68d2357 100644
--- a/src/components/header/SubNavLiMain.tsx
+++ b/src/components/header/SubNavLiMain.tsx
@@ -1,16 +1,17 @@
 // Modules
-import { motion } from "framer-motion";
-import { useState } from "react";
-import { v4 as uuidv4 } from "uuid";
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Api } from '../../api/Api';
 
 // Animations
-import { catMotion, linkMotion } from "../../animations/subNav.animations";
+import { catMotion, linkMotion } from '../../animations/subNav.animations';
 
 // Types
-import { ICategoriesData } from "../../types/data.types";
+import { ICategoriesData } from '../../types/data.types';
 
 // Components
-import NavDropdown from "./NavDropdown";
+import NavDropdown from './NavDropdown';
 
 interface IProps {
   activeLink: number;
@@ -19,14 +20,16 @@ interface IProps {
 }
 
 const SubNavLiMain = ({ activeLink, data, onClickLink }: IProps) => {
+  // Language
+  const language = new Api('').language;
+
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
   return (
     <motion.li
       className="sub-nav-li-main"
-      initial={"active"}
+      initial={'active'}
       variants={linkMotion}
-      onClick={() => setDropdownOpen(!dropdownOpen)}
-    >
+      onClick={() => setDropdownOpen(!dropdownOpen)}>
       <motion.div className="inner">
         <motion.svg
           width="24"
@@ -35,9 +38,8 @@ const SubNavLiMain = ({ activeLink, data, onClickLink }: IProps) => {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           variants={catMotion}
-          initial={"menuRest"}
-          animate={dropdownOpen ? "menuActive" : "menuRest"}
-        >
+          initial={'menuRest'}
+          animate={dropdownOpen ? 'menuActive' : 'menuRest'}>
           <g clipPath="url(#clip0_343_1783)">
             <path
               d="M20.05 11.0001H3.95C3.42533 11.0001 3 11.4255 3 11.9501V12.0501C3 12.5748 3.42533 13.0001 3.95 13.0001H20.05C20.5747 13.0001 21 12.5748 21 12.0501V11.9501C21 11.4255 20.5747 11.0001 20.05 11.0001Z"
@@ -58,23 +60,23 @@ const SubNavLiMain = ({ activeLink, data, onClickLink }: IProps) => {
             </clipPath>
           </defs>
         </motion.svg>
-        <p className={activeLink === 0 ? "active" : ""}>Категории</p>
+        <p className={activeLink === 0 ? 'active' : ''}>
+          {language === 'EN' ? 'Categoryes' : language === 'RU' ? 'Категории' : 'Kategoriýalar'}
+        </p>
         <p>|</p>
         <p>
           <motion.span
             variants={catMotion}
-            initial={"rest"}
-            animate={activeLink === 0 ? "active" : "rest"}
-          >
-            Главная
+            initial={'rest'}
+            animate={activeLink === 0 ? 'active' : 'rest'}>
+            {language === 'EN' ? 'Home' : language === 'RU' ? 'Главная' : 'Esasy sahypa'}
           </motion.span>
           {data.data.map((el) => (
             <motion.span
               key={uuidv4()}
               variants={catMotion}
-              initial={"rest"}
-              animate={activeLink === el.id ? "active" : "rest"}
-            >
+              initial={'rest'}
+              animate={activeLink === el.id ? 'active' : 'rest'}>
               {el.name}
             </motion.span>
           ))}