feat: lots updates

src/routes/home/Menu.js

@@ -1,4 +1,6 @@
 // import React from 'react'
+import { useDispatch } from "react-redux";
+import { toggleSetting } from "../../app/slices/ui";
 import styled from "styled-components";
 const StyledMenus = styled.ul`
   display: flex;
@@ -29,9 +31,13 @@ const StyledMenus = styled.ul`
   }
 `;
 export default function Menu({ toggle, expand = true }) {
+  const dispatch = useDispatch();
+  const handleSetting = () => {
+    dispatch(toggleSetting());
+  };
   return (
     <StyledMenus>
-      <li className="menu">
+      <li className="menu" onClick={handleSetting}>
         <img
           src="https://static.nicegoodthings.com/project/rustchat/menu.setting.png"
           alt="setting icon"

src/routes/home/ServerDropList.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 // import { HiChevronDoubleLeft } from "react-icons/hi";
 
 const StyledWrapper = styled.div`
-  height: 56px;
+  min-height: 56px;
   padding: 0 20px;
   padding-right: 5px;
   display: flex;

src/routes/home/index.js

@@ -3,14 +3,13 @@
 import { Outlet, NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { toggleMenuExpand } from "../../app/slices/ui";
-// import { setAuthData } from "../../app/slices/auth.data";
 import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
 import Tools from "./Tools";
 import Menu from "./Menu";
 import usePreload from "./usePreload";
-
-// import CurrentUser from "./CurrentUser";
+import SettingModal from "../../common/component/Setting";
+import ChannelSettingModal from "../../common/component/ChannelSetting";
 
 import ChatIcon from "../../assets/icons/chat.svg";
 import ContactIcon from "../../assets/icons/contact.svg";
@@ -19,12 +18,12 @@ import NotificationHub from "../../common/component/NotificationHub";
 export default function HomePage() {
   const dispatch = useDispatch();
   const {
-    menuExpand,
-    authData: { token, usersVersion, afterMid },
+    ui: { menuExpand, setting, channelSetting },
+    authData: { usersVersion, afterMid },
   } = useSelector((store) => {
     return {
       authData: store.authData,
-      menuExpand: store.ui.menuExpand,
+      ui: store.ui,
     };
   });
   const { data, loading, error, success } = usePreload();
@@ -44,21 +43,24 @@ export default function HomePage() {
   }
   return (
     <>
-      <NotificationHub
-        token={token}
-        usersVersion={usersVersion}
-        afterMid={afterMid}
-      />
+      <NotificationHub usersVersion={usersVersion} afterMid={afterMid} />
       <StyledWrapper>
         <div className={`col left ${menuExpand ? "expand" : ""}`}>
           <ServerDropList data={data?.server} expand={menuExpand} />
           <nav className="nav">
             <NavLink className="link" to={"/chat"}>
-              <img src={ChatIcon} alt="chat icon" /> {menuExpand && `Chat`}
+              <img src={ChatIcon} alt="chat icon" />{" "}
+              {menuExpand && (
+                <span className="animate__animated animate__fadeIn">Chat</span>
+              )}
             </NavLink>
             <NavLink className="link" to={"/contacts"}>
               <img src={ContactIcon} alt="contact icon" />{" "}
-              {menuExpand && `Contacts`}
+              {menuExpand && (
+                <span className="animate__animated animate__fadeIn">
+                  Contacts
+                </span>
+              )}
             </NavLink>
           </nav>
           <div className="divider"></div>
@@ -70,6 +72,8 @@ export default function HomePage() {
           <Outlet />
         </div>
       </StyledWrapper>
+      {setting && <SettingModal />}
+      {channelSetting && <ChannelSettingModal id={channelSetting} />}
     </>
   );
 }

src/routes/home/styled.js

@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
     flex-direction: column;
     &.left {
       position: relative;
-      /* background: #0891B2; */
+      background: #e5e7eb;
       width: 64px;
       box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
       transition: all 0.5s ease-in;

src/routes/home/usePreload.js

@@ -30,16 +30,11 @@ export default function usePreload() {
     isError: serverError,
     data: server,
   } = useGetServerQuery(undefined, querySetting);
-  // const {
-  //   isLoading: groupsLoading,
-  //   isSuccess: groupsSuccess,
-  //   isError: groupsError,
-  //   data: groups,
-  // } = useGetChannelsQuery(undefined, querySetting);
   useEffect(() => {
     if (contacts) {
       const matchedUser = contacts.find((c) => c.uid == loginedUser.uid);
       if (!matchedUser) {
+        console.log("no matched user, redirect to login");
         dispatch(clearAuthData());
         navigate("/login");
       } else {
@@ -51,7 +46,6 @@ export default function usePreload() {
       }
     }
   }, [contacts]);
-
   return {
     loading: contactsLoading || serverLoading || !checked,
     error: contactsError && serverError,