From 3057ec532ef5758502732e4bfa7f69d246076fc0 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Fri, 3 Mar 2023 14:53:31 +0500
Subject: [PATCH] category reducer

---
 src/actions/setData.ts           |  38 ++++--
 src/components/header/SubNav.tsx |  25 ++--
 src/reducers/dataReducer.ts      | 193 +++++++++++++++++++------------
 src/store/functionality.ts       |  12 +-
 src/types/store.types.ts         |  45 ++++---
 5 files changed, 197 insertions(+), 116 deletions(-)

diff --git a/src/actions/setData.ts b/src/actions/setData.ts
index 85de568..182ad1e 100644
--- a/src/actions/setData.ts
+++ b/src/actions/setData.ts
@@ -1,5 +1,8 @@
 // Types
+import { ICategoriesData } from "../types/data.types";
 import {
+  ICategoryData,
+  ICategoryDataAction,
   IFeaturedData,
   IFeaturedDataAction,
   INewsScroll,
@@ -10,33 +13,46 @@ import {
   ISearchResultAction,
   IVideoData,
   IVideoDataAction,
-} from '../types/store.types';
+} from "../types/store.types";
 
 // NewsScroll
 
-export const setNewsScroll = (data: INewsScroll['data']): INewsScrollAction => ({
-  type: 'SET_NEWS_SCROLL',
+export const setNewsScroll = (
+  data: INewsScroll["data"]
+): INewsScrollAction => ({
+  type: "SET_NEWS_SCROLL",
   payload: data,
 });
 
-export const setSearchResult = (data: ISearchResult['data']): ISearchResultAction => ({
-  type: 'SET_SEARCH_DATA',
+export const setSearchResult = (
+  data: ISearchResult["data"]
+): ISearchResultAction => ({
+  type: "SET_SEARCH_DATA",
   payload: data,
 });
 
 // Post
 
-export const setPost = (data: IPostData['data']): IPostDataAction => ({
-  type: 'SET_POST',
+export const setPost = (data: IPostData["data"]): IPostDataAction => ({
+  type: "SET_POST",
   payload: data,
 });
 
-export const setVideo = (data: IVideoData['data']): IVideoDataAction => ({
-  type: 'SET_VIDEO',
+export const setVideo = (data: IVideoData["data"]): IVideoDataAction => ({
+  type: "SET_VIDEO",
   payload: data,
 });
 
-export const setFeatured = (data: IFeaturedData['data']): IFeaturedDataAction => ({
-  type: 'SET_FEATURED',
+export const setFeatured = (
+  data: IFeaturedData["data"]
+): IFeaturedDataAction => ({
+  type: "SET_FEATURED",
+  payload: data,
+});
+
+export const setCategories = (
+  data: ICategoryData["data"]
+): ICategoryDataAction => ({
+  type: "SET_CATEGORIES",
   payload: data,
 });
diff --git a/src/components/header/SubNav.tsx b/src/components/header/SubNav.tsx
index e6dd79a..26cc497 100644
--- a/src/components/header/SubNav.tsx
+++ b/src/components/header/SubNav.tsx
@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 
 // Types
-import { RootState } from "../../types/store.types";
+import { ICategoryData, RootState } from "../../types/store.types";
 import { ICategoriesData } from "../../types/data.types";
 
 // Actions
@@ -20,6 +20,7 @@ import { categoriesParams } from "../../api/params";
 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"]>(
@@ -29,19 +30,23 @@ const SubNav = () => {
     (state) => state.language.title
   );
 
+  const categories = useSelector<RootState, RootState["categories"]["data"]>(
+    (state) => state.categories.data
+  );
+
   const dispatch = useDispatch();
 
   const onClickLink = (active: number) => {
     dispatch(setActiveLink(active));
   };
 
-  const [data, setData] = useState<ICategoriesData>();
-
   // Api
   const api = new Api(url + "/categories", categoriesParams);
 
   useEffect(() => {
-    api.get(data, setData);
+    api.get(categories, (data: ICategoryData["data"]) =>
+      dispatch(setCategories(data))
+    );
   }, [language]);
 
   const location = useLocation();
@@ -58,15 +63,19 @@ const SubNav = () => {
   return (
     <nav className="subnav">
       <div className="container">
-        <ul className={`subnav-inner ${!data ? "loading" : ""}`}>
-          {data ? (
+        <ul
+          className={`subnav-inner ${
+            !(categories.data[0].id > -1) ? "loading" : ""
+          }`}
+        >
+          {categories.data[0].id > -1 ? (
             <>
               <SubNavLiMain
-                data={data}
+                data={categories}
                 activeLink={activeLink}
                 onClickLink={onClickLink}
               />
-              {data.data.map((dataEl, index) =>
+              {categories.data.map((dataEl, index) =>
                 index <= 4 ? (
                   <SubNavLi
                     key={uuidv4()}
diff --git a/src/reducers/dataReducer.ts b/src/reducers/dataReducer.ts
index acb8135..4447af3 100644
--- a/src/reducers/dataReducer.ts
+++ b/src/reducers/dataReducer.ts
@@ -1,5 +1,7 @@
 // Types
 import {
+  ICategoryData,
+  ICategoryDataAction,
   IFeaturedData,
   IFeaturedDataAction,
   INewsScroll,
@@ -10,7 +12,7 @@ import {
   ISearchResultAction,
   IVideoData,
   IVideoDataAction,
-} from '../types/store.types';
+} from "../types/store.types";
 
 // NewsScroll
 
@@ -18,54 +20,54 @@ export const newsScrollInitialState = {
   data: [
     {
       id: -1,
-      title: '',
-      slug: '',
-      excerpt: '',
-      published_at: '',
+      title: "",
+      slug: "",
+      excerpt: "",
+      published_at: "",
       featured_images: [
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
       ],
-      content_html: '',
+      content_html: "",
       categories: [
         {
           id: -1,
-          name: '',
+          name: "",
         },
       ],
       video: null,
-      powerseo_title: '',
-      powerseo_description: '',
-      powerseo_keywords: '',
+      powerseo_title: "",
+      powerseo_description: "",
+      powerseo_keywords: "",
     },
   ],
 };
 
 export const newsScrollReducer = (
   state: INewsScroll = newsScrollInitialState,
-  action: INewsScrollAction,
+  action: INewsScrollAction
 ) => {
   switch (action.type) {
-    case 'SET_NEWS_SCROLL': {
+    case "SET_NEWS_SCROLL": {
       return { ...state, data: action.payload };
     }
     default: {
@@ -80,51 +82,54 @@ export const postInitialState = {
   data: {
     data: {
       id: -1,
-      title: '',
-      slug: '',
-      excerpt: '',
-      published_at: '',
+      title: "",
+      slug: "",
+      excerpt: "",
+      published_at: "",
       video: null,
       featured_images: [
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
       ],
-      content_html: '',
+      content_html: "",
       categories: [
         {
           id: -1,
-          name: '',
+          name: "",
         },
       ],
-      powerseo_title: '',
-      powerseo_description: '',
-      powerseo_keywords: '',
+      powerseo_title: "",
+      powerseo_description: "",
+      powerseo_keywords: "",
     },
   },
 };
 
-export const postReducer = (state: IPostData = postInitialState, action: IPostDataAction) => {
+export const postReducer = (
+  state: IPostData = postInitialState,
+  action: IPostDataAction
+) => {
   switch (action.type) {
-    case 'SET_POST': {
+    case "SET_POST": {
       return { ...state, data: action.payload };
     }
     default: {
@@ -137,54 +142,54 @@ export const featuredInitialState = {
   data: [
     {
       id: -1,
-      title: '',
-      slug: '',
-      excerpt: '',
-      published_at: '',
+      title: "",
+      slug: "",
+      excerpt: "",
+      published_at: "",
       video: null,
       featured_images: [
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
         {
           id: -1,
-          disk_name: '',
-          file_name: '',
-          path: '',
-          extension: '',
+          disk_name: "",
+          file_name: "",
+          path: "",
+          extension: "",
         },
       ],
-      content_html: '',
+      content_html: "",
       categories: [
         {
           id: -1,
-          name: '',
+          name: "",
         },
       ],
-      powerseo_title: '',
-      powerseo_description: '',
-      powerseo_keywords: '',
+      powerseo_title: "",
+      powerseo_description: "",
+      powerseo_keywords: "",
     },
   ],
 };
 
 export const featuredReducer = (
   state: IFeaturedData = featuredInitialState,
-  action: IFeaturedDataAction,
+  action: IFeaturedDataAction
 ) => {
   switch (action.type) {
-    case 'SET_FEATURED': {
+    case "SET_FEATURED": {
       return { ...state, data: action.payload };
     }
     default: {
@@ -195,10 +200,10 @@ export const featuredReducer = (
 
 export const searchDataReducer = (
   state: ISearchResult = newsScrollInitialState,
-  action: ISearchResultAction,
+  action: ISearchResultAction
 ) => {
   switch (action.type) {
-    case 'SET_SEARCH_DATA': {
+    case "SET_SEARCH_DATA": {
       return { data: action.payload };
     }
     default: {
@@ -209,10 +214,10 @@ export const searchDataReducer = (
 
 export const videoReducer = (
   state: IVideoData = newsScrollInitialState,
-  action: IVideoDataAction,
+  action: IVideoDataAction
 ) => {
   switch (action.type) {
-    case 'SET_VIDEO': {
+    case "SET_VIDEO": {
       return { ...state, data: action.payload };
     }
     default: {
@@ -220,3 +225,43 @@ export const videoReducer = (
     }
   }
 };
+
+export const categoriesInitialState: ICategoryData = {
+  data: {
+    data: [
+      {
+        id: -1,
+        name: "",
+      },
+    ],
+    links: {
+      first: "",
+      last: "",
+      prev: null,
+      next: null,
+    },
+    meta: {
+      current_page: -1,
+      from: -1,
+      last_page: -1,
+      path: "",
+      per_page: -1,
+      to: -1,
+      total: -1,
+    },
+  },
+};
+
+export const categoriesReducer = (
+  state: ICategoryData = categoriesInitialState,
+  action: ICategoryDataAction
+) => {
+  switch (action.type) {
+    case "SET_CATEGORIES": {
+      return { data: action.payload };
+    }
+    default: {
+      return state;
+    }
+  }
+};
diff --git a/src/store/functionality.ts b/src/store/functionality.ts
index 2db8002..4f2f6a1 100644
--- a/src/store/functionality.ts
+++ b/src/store/functionality.ts
@@ -1,17 +1,18 @@
 // Modules
-import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
 
 // Reducers
-import { activeLinkReducer } from '../reducers/activeLink.reducer';
-import { languageReducer } from '../reducers/language.reducer';
+import { activeLinkReducer } from "../reducers/activeLink.reducer";
+import { languageReducer } from "../reducers/language.reducer";
 import {
   newsScrollReducer,
   postReducer,
   searchDataReducer,
   featuredReducer,
   videoReducer,
-} from '../reducers/dataReducer';
-import { searchReducer } from '../reducers/searchReducer';
+  categoriesReducer,
+} from "../reducers/dataReducer";
+import { searchReducer } from "../reducers/searchReducer";
 
 export const allReducers = combineReducers({
   activeLink: activeLinkReducer,
@@ -22,6 +23,7 @@ export const allReducers = combineReducers({
   searchData: searchDataReducer,
   featured: featuredReducer,
   video: videoReducer,
+  categories: categoriesReducer,
 });
 
 export const functionalityStore = configureStore({
diff --git a/src/types/store.types.ts b/src/types/store.types.ts
index cfe9ef0..c640eaa 100644
--- a/src/types/store.types.ts
+++ b/src/types/store.types.ts
@@ -1,26 +1,26 @@
 // Reducers
-import { allReducers } from '../store/functionality';
+import { allReducers } from "../store/functionality";
 
 // Types
-import { IPostsData } from './data.types';
+import { ICategoriesData, IPostsData } from "./data.types";
 
 // NavLink
 export interface ActiveLinkType {
   active: number;
 }
 export interface ActiveLinkActionType {
-  type: 'SET_ACTIVE_LINK';
+  type: "SET_ACTIVE_LINK";
   payload: number;
 }
 
 // Language
 export interface ILanguage {
-  title: 'RU' | 'EN' | 'TM';
+  title: "RU" | "EN" | "TM";
 }
 
 export interface ILanguageAction {
-  type: 'SET_LANGUAGE';
-  payload: 'RU' | 'EN' | 'TM';
+  type: "SET_LANGUAGE";
+  payload: "RU" | "EN" | "TM";
 }
 
 // NewsScroll
@@ -29,8 +29,8 @@ export interface INewsScroll {
   data: IPostsData[];
 }
 export interface INewsScrollAction {
-  type: 'SET_NEWS_SCROLL';
-  payload: INewsScroll['data'];
+  type: "SET_NEWS_SCROLL";
+  payload: INewsScroll["data"];
 }
 
 // Post
@@ -42,24 +42,24 @@ export interface IPostData {
 }
 
 export interface IPostDataAction {
-  type: 'SET_POST';
-  payload: IPostData['data'];
+  type: "SET_POST";
+  payload: IPostData["data"];
 }
 export interface IVideoData {
   data: IPostsData[];
 }
 
 export interface IVideoDataAction {
-  type: 'SET_VIDEO';
-  payload: INewsScroll['data'];
+  type: "SET_VIDEO";
+  payload: INewsScroll["data"];
 }
 export interface IFeaturedData {
   data: IPostsData[];
 }
 
 export interface IFeaturedDataAction {
-  type: 'SET_FEATURED';
-  payload: IFeaturedData['data'];
+  type: "SET_FEATURED";
+  payload: IFeaturedData["data"];
 }
 
 //
@@ -68,16 +68,25 @@ export interface ISearchData {
   value: string;
 }
 export interface ISearchDataAction {
-  type: 'SET_SEARCH';
-  payload: ISearchData['value'];
+  type: "SET_SEARCH";
+  payload: ISearchData["value"];
 }
 
 export interface ISearchResult {
   data: IPostsData[];
 }
 export interface ISearchResultAction {
-  type: 'SET_SEARCH_DATA';
-  payload: ISearchResult['data'];
+  type: "SET_SEARCH_DATA";
+  payload: ISearchResult["data"];
+}
+
+export interface ICategoryData {
+  data: ICategoriesData;
+}
+
+export interface ICategoryDataAction {
+  type: "SET_CATEGORIES";
+  payload: ICategoryData["data"];
 }
 
 // ALL TYPES BEFORE THIS LINE ==================