107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
// Modules
|
||
import { Link, useLocation } from "react-router-dom";
|
||
import { v4 as uuidv4 } from "uuid";
|
||
import { motion } from "framer-motion";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
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";
|
||
|
||
// Animations
|
||
import { linkMotion } from "../../animations/subNav.animations";
|
||
|
||
// Api
|
||
import { Api } from "../../api/Api";
|
||
import { url } from "../../url";
|
||
|
||
// Components
|
||
import Loader from "../global/Loader";
|
||
|
||
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 dispatch = useDispatch();
|
||
|
||
const onClickLink = (active: number) => {
|
||
dispatch(setActiveLink(active));
|
||
};
|
||
|
||
const [data, setData] = useState<ICategoriesData>();
|
||
|
||
// Api
|
||
const api = new Api(url + "/categories");
|
||
|
||
useEffect(() => {
|
||
api.get(data, setData);
|
||
}, [language]);
|
||
|
||
const location = useLocation();
|
||
useEffect(() => {
|
||
if (!location.pathname.includes("category")) return;
|
||
const category = location.pathname[location.pathname.length - 1];
|
||
onClickLink(parseInt(category));
|
||
}, [location]);
|
||
|
||
return (
|
||
<nav className="subnav">
|
||
<div className="container">
|
||
<ul className="subnav-inner">
|
||
<motion.li
|
||
initial={linkMotion.rest}
|
||
animate={activeLink === 0 ? linkMotion.active : linkMotion.rest}
|
||
>
|
||
<motion.div>
|
||
<Link
|
||
to={"/"}
|
||
onClick={() => onClickLink(0)}
|
||
className={activeLink === 0 ? "active" : ""}
|
||
>
|
||
Главная
|
||
</Link>
|
||
</motion.div>
|
||
</motion.li>
|
||
{data ? (
|
||
data.data.map((dataEl) => {
|
||
return (
|
||
<motion.li
|
||
key={uuidv4()}
|
||
initial={linkMotion.rest}
|
||
animate={
|
||
activeLink === dataEl.id
|
||
? linkMotion.active
|
||
: linkMotion.rest
|
||
}
|
||
>
|
||
<motion.div>
|
||
<Link
|
||
to={`/category/${dataEl.id}`}
|
||
onClick={() => onClickLink(dataEl.id)}
|
||
className={activeLink === dataEl.id ? "active" : ""}
|
||
>
|
||
{dataEl.name}
|
||
</Link>
|
||
</motion.div>
|
||
</motion.li>
|
||
);
|
||
})
|
||
) : (
|
||
<Loader />
|
||
)}
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
);
|
||
};
|
||
|
||
export default SubNav;
|