feat: lots updates

src/routes/chat/ChannelList/NavItem.js

@@ -1,8 +1,9 @@
-import { NavLink, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import { useDispatch, useSelector } from "react-redux";
 // import { useDebounce} from "rooks";
+import StyledLink from "./styled";
 import { toggleChannelSetting } from "../../../app/slices/ui";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import { getUnreadCount } from "../utils";
@@ -47,7 +48,7 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
   const { is_public, name } = channel;
   const unreads = getUnreadCount({ mids, messageData, readIndex, loginUid });
   return (
-    <NavLink
+    <StyledLink
       data-cid={id}
       onContextMenu={(evt) => {
         contextMenuEventHandler(evt, id);
@@ -57,10 +58,10 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
       className={`link ${isActive ? "drop_over" : ""}`}
       to={`/chat/channel/${id}`}
     >
-      <span className="txt">
+      <div className="name" title={name}>
         <ChannelIcon personal={!is_public} />
-        {name}
-      </span>
+        <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
+      </div>
       <div className="icons">
         <i className="setting" onClick={handleChannelSetting}></i>
         {unreads > 0 && (
@@ -69,7 +70,7 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
           </i>
         )}
       </div>
-    </NavLink>
+    </StyledLink>
   );
 };
 

src/routes/chat/ChannelList/styled.js

@@ -0,0 +1,69 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+import settingIcon from "../../../assets/icons/setting.svg?url";
+const Styled = styled(NavLink)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-radius: 4px;
+  &:hover,
+  &.active {
+    background: rgba(116, 127, 141, 0.1);
+  }
+  > .name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    .txt {
+      color: #1c1c1e;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+      width: 160px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.read {
+        color: #616161;
+      }
+    }
+  }
+  > .icons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    > .setting {
+      visibility: hidden;
+      display: flex;
+      width: 16px;
+      height: 16px;
+      background-image: url(${settingIcon});
+      background-size: 16px;
+    }
+    > .badge {
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 20px;
+      min-width: 20px;
+      border-radius: 50%;
+      background: #bfbfbf;
+      font-weight: 900;
+      font-size: 10px;
+      line-height: 10px;
+      &.dot {
+        min-width: unset;
+        width: 6px;
+        height: 6px;
+        padding: 0;
+      }
+    }
+  }
+  &:hover > .icons > .setting {
+    visibility: visible;
+  }
+`;
+export default Styled;

src/routes/chat/styled.js

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import settingIcon from "../../assets/icons/setting.svg?url";
 const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
@@ -40,62 +39,6 @@ const StyledWrapper = styled.div`
         a {
           text-decoration: none;
         }
-        .link {
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 8px;
-          border-radius: 4px;
-          &:hover,
-          &.active {
-            background: rgba(116, 127, 141, 0.1);
-          }
-          > .txt {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: #1c1c1e;
-            font-weight: 600;
-            font-size: 14px;
-            line-height: 20px;
-          }
-          > .icons {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            > .setting {
-              visibility: hidden;
-              display: flex;
-              width: 16px;
-              height: 16px;
-              background-image: url(${settingIcon});
-              background-size: 16px;
-            }
-            > .badge {
-              color: #fff;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              height: 20px;
-              min-width: 20px;
-              border-radius: 50%;
-              background: #bfbfbf;
-              font-weight: 900;
-              font-size: 10px;
-              line-height: 10px;
-              &.dot {
-                min-width: unset;
-                width: 6px;
-                height: 6px;
-                padding: 0;
-              }
-            }
-          }
-          &:hover > .icons > .setting {
-            visibility: visible;
-          }
-        }
         .session {
           display: flex;
           align-items: center;

src/routes/chat/utils.js

@@ -24,7 +24,7 @@ export function getUnreadCount({
   console.log({ mids, loginUid, readIndex });
   // 先过滤掉from自己的
   const others = mids.filter((mid) => {
-    const { from_uid } = messageData[mid];
+    const { from_uid = 0 } = messageData[mid] || {};
     return from_uid != loginUid;
   });
   if (others.length == 0) return 0;

src/routes/home/ServerDropList.js

@@ -26,9 +26,9 @@ const StyledWrapper = styled.div`
       display: flex;
       flex-direction: column;
       gap: 4px;
+      white-space: nowrap;
       .title {
         font-weight: bold;
-        white-space: nowrap;
         font-size: 14px;
         line-height: 100%;
         color: #374151;

src/routes/home/index.js

@@ -5,7 +5,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { toggleMenuExpand } from "../../app/slices/ui";
 import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
-import Tools from "./Tools";
+// import Tools from "./Tools";
 import Loading from "./Loading";
 import Menu from "./Menu";
 import usePreload from "./usePreload";
@@ -60,7 +60,7 @@ export default function HomePage() {
             </NavLink>
           </nav>
           <div className="divider"></div>
-          <Tools expand={menuExpand} />
+          {/* <Tools expand={menuExpand} /> */}
           <Menu toggle={toggleExpand} expand={menuExpand} />
           {/* <CurrentUser expand={menuExpand} /> */}
         </div>

src/routes/home/usePreload.js

@@ -1,11 +1,7 @@
 import { useEffect } from "react";
 import { useSelector } from "react-redux";
-// import { useNavigate } from "react-router-dom";
 import initCache, { useRehydrate } from "../../app/cache";
 import { useLazyGetContactsQuery } from "../../app/services/contact";
-// import { useLazyInitStreamingQuery } from "../../app/services/streaming";
-
-// import { useGetChannelsQuery } from "../../app/services/channel";
 import { useLazyGetServerQuery } from "../../app/services/server";
 import useStreaming from "../../common/hook/useStreaming";
 // pollingInterval: 0,
@@ -15,9 +11,7 @@ import useStreaming from "../../common/hook/useStreaming";
 let request = null;
 export default function usePreload() {
   const { rehydrate, rehydrated } = useRehydrate();
-  // const [initStreaming, { isLoading: streaming }] = useLazyInitStreamingQuery();
-  // const navigate = useNavigate();
-  const store = useSelector((store) => store);
+  const loginUid = useSelector((store) => store.authData.uid);
   const { startStreaming, streaming, initializing } = useStreaming();
   const [
     getContacts,
@@ -48,21 +42,18 @@ export default function usePreload() {
   }, []);
 
   useEffect(() => {
-    // rehydrate();
     if (rehydrated) {
       getContacts();
       getServer();
     }
   }, [rehydrated]);
-  const canStreaming =
-    contactsSuccess && rehydrated && !initializing && !streaming;
+  const canStreaming = loginUid && rehydrated && !initializing && !streaming;
   useEffect(() => {
     if (canStreaming) {
-      request = startStreaming(store);
+      request = startStreaming();
     }
   }, [canStreaming]);
 
-  // console.log("loading", contactsLoading, serverLoading, !checked);
   return {
     loading: contactsLoading || serverLoading || !rehydrated,
     error: contactsError && serverError,