fix auth and language selection

Author: wiseaidev

src/components/AppHeader/index.jsx

@@ -11,6 +11,7 @@ import {
 } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import SearchIcon from "@mui/icons-material/Search";
+import RefreshIcon from "@mui/icons-material/Refresh";
 import {
   setFilterType,
   toggleSidebarCollapsed,
@@ -43,7 +44,7 @@ import Fab from "@mui/material/Fab";
 import Brightness4Icon from "@mui/icons-material/Brightness4";
 import Brightness7Icon from "@mui/icons-material/Brightness7";
 import MenuIcon from "@mui/icons-material/Menu";
-
+import { getMailsList } from "@app/store/mailAppReducer/actions";
 const sections = ["Banner", "Features", "Services", "Team", "Faq"];
 const settings = ["View Profile", "Edit Profile", "Log out"];
 
@@ -62,13 +63,20 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
   const [showViewModes, setShowViewModes] = useState(null);
   const [searchTextState, setSearchTextState] = useState(searchText);
 
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const theme = useTheme();
+
   const onShowViewModes = (event) => {
     setShowViewModes(event.currentTarget);
   };
 
   const onHideViewModes = () => {
     setShowViewModes(null);
   };
+  const handleRefreshClick = () => {
+    dispatch(getMailsList());
+  };
 
   const handleSearchText = (e) => {
     setSearchTextState(e.target.value);
@@ -93,10 +101,6 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
     localStorage.setItem("theme", newTheme);
   };
 
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const theme = useTheme();
-
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget);
   };
@@ -247,6 +251,9 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
         >
           {darkTheme ? <Brightness4Icon /> : <Brightness7Icon />}
         </IconButton>
+        <IconButton color="primary" onClick={handleRefreshClick}>
+          <RefreshIcon />
+        </IconButton>
         <Box sx={{ flexGrow: 0 }}>
           <Tooltip title="Open settings">
             <IconButton onClick={handleOpenUserMenu} sx={{ ml: 7 }}>

src/components/EditInfo/index.jsx

@@ -68,7 +68,7 @@ const EditInfo = ({ open, onCloseDialog }) => {
       dispatch(
         SetPersonalInfo({ firstName, lastName, bio, programmingLanguage })
       );
-      onCloseDialog();
+      dispatch(onCloseDialog());
     }
   };
 

src/pages/Landing/index.jsx

@@ -16,7 +16,7 @@ const Landing = () => {
     if (params.has("code")) {
       setTimeout(() => {
         window.location.reload();
-      }, 5000);
+      }, 1500);
     }
   }, []);
 

src/pages/ProgrammingLanguages/index.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { updateLanguage } from "@app/store/authReducer/actions";
+import { useDispatch } from "react-redux";
 import {
   Container,
   Box,
@@ -148,13 +150,16 @@ export const programmingLanguages = [
 const ProgrammingLanguages = () => {
   const [selectedLanguage, setSelectedLanguage] = useState("");
   const navigate = useNavigate();
+  const dispatch = useDispatch();
 
   const handleChange = (event) => {
     setSelectedLanguage(event.target.value);
   };
 
   const handleSubscribe = () => {
+    event.preventDefault();
     localStorage.setItem("language", selectedLanguage);
+    dispatch(updateLanguage(selectedLanguage));
     navigate("/mail");
   };
 

src/store/authReducer/actions/index.js

@@ -129,3 +129,26 @@ export const SetPersonalInfo = createAsyncThunk(
     }
   }
 );
+
+export const updateLanguage = createAsyncThunk(
+  "user/language",
+  async (language, { getState, rejectWithValue }) => {
+    try {
+      const config = {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: JSON.parse(localStorage.getItem("token")),
+          email: JSON.parse(localStorage.getItem("user")).email,
+        },
+      };
+      const response = await axios.put(
+        `${baseURL}/user/language`,
+        { language: language },
+        config
+      );
+      return response.data;
+    } catch (error) {
+      return rejectWithValue(error.response?.data || "Something went wrong");
+    }
+  }
+);

src/store/authReducer/index.js

@@ -1,5 +1,11 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { userLogin, userGetToken, uploadPicture, userLogout } from "./actions";
+import {
+  userLogin,
+  userGetToken,
+  uploadPicture,
+  userLogout,
+  updateLanguage,
+} from "./actions";
 
 import storage from "redux-persist/lib/storage";
 // initialize token from local storage
@@ -108,6 +114,22 @@ const authReducer = createSlice({
       state.error = action.payload;
       state.message = "An error has occurred!";
     });
+
+    builder.addCase(updateLanguage.pending, (state, _action) => {
+      state.loading = true;
+      state.error = null;
+      state.message = "";
+    });
+    builder.addCase(updateLanguage.fulfilled, (state, action) => {
+      state.loading = false;
+      state.success = true;
+      state.message = "";
+    });
+    builder.addCase(updateLanguage.rejected, (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+      state.message = "An error has occurred!";
+    });
   },
 });
 

src/style.css

@@ -1,6 +1,6 @@
 #root {
   position: absolute;
-  overflow-x: hidden;
+  overflow-x: clip;
   top: 0px;
   left: 0px;
   width: 100%;
@@ -23,4 +23,4 @@
   100% {
     transform: translateY(0);
   }
-}
+}