update src/views/Dashboard/layouts/SidebarMenu/index.js

src/views/Dashboard/layouts/SidebarMenu/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import Avatar from "../../../../components/Avatar";
 import { connect } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { user, dialog } from "../../../../redux/actions";
+import { user, dialog, publicApi } from "../../../../redux/actions";
 
 const SidebarMenu = ({
   page,
@@ -11,6 +11,8 @@ const SidebarMenu = ({
   setDialog,
   user,
   sidebar,
+  changeDarkMode,
+  isDark,
 }) => {
   const navigate = useNavigate();
   const [activeDropdown, setActiveDropdown] = useState(null);
@@ -25,10 +27,12 @@ const SidebarMenu = ({
           accept: () => logout(),
           open: true,
         }),
+      dark: () => changeDarkMode(!isDark),
     };
-  }, [user]);
+  }, [user, isDark]);
 
-  const Dropdown = React.useCallback(({item}) => {
+  const Dropdown = React.useCallback(
+    ({ item }) => {
       return (
         <div className="flex flex-col">
           <div
@@ -40,13 +44,14 @@ const SidebarMenu = ({
             onClick={() => {
               if (item?.menu?.length <= 1) {
                 if (item?.name === "logout") {
-                actions['logout']();
+                  actions["logout"]();
                   return;
                 }
                 if (item?.name === "dark") {
-                return false;
+                  actions["dark"]();
+                  return;
                 }
-              actions['page'](item?.name);
+                actions["page"](item?.name);
               } else {
                 setActiveDropdown(item?.name);
               }
@@ -54,7 +59,10 @@ const SidebarMenu = ({
           >
             <div className="flex items-center">
               <img
-              src={item?.icon + (item?.name === page ? "-white.svg" : "-primary.svg")}
+                src={
+                  item?.icon +
+                  (item?.name === page ? "-white.svg" : "-primary.svg")
+                }
                 alt=""
                 className="ml-2 w-6 mb-1"
               />
@@ -105,7 +113,9 @@ const SidebarMenu = ({
           ) : null}
         </div>
       );
-  },[page, activeDropdown]);
+    },
+    [page, activeDropdown, isDark]
+  );
 
   useEffect(() => {
     if (!user) {
@@ -123,7 +133,15 @@ const SidebarMenu = ({
     >
       {sidebar?.userInfo ? (
         <div className="flex items-center mb-10">
-          <Avatar size={60} rounded={true} />
+          <Avatar
+            source={
+              user?.picFileId
+                ? `https://dnvn.ir/api/v1/file/${user?.picFileId}`
+                : null
+            }
+            size={60}
+            rounded={'rounded-full'}
+          />
           <p className="text-green7B font-bold text-base flex-1 mx-2">
             {user.firstName === null
               ? ""
@@ -141,11 +159,13 @@ const SidebarMenu = ({
 const mapStateToProps = (state) => ({
   user: state.user.status,
   sidebar: state.dashboard.sidebar,
+  isDark: state.publicApi.isDark,
 });
 
 const mapDispatchToProps = {
   logout: user.logout,
   setDialog: dialog.set,
+  changeDarkMode: publicApi.setIsDark,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(SidebarMenu);