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 // Types
import { ICategoriesData } from "../types/data.types";
import { import {
ICategoryData,
ICategoryDataAction,
IFeaturedData, IFeaturedData,
IFeaturedDataAction, IFeaturedDataAction,
INewsScroll, INewsScroll,
@ -10,33 +13,46 @@ import {
ISearchResultAction, ISearchResultAction,
IVideoData, IVideoData,
IVideoDataAction, IVideoDataAction,
} from '../types/store.types'; } from "../types/store.types";
// NewsScroll // NewsScroll
export const setNewsScroll = (data: INewsScroll['data']): INewsScrollAction => ({ export const setNewsScroll = (
type: 'SET_NEWS_SCROLL', data: INewsScroll["data"]
): INewsScrollAction => ({
type: "SET_NEWS_SCROLL",
payload: data, payload: data,
}); });
export const setSearchResult = (data: ISearchResult['data']): ISearchResultAction => ({ export const setSearchResult = (
type: 'SET_SEARCH_DATA', data: ISearchResult["data"]
): ISearchResultAction => ({
type: "SET_SEARCH_DATA",
payload: data, payload: data,
}); });
// Post // Post
export const setPost = (data: IPostData['data']): IPostDataAction => ({ export const setPost = (data: IPostData["data"]): IPostDataAction => ({
type: 'SET_POST', type: "SET_POST",
payload: data, payload: data,
}); });
export const setVideo = (data: IVideoData['data']): IVideoDataAction => ({ export const setVideo = (data: IVideoData["data"]): IVideoDataAction => ({
type: 'SET_VIDEO', type: "SET_VIDEO",
payload: data, payload: data,
}); });
export const setFeatured = (data: IFeaturedData['data']): IFeaturedDataAction => ({ export const setFeatured = (
type: 'SET_FEATURED', data: IFeaturedData["data"]
): IFeaturedDataAction => ({
type: "SET_FEATURED",
payload: data,
});
export const setCategories = (
data: ICategoryData["data"]
): ICategoryDataAction => ({
type: "SET_CATEGORIES",
payload: data, 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"; import { useEffect, useState } from "react";
// Types // Types
import { RootState } from "../../types/store.types"; import { ICategoryData, RootState } from "../../types/store.types";
import { ICategoriesData } from "../../types/data.types"; import { ICategoriesData } from "../../types/data.types";
// Actions // Actions
@ -20,6 +20,7 @@ import { categoriesParams } from "../../api/params";
import Loader from "../global/Loader"; import Loader from "../global/Loader";
import SubNavLi from "./SubNavLi"; import SubNavLi from "./SubNavLi";
import SubNavLiMain from "./SubNavLiMain"; import SubNavLiMain from "./SubNavLiMain";
import { setCategories } from "../../actions/setData";
const SubNav = () => { const SubNav = () => {
const activeLink = useSelector<RootState, RootState["activeLink"]["active"]>( const activeLink = useSelector<RootState, RootState["activeLink"]["active"]>(
@ -29,19 +30,23 @@ const SubNav = () => {
(state) => state.language.title (state) => state.language.title
); );
const categories = useSelector<RootState, RootState["categories"]["data"]>(
(state) => state.categories.data
);
const dispatch = useDispatch(); const dispatch = useDispatch();
const onClickLink = (active: number) => { const onClickLink = (active: number) => {
dispatch(setActiveLink(active)); dispatch(setActiveLink(active));
}; };
const [data, setData] = useState<ICategoriesData>();
// Api // Api
const api = new Api(url + "/categories", categoriesParams); const api = new Api(url + "/categories", categoriesParams);
useEffect(() => { useEffect(() => {
api.get(data, setData); api.get(categories, (data: ICategoryData["data"]) =>
dispatch(setCategories(data))
);
}, [language]); }, [language]);
const location = useLocation(); const location = useLocation();
@ -58,15 +63,19 @@ const SubNav = () => {
return ( return (
<nav className="subnav"> <nav className="subnav">
<div className="container"> <div className="container">
<ul className={`subnav-inner ${!data ? "loading" : ""}`}> <ul
{data ? ( className={`subnav-inner ${
!(categories.data[0].id > -1) ? "loading" : ""
}`}
>
{categories.data[0].id > -1 ? (
<> <>
<SubNavLiMain <SubNavLiMain
data={data} data={categories}
activeLink={activeLink} activeLink={activeLink}
onClickLink={onClickLink} onClickLink={onClickLink}
/> />
{data.data.map((dataEl, index) => {categories.data.map((dataEl, index) =>
index <= 4 ? ( index <= 4 ? (
<SubNavLi <SubNavLi
key={uuidv4()} key={uuidv4()}

193
src/reducers/dataReducer.ts
View File

@ -1,5 +1,7 @@
// Types // Types
import { import {
ICategoryData,
ICategoryDataAction,
IFeaturedData, IFeaturedData,
IFeaturedDataAction, IFeaturedDataAction,
INewsScroll, INewsScroll,
@ -10,7 +12,7 @@ import {
ISearchResultAction, ISearchResultAction,
IVideoData, IVideoData,
IVideoDataAction, IVideoDataAction,
} from '../types/store.types'; } from "../types/store.types";
// NewsScroll // NewsScroll
@ -18,54 +20,54 @@ export const newsScrollInitialState = {
data: [ data: [
{ {
id: -1, id: -1,
title: '', title: "",
slug: '', slug: "",
excerpt: '', excerpt: "",
published_at: '', published_at: "",
featured_images: [ featured_images: [
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
], ],
content_html: '', content_html: "",
categories: [ categories: [
{ {
id: -1, id: -1,
name: '', name: "",
}, },
], ],
video: null, video: null,
powerseo_title: '', powerseo_title: "",
powerseo_description: '', powerseo_description: "",
powerseo_keywords: '', powerseo_keywords: "",
}, },
], ],
}; };
export const newsScrollReducer = ( export const newsScrollReducer = (
state: INewsScroll = newsScrollInitialState, state: INewsScroll = newsScrollInitialState,
action: INewsScrollAction, action: INewsScrollAction
) => { ) => {
switch (action.type) { switch (action.type) {
case 'SET_NEWS_SCROLL': { case "SET_NEWS_SCROLL": {
return { ...state, data: action.payload }; return { ...state, data: action.payload };
} }
default: { default: {
@ -80,51 +82,54 @@ export const postInitialState = {
data: { data: {
data: { data: {
id: -1, id: -1,
title: '', title: "",
slug: '', slug: "",
excerpt: '', excerpt: "",
published_at: '', published_at: "",
video: null, video: null,
featured_images: [ featured_images: [
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
], ],
content_html: '', content_html: "",
categories: [ categories: [
{ {
id: -1, id: -1,
name: '', name: "",
}, },
], ],
powerseo_title: '', powerseo_title: "",
powerseo_description: '', powerseo_description: "",
powerseo_keywords: '', powerseo_keywords: "",
}, },
}, },
}; };
export const postReducer = (state: IPostData = postInitialState, action: IPostDataAction) => { export const postReducer = (
state: IPostData = postInitialState,
action: IPostDataAction
) => {
switch (action.type) { switch (action.type) {
case 'SET_POST': { case "SET_POST": {
return { ...state, data: action.payload }; return { ...state, data: action.payload };
} }
default: { default: {
@ -137,54 +142,54 @@ export const featuredInitialState = {
data: [ data: [
{ {
id: -1, id: -1,
title: '', title: "",
slug: '', slug: "",
excerpt: '', excerpt: "",
published_at: '', published_at: "",
video: null, video: null,
featured_images: [ featured_images: [
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
{ {
id: -1, id: -1,
disk_name: '', disk_name: "",
file_name: '', file_name: "",
path: '', path: "",
extension: '', extension: "",
}, },
], ],
content_html: '', content_html: "",
categories: [ categories: [
{ {
id: -1, id: -1,
name: '', name: "",
}, },
], ],
powerseo_title: '', powerseo_title: "",
powerseo_description: '', powerseo_description: "",
powerseo_keywords: '', powerseo_keywords: "",
}, },
], ],
}; };
export const featuredReducer = ( export const featuredReducer = (
state: IFeaturedData = featuredInitialState, state: IFeaturedData = featuredInitialState,
action: IFeaturedDataAction, action: IFeaturedDataAction
) => { ) => {
switch (action.type) { switch (action.type) {
case 'SET_FEATURED': { case "SET_FEATURED": {
return { ...state, data: action.payload }; return { ...state, data: action.payload };
} }
default: { default: {
@ -195,10 +200,10 @@ export const featuredReducer = (
export const searchDataReducer = ( export const searchDataReducer = (
state: ISearchResult = newsScrollInitialState, state: ISearchResult = newsScrollInitialState,
action: ISearchResultAction, action: ISearchResultAction
) => { ) => {
switch (action.type) { switch (action.type) {
case 'SET_SEARCH_DATA': { case "SET_SEARCH_DATA": {
return { data: action.payload }; return { data: action.payload };
} }
default: { default: {
@ -209,10 +214,10 @@ export const searchDataReducer = (
export const videoReducer = ( export const videoReducer = (
state: IVideoData = newsScrollInitialState, state: IVideoData = newsScrollInitialState,
action: IVideoDataAction, action: IVideoDataAction
) => { ) => {
switch (action.type) { switch (action.type) {
case 'SET_VIDEO': { case "SET_VIDEO": {
return { ...state, data: action.payload }; return { ...state, data: action.payload };
} }
default: { 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 // Modules
import { combineReducers, configureStore } from '@reduxjs/toolkit'; import { combineReducers, configureStore } from "@reduxjs/toolkit";
// Reducers // Reducers
import { activeLinkReducer } from '../reducers/activeLink.reducer'; import { activeLinkReducer } from "../reducers/activeLink.reducer";
import { languageReducer } from '../reducers/language.reducer'; import { languageReducer } from "../reducers/language.reducer";
import { import {
newsScrollReducer, newsScrollReducer,
postReducer, postReducer,
searchDataReducer, searchDataReducer,
featuredReducer, featuredReducer,
videoReducer, videoReducer,
} from '../reducers/dataReducer'; categoriesReducer,
import { searchReducer } from '../reducers/searchReducer'; } from "../reducers/dataReducer";
import { searchReducer } from "../reducers/searchReducer";
export const allReducers = combineReducers({ export const allReducers = combineReducers({
activeLink: activeLinkReducer, activeLink: activeLinkReducer,
@ -22,6 +23,7 @@ export const allReducers = combineReducers({
searchData: searchDataReducer, searchData: searchDataReducer,
featured: featuredReducer, featured: featuredReducer,
video: videoReducer, video: videoReducer,
categories: categoriesReducer,
}); });
export const functionalityStore = configureStore({ export const functionalityStore = configureStore({

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

@ -1,26 +1,26 @@
// Reducers // Reducers
import { allReducers } from '../store/functionality'; import { allReducers } from "../store/functionality";
// Types // Types
import { IPostsData } from './data.types'; import { ICategoriesData, IPostsData } from "./data.types";
// NavLink // NavLink
export interface ActiveLinkType { export interface ActiveLinkType {
active: number; active: number;
} }
export interface ActiveLinkActionType { export interface ActiveLinkActionType {
type: 'SET_ACTIVE_LINK'; type: "SET_ACTIVE_LINK";
payload: number; payload: number;
} }
// Language // Language
export interface ILanguage { export interface ILanguage {
title: 'RU' | 'EN' | 'TM'; title: "RU" | "EN" | "TM";
} }
export interface ILanguageAction { export interface ILanguageAction {
type: 'SET_LANGUAGE'; type: "SET_LANGUAGE";
payload: 'RU' | 'EN' | 'TM'; payload: "RU" | "EN" | "TM";
} }
// NewsScroll // NewsScroll
@ -29,8 +29,8 @@ export interface INewsScroll {
data: IPostsData[]; data: IPostsData[];
} }
export interface INewsScrollAction { export interface INewsScrollAction {
type: 'SET_NEWS_SCROLL'; type: "SET_NEWS_SCROLL";
payload: INewsScroll['data']; payload: INewsScroll["data"];
} }
// Post // Post
@ -42,24 +42,24 @@ export interface IPostData {
} }
export interface IPostDataAction { export interface IPostDataAction {
type: 'SET_POST'; type: "SET_POST";
payload: IPostData['data']; payload: IPostData["data"];
} }
export interface IVideoData { export interface IVideoData {
data: IPostsData[]; data: IPostsData[];
} }
export interface IVideoDataAction { export interface IVideoDataAction {
type: 'SET_VIDEO'; type: "SET_VIDEO";
payload: INewsScroll['data']; payload: INewsScroll["data"];
} }
export interface IFeaturedData { export interface IFeaturedData {
data: IPostsData[]; data: IPostsData[];
} }
export interface IFeaturedDataAction { export interface IFeaturedDataAction {
type: 'SET_FEATURED'; type: "SET_FEATURED";
payload: IFeaturedData['data']; payload: IFeaturedData["data"];
} }
// //
@ -68,16 +68,25 @@ export interface ISearchData {
value: string; value: string;
} }
export interface ISearchDataAction { export interface ISearchDataAction {
type: 'SET_SEARCH'; type: "SET_SEARCH";
payload: ISearchData['value']; payload: ISearchData["value"];
} }
export interface ISearchResult { export interface ISearchResult {
data: IPostsData[]; data: IPostsData[];
} }
export interface ISearchResultAction { export interface ISearchResultAction {
type: 'SET_SEARCH_DATA'; type: "SET_SEARCH_DATA";
payload: ISearchResult['data']; payload: ISearchResult["data"];
}
export interface ICategoryData {
data: ICategoriesData;
}
export interface ICategoryDataAction {
type: "SET_CATEGORIES";
payload: ICategoryData["data"];
} }
// ALL TYPES BEFORE THIS LINE ================== // ALL TYPES BEFORE THIS LINE ==================