refactor: more TS code

src/routes/chat/ChannelList/NavItem.tsx

@@ -33,7 +33,14 @@ const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
     handleContextMenuEvent,
     hideContextMenu
   } = useContextMenu();
-  const { channel, mids, messageData, readIndex, muted, loginUid } = useAppSelector((store) => {
+  const {
+    channel,
+    mids = [],
+    messageData,
+    readIndex,
+    muted,
+    loginUid = 0
+  } = useAppSelector((store) => {
     return {
       channel: store.channels.byId[id],
       mids: store.channelMessage[id],
@@ -76,7 +83,7 @@ const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
       updateReadIndex(param);
     }
   };
-  const toggleInviteModalVisible = (evt) => {
+  const toggleInviteModalVisible = (evt?: Event) => {
     if (evt) {
       evt.preventDefault();
       evt.stopPropagation();
@@ -87,6 +94,7 @@ const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
     const data = muted ? { remove_groups: [id] } : { add_groups: [{ gid: id }] };
     muteChannel(data);
   };
+  if (!channel) return null;
   const { is_public, name, owner } = channel;
   const { unreads = 0, mentions = [] } = getUnreadCount({
     mids,
@@ -119,10 +127,6 @@ const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
                 title: muted ? "Unmute" : "Mute",
                 handler: handleMute
               },
-              // {
-              //   title: "Notification Settings",
-              //   underline: true,
-              // },
               {
                 title: "Invite People",
                 handler: toggleInviteModalVisible

src/routes/chat/LoadMore.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, FC } from "react";
 import styled from "styled-components";
 import { Waveform } from "@uiball/loaders";
 
@@ -10,8 +10,11 @@ const Styled = styled.div`
   width: 100%;
   padding: 30px 0;
 `;
-export default function LoadMore({ pullUp = null }) {
-  const ref = useRef(undefined);
+type Props = {
+  pullUp: () => void | null;
+};
+const LoadMore: FC<Props> = ({ pullUp = null }) => {
+  const ref = useRef<HTMLDivElement>();
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
@@ -20,7 +23,7 @@ export default function LoadMore({ pullUp = null }) {
           //   const currEle = entry.target;
           if (intersecting && pullUp) {
             // load more
-            console.log("inview");
+            // console.log("inview");
             pullUp();
           }
         });
@@ -29,7 +32,7 @@ export default function LoadMore({ pullUp = null }) {
     );
     const currEle = ref?.current;
     if (currEle) {
-      observer.observe(ref.current);
+      observer.observe(currEle);
     }
     return () => {
       if (currEle) {
@@ -39,7 +42,8 @@ export default function LoadMore({ pullUp = null }) {
   }, [ref, pullUp]);
   return (
     <Styled ref={ref}>
-      <Waveform className="loading" size={24} lineWeight={5} speed={1} color="#ccc" />
+      <Waveform size={24} lineWeight={5} speed={1} color="#ccc" />
     </Styled>
   );
-}
+};
+export default LoadMore;

src/routes/chat/SessionList/styled.tsx

@@ -29,7 +29,6 @@ const Styled = styled.ul`
           height: 40px;
           &.channel_default {
             padding: 5px;
-            /* height: 35px; */
           }
         }
       }

src/routes/chat/utils.tsx

@@ -12,7 +12,17 @@ import { updateSelectMessages } from "../../app/slices/ui";
 import Mention from "../../common/component/Message/Mention";
 import { useAppSelector } from "../../app/store";
 
-export function getUnreadCount({ mids = [], messageData = {}, loginUid = 0, readIndex = 0 }) {
+export function getUnreadCount({
+  mids = [],
+  messageData = {},
+  loginUid = 0,
+  readIndex = 0
+}: {
+  mids?: number[];
+  messageData: object;
+  loginUid: number;
+  readIndex: number;
+}) {
   // console.log({ mids, loginUid, readIndex });
   // 先过滤掉空信息和from自己的
   const others = mids.filter((mid) => {