categoryes lang added

2023-03-07 15:15:01 +05:00 · 2023-03-07 15:15:01 +05:00 · 343b5ab6dc
parent 812cf5d624
commit 343b5ab6dc
3 changed files with 87 additions and 108 deletions
--- 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>
        )}
--- 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,
              )}
            </>
          ) : (
--- 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>
          ))}