refactor: more TS code

src/routes/chat/ChannelChat/PinList.tsx

@@ -9,7 +9,8 @@ const Styled = styled.div`
   background: #f9fafb;
   filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
   border-radius: 12px;
-  min-width: 406px;
+  min-width: 486px;
+  /* width: fit-content; */
   > .head {
     font-weight: 600;
     font-size: 16px;
@@ -106,13 +107,6 @@ const PinList: FC<Props> = ({ id }: Props) => {
               <li key={mid} className="pin">
                 <PreviewMessage mid={mid} />
                 <div className="opts">
-                  {/* <button
-                    className="btn"
-                    data-mid={mid}
-                    // onClick={handleUnpin}
-                  >
-                    <IconForward />
-                  </button> */}
                   {canPin && (
                     <button className="btn" data-mid={mid} onClick={handleUnpin}>
                       <IconClose />

src/routes/chat/ChannelChat/index.tsx

@@ -27,6 +27,7 @@ import { StyledUsers, StyledChannelChat, StyledHeader } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
 import LoadMore from "../LoadMore";
 import { useAppSelector } from "../../../app/store";
+import { AgoraConfig } from "../../../types/server";
 type Props = {
   cid?: number;
   dropFiles?: File[];
@@ -42,7 +43,6 @@ export default function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
     context: "channel",
     id: cid
   });
-  const [toolVisible, setToolVisible] = useState("");
   const { pathname } = useLocation();
   const dispatch = useDispatch();
   const [updateReadIndex] = useReadMessageMutation();
@@ -99,57 +99,37 @@ export default function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
         aside={
           <>
             <ul className="tools">
-              {agoraConfig.enabled && (
+              {(agoraConfig as AgoraConfig)?.enabled && (
                 <li className="tool">
                   <Tooltip tip="Voice/Video Chat" placement="left">
                     <IconHeadphone />
                   </Tooltip>
                 </li>
               )}
-              <Tooltip tip="Pin" placement="left" disabled={toolVisible == "pin"}>
+              <Tooltip tip="Pin" placement="left">
                 <Tippy
-                  onShow={() => {
-                    setToolVisible("pin");
-                  }}
-                  onHide={() => {
-                    setToolVisible("");
-                  }}
                   placement="left-start"
                   popperOptions={{ strategy: "fixed" }}
-                  offset={[0, 80]}
+                  offset={[0, 150]}
                   interactive
                   trigger="click"
                   content={<PinList id={cid} />}
                 >
-                  <li
-                    className={`tool ${pinCount > 0 ? "badge" : ""} ${
-                      toolVisible == "pin" ? "active" : ""
-                    } `}
-                    data-count={pinCount}
-                  >
+                  <li className={`tool ${pinCount > 0 ? "badge" : ""}`} data-count={pinCount}>
                     <IconPin />
                   </li>
                 </Tippy>
               </Tooltip>
-              <Tooltip tip="Favorite" placement="left" disabled={toolVisible == "favorite"}>
+              <Tooltip tip="Favorite" placement="left">
                 <Tippy
-                  onShow={() => {
-                    setToolVisible("favorite");
-                  }}
-                  onHide={() => {
-                    setToolVisible("");
-                  }}
                   placement="left-start"
                   popperOptions={{ strategy: "fixed" }}
-                  offset={[0, 180]}
+                  offset={[0, 162]}
                   interactive
                   trigger="click"
                   content={<FavList cid={cid} />}
                 >
-                  <li
-                    className={`tool fav ${toolVisible == "favorite" ? "active" : ""} `}
-                    data-count={pinCount}
-                  >
+                  <li className={`tool fav`} data-count={pinCount}>
                     <IconFav />
                   </li>
                 </Tippy>
@@ -184,7 +164,7 @@ export default function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
                     <div className="txt">Add members</div>
                   </div>
                 )}
-                {memberIds.map((uid) => {
+                {memberIds.map((uid: number) => {
                   return (
                     <User
                       enableContextMenu={true}

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/FavList.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent } from "react";
+import { MouseEvent, FC } from "react";
 import styled from "styled-components";
 import FavoredMessage from "../../common/component/Message/FavoredMessage";
 import IconSurprise from "../../assets/icons/emoji.surprise.svg";
@@ -82,8 +82,8 @@ const Styled = styled.div`
     }
   }
 `;
-
-export default function FavList({ cid = null, uid = null }) {
+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;
@@ -106,13 +106,6 @@ export default function FavList({ cid = null, uid = null }) {
               <li key={id} className="fav">
                 <FavoredMessage id={id} />
                 <div className="opts">
-                  {/* <button
-                    className="btn"
-                    data-mid={mid}
-                    // onClick={handleRemove}
-                  >
-                    <IconForward />
-                  </button> */}
                   <button className="btn" data-id={id} onClick={handleRemove}>
                     <IconRemove />
                   </button>
@@ -124,4 +117,5 @@ export default function FavList({ cid = null, uid = null }) {
       )}
     </Styled>
   );
-}
+};
+export default FavList;

src/routes/chat/Layout/index.tsx

@@ -14,7 +14,7 @@ interface Props {
   header: ReactElement;
   aside: ReactElement | null;
   users?: ReactElement;
-  dropFiles: File[];
+  dropFiles?: File[];
   context: "channel" | "user";
   to: number;
 }

src/routes/chat/index.tsx

@@ -15,7 +15,7 @@ import { useAppSelector } from "../../app/store";
 export default function ChatPage() {
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [usersModalVisible, setUsersModalVisible] = useState(false);
-  const { channel_id, user_id } = useParams();
+  const { channel_id = 0, user_id = 0 } = useParams();
   const { sessionUids } = useAppSelector((store) => {
     return {
       sessionUids: store.userMessage.ids
@@ -47,7 +47,7 @@ export default function ChatPage() {
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && <BlankPlaceholder />}
-          {channel_id && <ChannelChat cid={channel_id} />}
+          {channel_id && <ChannelChat cid={+channel_id} />}
           {user_id && <DMChat uid={+user_id} />}
         </div>
       </StyledWrapper>