footer links

src/components/footer/Footer.tsx

@@ -1,59 +1,39 @@
 // Modules
-import { Link } from 'react-router-dom';
+import { v4 as uuidv4 } from "uuid";
+import { useSelector } from "react-redux";
 // Icons
-import phone from '../../assets/icons/phone.svg';
-import mail from '../../assets/icons/mail.svg';
-import location from '../../assets/icons/location.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 phone from "../../assets/icons/phone.svg";
+import mail from "../../assets/icons/mail.svg";
+import location from "../../assets/icons/location.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";
+
+// Types
+import { RootState } from "../../types/store.types";
+
+// Components
+import FooterListItem from "./FooterListItem";
 
 const Footer = () => {
+  const categories = useSelector<RootState, RootState["categories"]["data"]>(
+    (state) => state.categories.data
+  );
   return (
     <footer className="footer">
       <div className="container">
         <div className="footer-wrapper">
           <nav className="footer-nav">
             <ul className="footer-nav-list">
-              <li className="footer-nav-list-item">
-                <Link to="/">В Туркменистане</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Политика</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Общество</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Статьи</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Культура</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Новости</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Экономика</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Наука и технологии</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Медиа</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">В мире</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Спорт</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Здоровье и медицина</Link>
-              </li>
-              <li className="footer-nav-list-item">
-                <Link to="/">Погода</Link>
-              </li>
+              {categories.data[0].id > -1
+                ? categories.data.map((category) => (
+                    <FooterListItem
+                      id={category.id}
+                      name={category.name}
+                      key={uuidv4()}
+                    />
+                  ))
+                : ""}
             </ul>
           </nav>
           <div className="footer-info">
@@ -61,7 +41,9 @@ const Footer = () => {
               <div className="footer-info-item-icon">
                 <img src={phone} alt="phone" />
               </div>
-              <h3 className="footer-info-item-title">+(993) 12 68-07-92, 94-08-01 </h3>
+              <h3 className="footer-info-item-title">
+                +(993) 12 68-07-92, 94-08-01{" "}
+              </h3>
             </div>
             <div className="footer-info-item">
               <div className="footer-info-item-icon">
@@ -74,7 +56,8 @@ const Footer = () => {
                 <img src={location} alt="location" />
               </div>
               <h3 className="footer-info-item-title">
-                115184, Ашхабад, Битарап шаелы, 25 (Центр телерадиовещания Туркменистана)
+                115184, Ашхабад, Битарап шаелы, 25 (Центр телерадиовещания
+                Туркменистана)
               </h3>
             </div>
 
@@ -100,10 +83,14 @@ const Footer = () => {
             </div>
 
             <div className="footer-info-item">
-              <h3 className="footer-info-item-title">Реклама на ТВ и радио: (993) 12 78-13-99</h3>
+              <h3 className="footer-info-item-title">
+                Реклама на ТВ и радио: (993) 12 78-13-99
+              </h3>
             </div>
             <div className="footer-info-item">
-              <h3 className="footer-info-item-title">Реклама на сайте: (993) 12 78-13-99</h3>
+              <h3 className="footer-info-item-title">
+                Реклама на сайте: (993) 12 78-13-99
+              </h3>
             </div>
           </div>
         </div>

src/components/footer/FooterListItem.tsx

@@ -0,0 +1,17 @@
+// Modules
+import { Link } from "react-router-dom";
+
+interface IProps {
+  id: number;
+  name: string;
+}
+
+const FooterListItem = ({ id, name }: IProps) => {
+  return (
+    <li className="footer-nav-list-item">
+      <Link to={`/category/${id}`}>{name}</Link>
+    </li>
+  );
+};
+
+export default FooterListItem;