refactor: more TS code

src/routes/chat/SessionList/ContextMenu.tsx

@@ -1,3 +1,4 @@
+import { FC, ReactElement } from "react";
 import Tippy from "@tippyjs/react";
 import { useDispatch } from "react-redux";
 import { useNavigate, useLocation, useMatch } from "react-router-dom";
@@ -7,8 +8,17 @@ import { removeUserSession } from "../../../app/slices/message.user";
 import ContextMenu from "../../../common/component/ContextMenu";
 import useUserOperation from "../../../common/hook/useUserOperation";
 import { useAppSelector } from "../../../app/store";
-
-export default function SessionContextMenu({
+type Props = {
+  context: "user" | "channel";
+  id: number;
+  visible: boolean;
+  mid: number;
+  hide: () => void;
+  deleteChannel: (param: number) => void;
+  setInviteChannelId: (param: number) => void;
+  children: ReactElement;
+};
+const SessionContextMenu: FC<Props> = ({
   context = "user",
   id,
   visible,
@@ -17,10 +27,10 @@ export default function SessionContextMenu({
   deleteChannel,
   setInviteChannelId,
   children
-}) {
+}) => {
   const { canCopyEmail, copyEmail, canDeleteChannel } = useUserOperation({
-    uid: context == "user" ? id : null,
-    cid: context == "channel" ? id : null
+    uid: context == "user" ? id : undefined,
+    cid: context == "channel" ? id : undefined
   });
   const [muteChannel] = useUpdateMuteSettingMutation();
   const [updateReadIndex] = useReadMessageMutation();
@@ -114,4 +124,5 @@ export default function SessionContextMenu({
       {children}
     </Tippy>
   );
-}
+};
+export default SessionContextMenu;

src/routes/chat/SessionList/Session.tsx

@@ -16,8 +16,8 @@ interface IProps {
   type?: "user" | "channel";
   id: number;
   mid: number;
-  setDeleteChannelId: () => void;
-  setInviteChannelId: () => void;
+  setDeleteChannelId: (param: number) => void;
+  setInviteChannelId: (param: number) => void;
 }
 const Session: FC<IProps> = ({
   type = "user",
@@ -52,12 +52,17 @@ const Session: FC<IProps> = ({
   );
 
   const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
-  const [data, setData] = useState(null);
+  const [data, setData] = useState<{
+    name: string;
+    icon: string;
+    mid: number;
+    is_public: boolean;
+  }>();
   const { messageData, userData, channelData, readIndex, loginUid, mids, muted } = useAppSelector(
     (store) => {
       return {
         mids: type == "user" ? store.userMessage.byId[id] : store.channelMessage[id],
-        loginUid: store.authData.user?.uid,
+        loginUid: store.authData.user?.uid || 0,
         readIndex:
           type == "user" ? store.footprint.readUsers[id] : store.footprint.readChannels[id],
         messageData: store.message,
@@ -71,10 +76,15 @@ const Session: FC<IProps> = ({
   useEffect(() => {
     const tmp = type == "user" ? userData[id] : channelData[id];
     if (!tmp) return;
-    const { name, icon, avatar, is_public = true } = tmp;
-    const session =
-      type == "user" ? { name, icon: avatar, mid, is_public } : { name, icon, mid, is_public };
-    setData(session);
+    if ("avatar" in tmp) {
+      // user
+      const { name, avatar } = tmp;
+      setData({ name, icon: avatar, mid, is_public: true });
+    } else {
+      // channel
+      const { name, icon = "", is_public } = tmp;
+      setData({ name, icon, mid, is_public });
+    }
   }, [id, mid, type, userData, channelData]);
   if (!data) return null;
   const previewMsg = messageData[mid] || {};

src/routes/chat/SessionList/index.tsx

@@ -1,14 +1,24 @@
+import { FC } from "react";
 import { useState, useEffect } from "react";
 import Styled from "./styled";
 import Session from "./Session";
 import DeleteChannelConfirmModal from "../../settingChannel/DeleteConfirmModal";
 import InviteModal from "../../../common/component/InviteModal";
 import { useAppSelector } from "../../../app/store";
-
-export default function SessionList({ tempSession = null }) {
-  const [deleteId, setDeleteId] = useState(null);
-  const [inviteChannelId, setInviteChannelId] = useState(null);
-  const [sessions, setSessions] = useState([]);
+export interface ChatSession {
+  key: string;
+  type: "user" | "channel";
+  id: number;
+  mid?: number;
+  unread?: number;
+}
+type Props = {
+  tempSession: ChatSession;
+};
+const SessionList: FC<Props> = ({ tempSession }) => {
+  const [deleteId, setDeleteId] = useState<number>();
+  const [inviteChannelId, setInviteChannelId] = useState<number>();
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
   const { channelIDs, DMs, readChannels, readUsers, channelMessage, userMessage, loginUid } =
     useAppSelector((store) => {
       return {
@@ -26,7 +36,7 @@ export default function SessionList({ tempSession = null }) {
     const cSessions = channelIDs.map((id) => {
       const mids = channelMessage[id];
       if (!mids || mids.length == 0) {
-        return { key: `channel_${id}`, mid: null, unreads: 0, id, type: "channel" };
+        return { key: `channel_${id}`, unreads: 0, id, type: "channel" };
       }
       const mid = [...mids].pop();
       return { key: `channel_${id}`, id, mid, type: "channel" };
@@ -34,13 +44,15 @@ export default function SessionList({ tempSession = null }) {
     const uSessions = DMs.map((id) => {
       const mids = userMessage[id];
       if (!mids || mids.length == 0) {
-        return { key: `user_${id}`, mid: null, unreads: 0, id, type: "user" };
+        return { key: `user_${id}`, unreads: 0, id, type: "user" };
       }
       const mid = [...mids].pop();
       return { key: `user_${id}`, type: "user", id, mid };
     });
-    const tmps = [...cSessions, ...uSessions].sort((a, b) => {
-      return b.mid - a.mid;
+    const tmps = [...(cSessions as ChatSession[]), ...(uSessions as ChatSession[])].sort((a, b) => {
+      const { mid: aMid = 0 } = a;
+      const { mid: bMid = 0 } = b;
+      return bMid - aMid;
     });
     setSessions(tempSession ? [tempSession, ...tmps] : tmps);
   }, [
@@ -58,7 +70,7 @@ export default function SessionList({ tempSession = null }) {
     <>
       <Styled>
         {sessions.map((s) => {
-          const { key, type, id, mid } = s;
+          const { key, type, id, mid = 0 } = s;
           return (
             <Session
               key={key}
@@ -67,28 +79,28 @@ export default function SessionList({ tempSession = null }) {
               mid={mid}
               setInviteChannelId={setInviteChannelId}
               setDeleteChannelId={setDeleteId}
-              className="session"
             />
           );
         })}
       </Styled>
-      {deleteId && (
+      {!!deleteId && (
         <DeleteChannelConfirmModal
           id={deleteId}
           closeModal={() => {
-            setDeleteId(null);
+            setDeleteId(0);
           }}
         />
       )}
-      {inviteChannelId && (
+      {!!inviteChannelId && (
         <InviteModal
           type="channel"
           cid={inviteChannelId}
           closeModal={() => {
-            setInviteChannelId(null);
+            setInviteChannelId(0);
           }}
         />
       )}
     </>
   );
-}
+};
+export default SessionList;