refactor: add typescript definition

src/common/component/ChannelModal/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, FC, MouseEvent, ChangeEvent } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import Modal from "../Modal";
@@ -6,24 +6,35 @@ import Button from "../styled/Button";
 import ChannelIcon from "../ChannelIcon";
 import Contact from "../Contact";
 import StyledWrapper from "./styled";
-// import StyledToggle from "../../component/styled/Toggle";
 import StyledCheckbox from "../styled/Checkbox";
 import useFilteredUsers from "../../hook/useFilteredUsers";
-
 import { useCreateChannelMutation } from "../../../app/services/channel";
 import { useAppSelector } from "../../../app/store";
 
-export default function ChannelModal({ personal = false, closeModal }) {
+interface Props {
+  personal?: boolean;
+  closeModal: () => void;
+}
+
+interface CreateChannelDTO {
+  name: string;
+  description: string;
+  members?: number[];
+  is_public: boolean;
+}
+
+const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
   const { contactsData, loginUid } = useAppSelector((store) => {
     return { contactsData: store.contacts.byId, loginUid: store.authData.uid };
   });
   const navigateTo = useNavigate();
-  const [data, setData] = useState({
+  const [data, setData] = useState<CreateChannelDTO>({
     name: "",
     description: "",
     members: [loginUid],
     is_public: !personal
   });
+
   const { contacts, input, updateInput } = useFilteredUsers();
   const [createChannel, { isSuccess, isError, isLoading, data: newChannelId }] =
     useCreateChannelMutation();
@@ -35,6 +46,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
   //   });
   // };
   const handleCreate = () => {
+    // todo: add field validation (maxLength, text format, trim)
     if (!data.name) {
       toast("please input channel name");
       return;
@@ -46,11 +58,13 @@ export default function ChannelModal({ personal = false, closeModal }) {
     createChannel(data);
   };
 
+  // todo: delete the following code and use common error handler instead
   useEffect(() => {
     if (isError) {
       toast.error("create new channel failed");
     }
   }, [isError]);
+
   useEffect(() => {
     if (isSuccess) {
       toast.success("create new channel success");
@@ -59,26 +73,25 @@ export default function ChannelModal({ personal = false, closeModal }) {
     }
   }, [isSuccess, newChannelId]);
 
-  const handleNameInput = (evt) => {
-    setData((prev) => {
-      return { ...prev, name: evt.target.value };
-    });
+  const handleNameInput = (evt: ChangeEvent<HTMLInputElement>) => {
+    setData((prev) => ({ ...prev, name: evt.target.value }));
   };
-  const handleInputChange = (evt) => {
+
+  const handleInputChange = (evt: ChangeEvent<HTMLInputElement>) => {
     updateInput(evt.target.value);
   };
-  const toggleCheckMember = ({ currentTarget }) => {
+
+  const toggleCheckMember = ({ currentTarget }: MouseEvent<HTMLLIElement>) => {
     const { members } = data;
     const { uid } = currentTarget.dataset;
     let tmp = members.includes(+uid) ? members.filter((m) => m != uid) : [...members, +uid];
-    setData((prev) => {
-      return { ...prev, members: tmp };
-    });
+    setData((prev) => ({ ...prev, members: tmp }));
   };
 
   const loginUser = contactsData[loginUid];
   if (!loginUser) return null;
   const { name, members, is_public } = data;
+
   return (
     <Modal>
       <StyledWrapper>
@@ -152,4 +165,6 @@ export default function ChannelModal({ personal = false, closeModal }) {
       </StyledWrapper>
     </Modal>
   );
-}
+};
+
+export default ChannelModal;