refactor: more TS code

src/routes/chat/ChannelList/NavItem.tsx

@@ -17,8 +17,8 @@ import { getUnreadCount } from "../utils";
 import { useAppSelector } from "../../../app/store";
 interface IProps {
   id: number;
-  setFiles: () => void;
-  toggleRemoveConfirm: () => void;
+  setFiles: (files: File[]) => void;
+  toggleRemoveConfirm: (id: number) => void;
 }
 const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
   const { pathname } = useLocation();

src/routes/chat/ChannelList/index.tsx

@@ -3,13 +3,13 @@ import DeleteConfirmModal from "../../settingChannel/DeleteConfirmModal";
 import NavItem from "./NavItem";
 import { useAppSelector } from "../../../app/store";
 
-export default function ChannelList({ setDropFiles }) {
-  const [currId, setCurrId] = useState(null);
+export default function ChannelList({ setDropFiles }: { setDropFiles: (files: File[]) => void }) {
+  const [currId, setCurrId] = useState<number>();
   const { channelIds } = useAppSelector((store) => {
     return { channelIds: store.channels.ids };
   });
 
-  const setRemoveChannel = (cid = undefined) => {
+  const setRemoveChannel = (cid?: number) => {
     setCurrId(cid);
   };
 

src/routes/chat/DMChat/index.tsx

@@ -17,7 +17,7 @@ import useMessageFeed from "../../../common/hook/useMessageFeed";
 import { useAppSelector } from "../../../app/store";
 type Props = {
   uid: number;
-  dropFiles?: [File];
+  dropFiles?: File[];
 };
 const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
   const {

src/routes/chat/DMList/NavItem.tsx

@@ -15,6 +15,7 @@ import { renderPreviewMessage } from "../utils";
 import User from "../../../common/component/User";
 import { ContentTypes } from "../../../app/config";
 import { useAppSelector } from "../../../app/store";
+import { ArchiveMessage } from "../../../types/resource";
 interface IProps {
   uid: number;
   mid?: number;
@@ -22,7 +23,7 @@ interface IProps {
   setFiles: () => void;
 }
 const NavItem: FC<IProps> = ({ uid, mid = 0, unreads, setFiles }) => {
-  const [previewMsg, setPreviewMsg] = useState(null);
+  const [previewMsg, setPreviewMsg] = useState<ArchiveMessage>();
   const { messages: normalizedMessages, normalizeMessage } = useNormalizeMessage();
   const dispatch = useDispatch();
   const pathMatched = useMatch(`/chat/dm/${uid}`);
@@ -63,7 +64,7 @@ const NavItem: FC<IProps> = ({ uid, mid = 0, unreads, setFiles }) => {
   }, [currMsg]);
   useEffect(() => {
     if (normalizedMessages) {
-      setPreviewMsg(normalizedMessages.pop());
+      setPreviewMsg(normalizedMessages?.pop());
     }
   }, [normalizedMessages]);
 

src/routes/chat/DMList/index.tsx

@@ -5,7 +5,7 @@ import { useAppSelector } from "../../../app/store";
 
 interface Props {
   uids: number[];
-  setDropFiles: () => void;
+  setDropFiles: (files: File[]) => void;
 }
 
 const DMList: FC<Props> = ({ uids, setDropFiles }) => {

src/routes/chat/FavList.tsx

@@ -86,7 +86,7 @@ type Props = { cid?: number; uid?: number };
 const FavList: FC<Props> = ({ cid = null, uid = null }) => {
   const { favorites, removeFavorite } = useFavMessage({ cid, uid });
   const handleRemove = (evt: MouseEvent<HTMLButtonElement>) => {
-    const { id } = evt.currentTarget.dataset;
+    const { id = "" } = evt.currentTarget.dataset;
     console.log("remove fav", id);
     removeFavorite(id);
   };

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;

src/routes/chat/index.team.tsx

@@ -9,8 +9,6 @@ import AddIcon from "../../assets/icons/add.svg";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 import Server from "../../common/component/Server";
 import Tooltip from "../../common/component/Tooltip";
-// import User from "../../common/component/User";
-// import CurrentUser from "../../common/component/CurrentUser";
 import ChannelChat from "./ChannelChat";
 import DMChat from "./DMChat";
 import ChannelList from "./ChannelList";
@@ -20,8 +18,8 @@ import DMList from "./DMList";
 import { useAppSelector } from "../../app/store";
 
 export default function ChatPage() {
-  const [channelDropFiles, setChannelDropFiles] = useState([]);
-  const [userDropFiles, setUserDropFiles] = useState([]);
+  const [channelDropFiles, setChannelDropFiles] = useState<File[]>([]);
+  const [userDropFiles, setUserDropFiles] = useState<File[]>([]);
   const { sessionUids } = useAppSelector((store) => {
     return {
       sessionUids: store.userMessage.ids
@@ -40,7 +38,7 @@ export default function ChatPage() {
     const { currentTarget } = evt;
     currentTarget.classList.toggle("collapse");
   };
-  const tmpUid = sessionUids.findIndex((i) => i == +user_id) > -1 ? null : user_id;
+  const tmpUid = sessionUids.findIndex((i) => i == +user_id) > -1 ? 0 : +user_id;
   // console.log("temp uid", tmpUid);
   const placeholderVisible = !channel_id && !user_id;
   return (
@@ -87,8 +85,8 @@ export default function ChatPage() {
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && <BlankPlaceholder />}
-          {channel_id && <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />}
-          {user_id && <DMChat uid={user_id} dropFiles={userDropFiles} />}
+          {channel_id && <ChannelChat cid={+channel_id} dropFiles={channelDropFiles} />}
+          {user_id && <DMChat uid={+user_id} dropFiles={userDropFiles} />}
         </div>
       </StyledWrapper>
     </>

src/routes/chat/utils.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement, ReactNode } from "react";
 import dayjs from "dayjs";
 import styled from "styled-components";
 import reactStringReplace from "react-string-replace";
@@ -60,7 +60,7 @@ export const renderPreviewMessage = (message = null) => {
         res = reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
           console.log("match", match);
           const uid = match.trim().slice(1);
-          return <Mention key={idx} uid={uid} textOnly={true} />;
+          return <Mention key={idx} uid={+uid} textOnly={true} />;
         });
       }
       break;