refactor: add typescript support to project

src/common/component/LeaveChannel/LeaveConfirmModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, FC } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import useLeaveChannel from "../../hook/useLeaveChannel";
@@ -6,7 +6,13 @@ import Modal from "../Modal";
 import StyledModal from "../styled/Modal";
 import Button from "../styled/Button";
 
-export default function LeaveConfirmModal({ id, closeModal, handleNextStep }) {
+interface Props {
+  id: number;
+  closeModal: () => void;
+  handleNextStep: () => void;
+}
+
+const LeaveConfirmModal: FC<Props> = ({ id, closeModal, handleNextStep }) => {
   const navigateTo = useNavigate();
   const { isOwner, leaving, leaveChannel, leaveSuccess } = useLeaveChannel(id);
 
@@ -47,4 +53,6 @@ export default function LeaveConfirmModal({ id, closeModal, handleNextStep }) {
       ></StyledModal>
     </Modal>
   );
-}
+};
+
+export default LeaveConfirmModal;

src/common/component/LeaveChannel/TransferOwnerModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, FC } from "react";
 import toast from "react-hot-toast";
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
@@ -7,6 +7,7 @@ import useLeaveChannel from "../../hook/useLeaveChannel";
 import StyledModal from "../styled/Modal";
 import Button from "../styled/Button";
 import Contact from "../Contact";
+
 const UserList = styled.ul`
   display: flex;
   flex-direction: column;
@@ -28,7 +29,14 @@ const UserList = styled.ul`
     }
   }
 `;
-export default function TransferOwnerModal({ id, closeModal, withLeave = true }) {
+
+interface Props {
+  id: number;
+  closeModal: () => void;
+  withLeave?: boolean;
+}
+
+const TransferOwnerModal: FC<Props> = ({ id, closeModal, withLeave = true }) => {
   const {
     transferOwner,
     otherMembers,
@@ -97,4 +105,6 @@ export default function TransferOwnerModal({ id, closeModal, withLeave = true })
       </StyledModal>
     </Modal>
   );
-}
+};
+
+export default TransferOwnerModal;

src/common/component/LeaveChannel/index.tsx

@@ -1,12 +1,20 @@
-import { useState } from "react";
-// import styled from "styled-components";
+import { useState, FC } from "react";
 import TransferOwnerModal from "./TransferOwnerModal";
 import LeaveConfirmModal from "./LeaveConfirmModal";
-export default function LeaveChannel({ id = null, isOwner = false, closeModal }) {
+
+interface Props {
+  id: number;
+  isOwner?: boolean;
+  closeModal: () => void;
+}
+
+const LeaveChannel: FC<Props> = ({ id, isOwner = false, closeModal }) => {
   const [transferOwner, setTransferOwner] = useState(isOwner);
   const handleNextStep = () => {
     setTransferOwner(true);
   };
   if (transferOwner) return <TransferOwnerModal id={id} closeModal={closeModal} />;
   return <LeaveConfirmModal id={id} closeModal={closeModal} handleNextStep={handleNextStep} />;
-}
+};
+
+export default LeaveChannel;