Aydogdy
/
hhm-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

category reducer

This commit is contained in:
VividTruthKeeper 2023-03-03 14:53:31 +05:00
parent ba4a9fefba
commit 3057ec532e
5 changed files with 197 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/actions/setData.ts
View File

@ -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,
});

25
src/components/header/SubNav.tsx
View File

@ -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()}

193
src/reducers/dataReducer.ts
View File

@ -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;
}
}
};

12
src/store/functionality.ts
View File

@ -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({

45
src/types/store.types.ts
View File

@ -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 ==================