From 7f5c6ee9a6019fee035ddcb4554146b847394ffc Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Wed, 1 Feb 2023 02:05:42 +0500 Subject: [PATCH] language store created --- src/actions/setActiveLink.action.ts | 2 +- src/actions/setLanguage.ts | 10 ++++++++++ src/components/header/LanguageSelect.tsx | 21 +++++++++++++++++---- src/components/header/SubNav.tsx | 6 +++--- src/helpers/getSavedLanguage.ts | 6 ++++++ src/helpers/setSavedLanguage.ts | 6 ++++++ src/reducers/language.reducer.ts | 23 +++++++++++++++++++++++ src/store/functionality.ts | 10 ++++++++-- src/types/store.types.ts | 17 +++++++++++++++++ 9 files changed, 91 insertions(+), 10 deletions(-) create mode 100644 src/actions/setLanguage.ts create mode 100644 src/helpers/getSavedLanguage.ts create mode 100644 src/helpers/setSavedLanguage.ts create mode 100644 src/reducers/language.reducer.ts diff --git a/src/actions/setActiveLink.action.ts b/src/actions/setActiveLink.action.ts index a03467b..f92df1f 100644 --- a/src/actions/setActiveLink.action.ts +++ b/src/actions/setActiveLink.action.ts @@ -1,7 +1,7 @@ // Types import { ActiveLinkActionType } from "../types/store.types"; -export const setActiveLink = (active: number) => ({ +export const setActiveLink = (active: number): ActiveLinkActionType => ({ type: "SET_ACTIVE_LINK", payload: active, }); diff --git a/src/actions/setLanguage.ts b/src/actions/setLanguage.ts new file mode 100644 index 0000000..8db77a7 --- /dev/null +++ b/src/actions/setLanguage.ts @@ -0,0 +1,10 @@ +// Types +import { ILanguage, ILanguageAction } from "../types/store.types"; + +// Helpers +import setSavedLanguage from "../helpers/setSavedLanguage"; + +export const setLanguage = (title: ILanguage["title"]): ILanguageAction => ({ + type: "SET_LANGUAGE", + payload: setSavedLanguage(title), +}); diff --git a/src/components/header/LanguageSelect.tsx b/src/components/header/LanguageSelect.tsx index e400cf7..400b9c9 100644 --- a/src/components/header/LanguageSelect.tsx +++ b/src/components/header/LanguageSelect.tsx @@ -2,6 +2,7 @@ import { motion } from "framer-motion"; import { v4 as uuidv4 } from "uuid"; import { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; // Icons import { ReactComponent as ArrowDownBlack } from "../../assets/icons/arrow-down-black.svg"; @@ -9,9 +10,11 @@ import { ReactComponent as ArrowDownBlack } from "../../assets/icons/arrow-down- // Animations import { languageMotion } from "../../animations/language.animation"; -interface ILanguage { - title: "RU" | "EN" | "TM"; -} +// Types +import { ILanguage, RootState } from "../../types/store.types"; + +// Actions +import { setLanguage } from "../../actions/setLanguage"; const languages: ILanguage[] = [ { @@ -27,9 +30,18 @@ const languages: ILanguage[] = [ const LanguageSelect = () => { const [dropdown, setDropdown] = useState(false); + + const activeLanguage = useSelector( + (state) => state.language.title + ); + const dispatch = useDispatch(); + + const onLanguageClick = (title: ILanguage["title"]) => { + dispatch(setLanguage(title)); + }; return (
setDropdown(!dropdown)}> - EN + {activeLanguage} { background: "#f1f1f1", type: "spring", }} + onClick={() => onLanguageClick(language.title)} > {language.title} diff --git a/src/components/header/SubNav.tsx b/src/components/header/SubNav.tsx index bf375a8..4563db9 100644 --- a/src/components/header/SubNav.tsx +++ b/src/components/header/SubNav.tsx @@ -5,7 +5,7 @@ import { motion } from "framer-motion"; import { useDispatch, useSelector } from "react-redux"; // Types -import { ActiveLinkType } from "../../types/store.types"; +import { ActiveLinkType, RootState } from "../../types/store.types"; // Actions import { setActiveLink } from "../../actions/setActiveLink.action"; @@ -61,8 +61,8 @@ const subNavData: subNavDataType[] = [ ]; const SubNav = () => { - const activeLink = useSelector( - (state) => state.active + const activeLink = useSelector( + (state) => state.activeLink.active ); const dispatch = useDispatch(); diff --git a/src/helpers/getSavedLanguage.ts b/src/helpers/getSavedLanguage.ts new file mode 100644 index 0000000..1a6e376 --- /dev/null +++ b/src/helpers/getSavedLanguage.ts @@ -0,0 +1,6 @@ +import { ILanguage } from "../types/store.types"; + +export default (): ILanguage["title"] => { + // @ts-ignore + return localStorage.getItem("savedLanguage") || ("TM" as ILanguage["title"]); +}; diff --git a/src/helpers/setSavedLanguage.ts b/src/helpers/setSavedLanguage.ts new file mode 100644 index 0000000..e691453 --- /dev/null +++ b/src/helpers/setSavedLanguage.ts @@ -0,0 +1,6 @@ +import { ILanguage } from "../types/store.types"; + +export default (title: ILanguage["title"]): ILanguage["title"] => { + localStorage.setItem("savedLanguage", title); + return title; +}; diff --git a/src/reducers/language.reducer.ts b/src/reducers/language.reducer.ts new file mode 100644 index 0000000..9518ffc --- /dev/null +++ b/src/reducers/language.reducer.ts @@ -0,0 +1,23 @@ +// Types +import { ILanguage, ILanguageAction } from "../types/store.types"; + +// Helpers +import getSavedLanguage from "../helpers/getSavedLanguage"; + +const initialState = { + title: getSavedLanguage(), +}; + +export const languageReducer = ( + state: ILanguage = initialState, + action: ILanguageAction +) => { + switch (action.type) { + case "SET_LANGUAGE": { + return { ...state, title: action.payload }; + } + default: { + return state; + } + } +}; diff --git a/src/store/functionality.ts b/src/store/functionality.ts index 16c05c3..8bba238 100644 --- a/src/store/functionality.ts +++ b/src/store/functionality.ts @@ -1,9 +1,15 @@ // Modules -import { configureStore } from "@reduxjs/toolkit"; +import { combineReducers, configureStore } from "@reduxjs/toolkit"; // Reducers import { activeLinkReducer } from "../reducers/activeLink.reducer"; +import { languageReducer } from "../reducers/language.reducer"; + +export const allReducers = combineReducers({ + activeLink: activeLinkReducer, + language: languageReducer, +}); export const functionalityStore = configureStore({ - reducer: activeLinkReducer, + reducer: allReducers, }); diff --git a/src/types/store.types.ts b/src/types/store.types.ts index a4ee48a..2f83e71 100644 --- a/src/types/store.types.ts +++ b/src/types/store.types.ts @@ -1,3 +1,9 @@ +// Store +// import { functionalityStore } from "../store/functionality"; + +// Reducers +import { allReducers } from "../store/functionality"; + export interface ActiveLinkType { active: number; } @@ -5,3 +11,14 @@ export interface ActiveLinkActionType { type: "SET_ACTIVE_LINK"; payload: number; } + +export interface ILanguage { + title: "RU" | "EN" | "TM"; +} + +export interface ILanguageAction { + type: "SET_LANGUAGE"; + payload: "RU" | "EN" | "TM"; +} + +export type RootState = ReturnType;