refactor: add typescript support to project

src/routes/settingChannel/DeleteConfirmModal.tsx

@@ -1,5 +1,4 @@
-// import React from "react";
-import { useEffect } from "react";
+import { useEffect, FC } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import Modal from "../../common/component/Modal";
@@ -7,13 +6,19 @@ import { useLazyRemoveChannelQuery } from "../../app/services/channel";
 import StyledModal from "../../common/component/styled/Modal";
 import Button from "../../common/component/styled/Button";
 
-export default function DeleteConfirmModal({ id, closeModal }) {
+interface Props {
+  id?: number;
+  closeModal: () => void;
+}
+
+const DeleteConfirmModal: FC<Props> = ({ id, closeModal }) => {
   const navigateTo = useNavigate();
   // const pathMatched = useMatch(`/chat/channel/${id}`);
   const [deleteChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
   const handleDelete = () => {
     deleteChannel(id);
   };
+
   useEffect(() => {
     if (isSuccess) {
       toast.success("delete channel successfully!");
@@ -21,6 +26,7 @@ export default function DeleteConfirmModal({ id, closeModal }) {
       navigateTo("/chat");
     }
   }, [isSuccess]);
+
   if (!id) return null;
   return (
     <Modal id="modal-modal">
@@ -42,4 +48,6 @@ export default function DeleteConfirmModal({ id, closeModal }) {
       ></StyledModal>
     </Modal>
   );
-}
+};
+
+export default DeleteConfirmModal;

src/routes/settingChannel/Overview.tsx

@@ -12,7 +12,8 @@ import Label from "../../common/component/styled/Label";
 import Textarea from "../../common/component/styled/Textarea";
 import SaveTip from "../../common/component/SaveTip";
 import channelIcon from "../../assets/icons/channel.svg?url";
-import { useSelector } from "react-redux";
+import { useAppSelector } from "../../app/store";
+
 const StyledWrapper = styled.div`
   position: relative;
   width: 512px;
@@ -43,7 +44,7 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function Overview({ id = 0 }) {
-  const { loginUser, channel } = useSelector((store) => {
+  const { loginUser, channel } = useAppSelector((store) => {
     return {
       loginUser: store.contacts.byId[store.authData.uid],
       channel: store.channels.byId[id]
@@ -58,6 +59,7 @@ export default function Overview({ id = 0 }) {
     const { name, description } = values;
     updateChannel({ id, name, description });
   };
+
   const handleChange = (evt) => {
     const newValue = evt.target.value;
     const { type } = evt.target.dataset;
@@ -65,18 +67,22 @@ export default function Overview({ id = 0 }) {
       return { ...prev, [type]: newValue };
     });
   };
+
   const updateIcon = (image) => {
     updateChannelIcon({ gid: id, image });
   };
+
   const handleReset = () => {
     console.log("reset", data);
     setValues(data);
   };
+
   useEffect(() => {
     if (data) {
       setValues(data);
     }
   }, [data]);
+
   useEffect(() => {
     if (data && values) {
       const { name, description } = values;
@@ -99,7 +105,7 @@ export default function Overview({ id = 0 }) {
   if (!values || !id) return null;
   const { name, description } = values;
   const readOnly = !loginUser?.is_admin && channel?.owner != loginUser?.uid;
-  console.log("channel icon", channel);
+
   return (
     <StyledWrapper>
       <AvatarUploader type="channel" url={channel?.icon} name={name} uploadImage={updateIcon} />

src/routes/settingChannel/index.tsx

@@ -1,14 +1,16 @@
 import { useState } from "react";
-import { useSelector } from "react-redux";
 import { useParams, useNavigate, useSearchParams } from "react-router-dom";
 import LeaveChannel from "../../common/component/LeaveChannel";
 import StyledSettingContainer from "../../common/component/StyledSettingContainer";
 import DeleteConfirmModal from "./DeleteConfirmModal";
 import useNavs from "./navs";
-let from = null;
+import { useAppSelector } from "../../app/store";
+
+let from: string | null = null;
+
 export default function ChannelSetting() {
   const { cid } = useParams();
-  const { isAdmin, loginUid, channel } = useSelector((store) => {
+  const { isAdmin, loginUid, channel } = useAppSelector((store) => {
     return {
       loginUid: store.authData.uid,
       isAdmin: store.contacts.byId[store.authData.uid]?.is_admin,