fix user endpoints & dark/light theme

Author: wiseaidev

src/App.jsx

@@ -6,6 +6,7 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { indigo, pink } from "@mui/material/colors";
 import { useNylas } from "@nylas/nylas-react";
 import { userGetToken } from "@app/store/authReducer/actions";
+
 import Loading from "@app/pages/Loading";
 
 const theme = createTheme({
@@ -224,10 +225,10 @@ const darkTheme = createTheme({
 });
 
 const App = () => {
-  const { loading, currentUser, error } = useSelector((state) => state.auth);
+  const { loading, currentUser, error, selectedTheme } = useSelector((state) => state.auth);
   const [currentAuthUser, setCurrentAuthUser] = useState(currentUser);
   const [currentLanguage, setCurrentLanguage] = useState(null);
-  const [currentTheme, setCurrentTheme] = useState("light");
+  const [currentTheme, setCurrentTheme] = useState(selectedTheme);
 
   const dispatch = useDispatch();
   const Landing = lazy(() => import("@app/pages/Landing"));
@@ -248,6 +249,14 @@ const App = () => {
     setCurrentLanguage(localStorage.getItem("language"));
   }, []);
 
+  useEffect(() => {
+    if (selectedTheme === "light") {
+      setCurrentTheme("dark");
+    } else {
+      setCurrentTheme("light");
+    }
+  }, [selectedTheme]);
+
   useEffect(() => {
     if (!nylas) {
       return;
@@ -257,9 +266,8 @@ const App = () => {
       dispatch(userGetToken({ nylas: nylas }));
     }
   }, [nylas]);
-  console.log(currentAuthUser);
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={selectedTheme == "light" ? theme : darkTheme}>
       <Suspense fallback={<Loading />}>
         <Routes>
           <Route

src/components/AppHeader/index.jsx

@@ -15,6 +15,10 @@ import {
   setFilterType,
   toggleSidebarCollapsed,
 } from "@app/store/mailAppReducer/actions";
+import {
+  uploadPicture,
+  userLogout
+} from "@app/store/authReducer/actions";
 import { useTheme } from "@mui/material/styles";
 
 import AppBar from "@mui/material/AppBar";
@@ -28,8 +32,9 @@ import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
 import Link from "@mui/material/Link";
 
-import ProfileDetail from "../ProfileDetail";
-import CustomAvatar from "../CustomAvatar";
+import ProfileDetail from "@app/components/ProfileDetail";
+import CustomAvatar from "@app/components/CustomAvatar";
+import EditInfo from "@app/components/EditInfo";
 import { useNavigate } from "react-router-dom";
 
 import { useDropzone } from "react-dropzone";
@@ -46,14 +51,14 @@ const sections = ["Banner", "Features", "Services", "Team", "Faq"];
 const settings = ["View Profile", "Edit Profile", "Log out"];
 
 const AppHeader = ({ viewMode, handleViewModeChange }) => {
-  const [anchorElNav, setAnchorElNav] = React.useState(null);
-  const [anchorElUser, setAnchorElUser] = React.useState(null);
-  const [disableLoader, setDisableLoader] = React.useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [anchorElNav, setAnchorElNav] = useState(null);
+  const [anchorElUser, setAnchorElUser] = useState(null);
+  const [disableLoader, setDisableLoader] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
 
-  const [edit, setEdit] = React.useState(false);
+  const [edit, setEdit] = useState(false);
   const { loading, currentUser, error } = useSelector((state) => state.auth);
-  const [currentAuthUser, setCurrentAuthUser] = React.useState(currentUser);
+  const [currentAuthUser, setCurrentAuthUser] = useState(currentUser);
 
   const { filterType } = useSelector(({ mailApp }) => mailApp);
   const { searchText } = filterType;
@@ -95,18 +100,6 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
   const navigate = useNavigate();
   const theme = useTheme();
 
-  const handleConnectClick = (event) => {
-    setDisableLoader(true);
-    const accountInfo = JSON.parse(localStorage.getItem("user"));
-    if (accountInfo) {
-      dispatch(userLogin({ email: "test@test.com", password: "test" }));
-    } else {
-      // TODO: Register user
-    }
-  };
-  const handleCreateClick = (event) => {
-    navigate("/mail");
-  };
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget);
   };
@@ -132,10 +125,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
         setEdit(true);
         break;
       case 2:
-        localStorage.clear();
-        setTimeout(() => {
-          window.location.reload();
-        }, 1000);
+        dispatch(userLogout())
         break;
       default:
         break;
@@ -148,15 +138,15 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
   const { getRootProps, getInputProps } = useDropzone({
     accept: "image/*",
     onDrop: (files) => {
-      // TODO: dispatch(uploadPicture(files[0]));
+      dispatch(uploadPicture(files[0]));
     },
   });
 
   useEffect(() => {
     setCurrentAuthUser(JSON.parse(localStorage.getItem("user")));
     setDisableLoader(false);
     // eslint-disable-next-line
-  }, [localStorage.getItem("token")]);
+  }, []);
   return (
     <Box
       sx={{
@@ -262,7 +252,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
         <Box sx={{ flexGrow: 0 }}>
           <Tooltip title="Open settings">
             <IconButton onClick={handleOpenUserMenu} sx={{ ml: 7 }}>
-              <Avatar alt="user name" src={currentAuthUser?.author_avatar} />
+              <CustomAvatar alt="user name" src={currentAuthUser?.profile_picture} />
             </IconButton>
           </Tooltip>
           <Menu
@@ -330,8 +320,8 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
                 <IconButton className="icon-btn-root" {...getRootProps()}>
                   <CustomAvatar
                     src={
-                      currentAuthUser?.author_avatar
-                        ? currentAuthUser?.author_avatar
+                      currentAuthUser?.profile_picture
+                        ? currentAuthUser?.profile_picture
                         : ""
                     }
                   />
@@ -359,6 +349,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
           </Popover>
         </Box>
       </Box>
+      <EditInfo  open={edit} onCloseDialog={handleEditClose} />
     </Box>
   );
 };

src/components/CustomAvatar/index.jsx

@@ -4,6 +4,7 @@ import { Avatar } from "@mui/material";
 import { componentColors } from "../Helper";
 
 const colorOptions = [...componentColors, "random"];
+const baseURL = process.env.VITE_SERVER_URL || "http://localhost:8000/api/v1";
 
 const getRandomColor = () => {
   return colorOptions[Math.floor(Math.random() * 11)];
@@ -82,7 +83,7 @@ const CustomAvatar = React.forwardRef(
         ? alt.substr(0, phCharLength).toUpperCase()
         : null;
 
-    src = `${process.env.VITE_SERVER_URL}/profile/${src}`;
+    src = `${baseURL}/${src}`;
 
     return (
       <Avatar