refactor: more TS code

src/app/slices/message.user.ts

@@ -19,14 +19,14 @@ const userMsgSlice = createSlice({
       return initialState;
     },
     fillUserMsg(state, action: PayloadAction<{ [id: number]: any }>) {
-      state.ids = Object.keys(action.payload);
+      state.ids = Object.keys(action.payload).map((k) => +k);
       state.byId = action.payload;
     },
     addUserMsg(state, action: PayloadAction<{ id: number; mid: number; local_id: number }>) {
       const { id, mid, local_id } = action.payload;
       if (state.byId[id]) {
-        const midExisted = state.byId[id].findIndex((id) => id == mid) > -1;
-        const localMsgExisted = state.byId[id].findIndex((id) => id == local_id) > -1;
+        const midExisted = state.byId[id].findIndex((id: number) => id == mid) > -1;
+        const localMsgExisted = state.byId[id].findIndex((id: number) => id == local_id) > -1;
         if (midExisted || localMsgExisted) return;
         state.byId[id].push(+mid);
         // 只要有新消息，就检查下
@@ -41,7 +41,7 @@ const userMsgSlice = createSlice({
     removeUserMsg(state, action) {
       const { id, mid } = action.payload;
       if (state.byId[id]) {
-        const idx = state.byId[id].findIndex((i) => i == mid);
+        const idx = state.byId[id].findIndex((i: number) => i == mid);
         if (idx > -1) {
           // 存在 则再删除
           state.byId[id].splice(idx, 1);
@@ -51,7 +51,7 @@ const userMsgSlice = createSlice({
     replaceUserMsg(state, action) {
       const { id, localMid, serverMid } = action.payload;
       if (state.byId[id]) {
-        const localIdx = state.byId[id].findIndex((i) => i == localMid);
+        const localIdx = state.byId[id].findIndex((i: number) => i == localMid);
         if (localIdx > -1 && serverMid) {
           // 存在 则再删除
           state.byId[id].splice(localIdx, 1, serverMid);

src/app/slices/ui.ts

@@ -45,7 +45,7 @@ const uiSlice = createSlice({
     setReady(state) {
       state.ready = true;
     },
-    updateOnline(state, action) {
+    updateOnline(state, action: PayloadAction<boolean>) {
       state.online = action.payload;
     },
     toggleMenuExpand(state) {

src/common/component/Message/ContextMenu.tsx

@@ -42,10 +42,8 @@ export default function MessageContextMenu({
   const { setReplying } = useSendMessage({ context, to: contextId });
   const handleSelect = () => {
     dispatch(updateSelectMessages({ context, id: contextId, data: mid }));
-    // hideAll();
   };
   const handleReply = () => {
-    // console.log("dddd", contextId, mid);
     if (contextId) {
       setReplying(mid);
     }

src/common/component/Message/EditMessage.tsx

@@ -1,10 +1,10 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, ChangeEvent, KeyboardEvent, FC } from "react";
 import styled from "styled-components";
 import TextareaAutosize from "react-textarea-autosize";
 import { useKey } from "rooks";
-import { useSelector } from "react-redux";
 import { useEditMessageMutation } from "../../../app/services/message";
 import { ContentTypes } from "../../../app/config";
+import { useAppSelector } from "../../../app/store";
 
 const StyledWrapper = styled.div`
   width: 100%;
@@ -46,10 +46,13 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-
-export default function EditMessage({ mid, cancelEdit }) {
+type Props = {
+  mid: number;
+  cancelEdit: () => void;
+};
+const EditMessage: FC<Props> = ({ mid, cancelEdit }) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const msg = useSelector((store) => store.message[mid] || {});
+  const msg = useAppSelector((store) => store.message[mid] || {});
   const [shift, setShift] = useState(false);
   const [enter, setEnter] = useState(false);
   const [currMsg, setCurrMsg] = useState(msg.content);
@@ -77,16 +80,14 @@ export default function EditMessage({ mid, cancelEdit }) {
     },
     { eventTypes: ["keydown", "keyup"], target: inputRef }
   );
-  const handleMsgChange = (evt) => {
+  const handleMsgChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
     if (enter && !shift) {
       handleSave();
     } else {
       setCurrMsg(evt.target.value);
     }
   };
-  const handleInputKeydown = (e) => {
-    console.log("keydown event", e);
-    // if(e.key==="Esc")
+  const handleInputKeydown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     setEnter(e.key === "Enter");
   };
   const handleSave = () => {
@@ -129,4 +130,5 @@ export default function EditMessage({ mid, cancelEdit }) {
       </div>
     </StyledWrapper>
   );
-}
+};
+export default EditMessage;

src/common/hook/usePWABadge.ts

@@ -1,18 +0,0 @@
-import { useEffect } from "react";
-import PWABadge from "pwa-badge";
-
-export default function usePWABadge() {
-  // Create an Instance
-  const badge = new PWABadge();
-  useEffect(() => {
-    if (badge.isSupported()) {
-      badge.asyncSetBadge(2).catch((error) => {
-        console.error(error);
-      });
-    }
-  }, []);
-
-  return {
-    isSupported: badge.isSupported()
-  };
-}

src/common/hook/usePinMessage.ts

@@ -12,7 +12,7 @@ export default function usePinMessage(cid: number) {
     };
   });
   const [pin, { isError, isLoading, isSuccess }] = usePinMessageMutation();
-  const [unpin, { isError: isUnpinError, isLoading: isUnpining, isSuccess: isUnpinSuccess }] =
+  const [unpin, { isError: isUnpinError, isLoading: isUnpinning, isSuccess: isUnpinSuccess }] =
     useUnpinMessageMutation();
   const pinMessage = (mid: number) => {
     if (!mid || !cid) return;
@@ -46,7 +46,7 @@ export default function usePinMessage(cid: number) {
     isPining: isLoading,
     isSuccess,
     isUnpinError,
-    isUnpining,
+    isUnpinning,
     isUnpinSuccess
   };
 }

src/common/hook/useSendMessage.ts

@@ -19,14 +19,13 @@ interface SendMessagesDTO {
 }
 
 interface SendMessageDTO {
-  type: "text";
-  content: string;
-  properties: object;
-  reply_mid?: number;
+  context: "user" | "channel";
+  from: number;
+  to: number;
 }
 
-export default function useSendMessage(props?: Props) {
-  const { context = "user", from = null, to = null } = props || {};
+const useSendMessage = (props: Props) => {
+  const { context = "user", from, to = null } = props;
   const dispatch = useAppDispatch();
   const stageFiles = useAppSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
   const [replyMessage, { isError: replyErr, isLoading: replying, isSuccess: replySuccess }] =
@@ -110,4 +109,5 @@ export default function useSendMessage(props?: Props) {
     isSending: userSending || channelSending || replying,
     isSuccess: channelSuccess || userSuccess || replySuccess
   };
-}
+};
+export default useSendMessage;

src/routes/chat/FavList.tsx

@@ -1,9 +1,7 @@
-// import React from "react";
-// import { useSelector } from "react-redux";
+import { MouseEvent } from "react";
 import styled from "styled-components";
 import FavoredMessage from "../../common/component/Message/FavoredMessage";
-import IconSurprise from "../../assets/icons/emoji.suprise.svg";
-// import IconForward from "../../../assets/icons/forward.svg";
+import IconSurprise from "../../assets/icons/emoji.surprise.svg";
 import IconRemove from "../../assets/icons/close.svg";
 import useFavMessage from "../../common/hook/useFavMessage";
 
@@ -87,7 +85,7 @@ const Styled = styled.div`
 
 export default function FavList({ cid = null, uid = null }) {
   const { favorites, removeFavorite } = useFavMessage({ cid, uid });
-  const handleRemove = (evt) => {
+  const handleRemove = (evt: MouseEvent<HTMLButtonElement>) => {
     const { id } = evt.currentTarget.dataset;
     console.log("remove fav", id);
     removeFavorite(id);

src/routes/chat/index.tsx

@@ -1,7 +1,6 @@
 // import React from 'react';
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
 
 import StyledWrapper from "./styled";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
@@ -12,11 +11,12 @@ import DMChat from "./DMChat";
 import UsersModal from "../../common/component/UsersModal";
 import ChannelModal from "../../common/component/ChannelModal";
 import SessionList from "./SessionList";
+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 { sessionUids } = useSelector((store) => {
+  const { sessionUids } = useAppSelector((store) => {
     return {
       sessionUids: store.userMessage.ids
     };
@@ -48,7 +48,7 @@ export default function ChatPage() {
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && <BlankPlaceholder />}
           {channel_id && <ChannelChat cid={channel_id} />}
-          {user_id && <DMChat uid={user_id} />}
+          {user_id && <DMChat uid={+user_id} />}
         </div>
       </StyledWrapper>
     </>

src/routes/chat/useSession.ts

@@ -1,25 +0,0 @@
-import { useState } from "react";
-// import { useUpdateChannelMutation } from "../../app/services/channel";
-import { useUpdateMuteSettingMutation } from "../../app/services/user";
-import { useReadMessageMutation } from "../../app/services/message";
-import { useAppSelector } from "../../app/store";
-
-export default function useSession({ type, id }) {
-  const [inviteModalVisible, setInviteModalVisible] = useState(false);
-  const [muteChannel] = useUpdateMuteSettingMutation();
-  const [updateReadIndex] = useReadMessageMutation();
-  const { messageData, userData, channelData } = useAppSelector((store) => {
-    return {
-      messageData: store.message,
-      userData: store.users.byId,
-      channelData: store.channels.byId
-    };
-  });
-  const toggleInviteModal = () => {
-    setInviteModalVisible((prev) => !prev);
-  };
-  return {
-    inviteModalVisible,
-    toggleInviteModal
-  };
-}

src/routes/home/index.tsx

@@ -6,7 +6,6 @@ import User from "./User";
 import Loading from "../../common/component/Loading";
 import Menu from "./Menu";
 import usePreload from "./usePreload";
-import usePWABadge from "../../common/hook/usePWABadge";
 import Tooltip from "../../common/component/Tooltip";
 import Notification from "../../common/component/Notification";
 import Manifest from "../../common/component/Manifest";
@@ -18,7 +17,6 @@ import FolderIcon from "../../assets/icons/folder.svg";
 import { useAppSelector } from "../../app/store";
 // const routes = ["/setting", "/setting/channel/:cid"];
 export default function HomePage() {
-  usePWABadge();
   const isHomePath = useMatch(`/`);
   const isChatHomePath = useMatch(`/chat`);
   const { pathname } = useLocation();