refactor: more TS code

src/routes/chat/ChannelChat/PinList.tsx

@@ -1,17 +1,15 @@
-// import React from "react";
-// import { useSelector } from "react-redux";
+import { FC, FormEvent } from "react";
 import styled from "styled-components";
 import usePinMessage from "../../../common/hook/usePinMessage";
 import PreviewMessage from "../../../common/component/Message/PreviewMessage";
-import IconSurprise from "../../../assets/icons/emoji.suprise.svg";
-// import IconForward from "../../../assets/icons/forward.svg";
+import IconSurprise from "../../../assets/icons/emoji.surprise.svg";
 import IconClose from "../../../assets/icons/close.svg";
 const Styled = styled.div`
   padding: 16px;
   background: #f9fafb;
   filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
   border-radius: 12px;
-  width: 406px;
+  min-width: 406px;
   > .head {
     font-weight: 600;
     font-size: 16px;
@@ -81,11 +79,14 @@ const Styled = styled.div`
     }
   }
 `;
-export default function PinList({ id }) {
+type Props = {
+  id: number;
+};
+const PinList: FC<Props> = ({ id }: Props) => {
   const { pins, unpinMessage, canPin } = usePinMessage(id);
-  const handleUnpin = (evt) => {
+  const handleUnpin = (evt: FormEvent<HTMLButtonElement>) => {
     const { mid } = evt.currentTarget.dataset;
-    console.log("unpin msg", mid);
+    if (!mid) return;
     unpinMessage(+mid);
   };
   const noPins = pins.length == 0;
@@ -125,4 +126,5 @@ export default function PinList({ id }) {
       )}
     </Styled>
   );
-}
+};
+export default PinList;

src/routes/chat/ChannelChat/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useDebounce } from "rooks";
 import { NavLink, useLocation } from "react-router-dom";
 import Tippy from "@tippyjs/react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import PinList from "./PinList";
 import FavList from "../FavList";
 import { useReadMessageMutation } from "../../../app/services/message";
@@ -23,16 +23,10 @@ import IconPin from "../../../assets/icons/pin.svg";
 import IconHeadphone from "../../../assets/icons/headphone.svg";
 
 import addIcon from "../../../assets/icons/add.svg?url";
-import {
-  // StyledNotification,
-  StyledUsers,
-  StyledChannelChat,
-  StyledHeader
-} from "./styled";
+import { StyledUsers, StyledChannelChat, StyledHeader } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
 import LoadMore from "../LoadMore";
-// import useChatScroll from "../../../common/hook/useChatScroll";
-
+import { useAppSelector } from "../../../app/store";
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const { values: agoraConfig } = useConfig("agora");
   const {
@@ -44,7 +38,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
     context: "channel",
     id: cid
   });
-  // const scrollObserveRef = useChatScroll([msgIds, appends]);
   const [toolVisible, setToolVisible] = useState("");
   const { pathname } = useLocation();
   const dispatch = useDispatch();
@@ -60,7 +53,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
     messageData,
     loginUser,
     footprint
-  } = useSelector((store) => {
+  } = useAppSelector((store) => {
     return {
       selects: store.ui.selectMessages[`channel_${cid}`],
       footprint: store.footprint,
@@ -71,10 +64,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
       messageData: store.message || {}
     };
   });
-  // const ref = useChatScroll(msgIds);
-  // const handleClearUnreads = () => {
-  //   dispatch(readMessage(msgIds));
-  // };
   useEffect(() => {
     dispatch(updateRememberedNavs());
     return () => {
@@ -91,7 +80,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   if (!data) return null;
   const { name, description, is_public, members = [], owner } = data;
   const memberIds = is_public ? userIds : members.slice(0).sort((n) => (n == owner ? -1 : 0));
-  const addVisible = loginUser?.is_admin || owner == loginUser.uid;
+  const addVisible = loginUser?.is_admin || owner == loginUser?.uid;
   console.log("channel message list", msgIds);
   const readIndex = footprint.readChannels[cid];
   const pinCount = data?.pinned_messages?.length || 0;
@@ -103,7 +92,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
         to={cid}
         context="channel"
         dropFiles={dropFiles}
-        // ref={containerRef}
         aside={
           <>
             <ul className="tools">
@@ -171,7 +159,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                 </Tooltip>
               </li>
             </ul>
-            {/* <hr className="divider" /> */}
           </>
         }
         header={
@@ -211,11 +198,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
           ) : null
         }
       >
-        <StyledChannelChat
-          // ref={scrollObserveRef}
-          id={`VOCECHAT_FEED_channel_${cid}`}
-        >
-          {/* <div className="anchor"></div> */}
+        <StyledChannelChat id={`VOCECHAT_FEED_channel_${cid}`}>
           {hasMore ? (
             <LoadMore pullUp={pullUp} />
           ) : (
@@ -246,22 +229,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
               context: "channel"
             });
           })}
-
-          {/* </div> */}
         </StyledChannelChat>
-        {/* {unreads != 0 && (
-        <StyledNotification>
-          <div className="content">
-            {unreads} new messages
-            {msgs.lastAccess
-              ? `since ${dayjs(msgs.lastAccess).format("YYYY-MM-DD h:mm:ss A")}`
-              : ""}
-          </div>
-          <button onClick={handleClearUnreads} className="clear">
-            Mark As Read
-          </button>
-        </StyledNotification>
-      )} */}
       </Layout>
     </>
   );

src/routes/home/Menu.tsx

@@ -1,4 +1,4 @@
-// import React from 'react'
+import { FC } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import Tooltip from "../../common/component/Tooltip";
 import settingIcon from "../../assets/icons/setting.svg?url";
@@ -31,7 +31,8 @@ const StyledMenus = styled.ul`
     }
   }
 `;
-export default function Menu() {
+type Props = {};
+const Menu: FC<Props> = () => {
   const { pathname } = useLocation();
   return (
     <StyledMenus>
@@ -59,4 +60,5 @@ export default function Menu() {
       </li> */}
     </StyledMenus>
   );
-}
+};
+export default Menu;

src/routes/home/index.tsx

@@ -1,5 +1,4 @@
 // import React from 'react';
-// import { useEffect } from "react";
 import { Outlet, NavLink, useLocation, useMatch } from "react-router-dom";
 import StyledWrapper from "./styled";
 import User from "./User";
@@ -36,7 +35,6 @@ export default function HomePage() {
     };
   });
   const { loading } = usePreload();
-  // console.log("index loading", loading, ready);
   if (loading || !ready) {
     return <Loading reload={true} fullscreen={true} />;
   }
@@ -60,7 +58,7 @@ export default function HomePage() {
       <Notification />
       <StyledWrapper>
         <div className={`col left`}>
-          <User uid={loginUid} />
+          {loginUid && <User uid={loginUid} />}
           <nav className="link_navs">
             <NavLink
               className={() => {

src/routes/home/styled.tsx

@@ -13,7 +13,6 @@ const StyledWrapper = styled.div`
       position: relative;
       background: transparent;
       width: 64px;
-      /* box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1); */
       transition: all 0.5s ease-in;
       > .divider {
         width: -webkit-fill-available;

src/routes/home/usePreload.ts

@@ -5,11 +5,6 @@ import { useLazyGetUsersQuery } from "../../app/services/user";
 import { useLazyGetServerQuery } from "../../app/services/server";
 import useStreaming from "../../common/hook/useStreaming";
 import { useAppSelector } from "../../app/store";
-// pollingInterval: 0,
-// const querySetting = {
-//   refetchOnMountOrArgChange: true,
-// };
-// let request = null;
 export default function usePreload() {
   const { rehydrate, rehydrated } = useRehydrate();
   const { loginUid, token } = useAppSelector((store) => {