language store created

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

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

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<boolean>(false);
+
+  const activeLanguage = useSelector<RootState, RootState["language"]["title"]>(
+    (state) => state.language.title
+  );
+  const dispatch = useDispatch();
+
+  const onLanguageClick = (title: ILanguage["title"]) => {
+    dispatch(setLanguage(title));
+  };
   return (
     <div className="language" onClick={() => setDropdown(!dropdown)}>
-      <span>EN</span>
+      <span>{activeLanguage}</span>
       <ArrowDownBlack />
       <motion.ul
         className="language-dropdown"
@@ -50,6 +62,7 @@ const LanguageSelect = () => {
                   background: "#f1f1f1",
                   type: "spring",
                 }}
+                onClick={() => onLanguageClick(language.title)}
               >
                 {language.title}
               </motion.button>

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<ActiveLinkType, ActiveLinkType["active"]>(
-    (state) => state.active
+  const activeLink = useSelector<RootState, RootState["activeLink"]["active"]>(
+    (state) => state.activeLink.active
   );
   const dispatch = useDispatch();
 

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"]);
+};

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

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

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

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<typeof allReducers>;