refactor: add typescript support to project

src/routes/chat/Layout/Operations.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
-import { useDispatch, useSelector } from "react-redux";
 import { useKey } from "rooks";
+import toast from "react-hot-toast";
 import useDeleteMessage from "../../../common/hook/useDeleteMessage";
 import useFavMessage from "../../../common/hook/useFavMessage";
 import { updateSelectMessages } from "../../../app/slices/ui";
@@ -10,8 +10,9 @@ import IconBookmark from "../../../assets/icons/bookmark.svg";
 import IconDelete from "../../../assets/icons/delete.svg";
 import IconClose from "../../../assets/icons/close.circle.svg";
 import ForwardModal from "../../../common/component/ForwardModal";
-import toast from "react-hot-toast";
 import DeleteMessageConfirmModal from "../../../common/component/DeleteMessageConfirm";
+import { useAppDispatch, useAppSelector } from "../../../app/store";
+
 const Styled = styled.div`
   position: relative;
   padding: 16px;
@@ -40,16 +41,19 @@ const Styled = styled.div`
     transform: translateY(-50%);
   }
 `;
+
 export default function Operations({ context, id }) {
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const { canDelete } = useDeleteMessage();
   const { addFavorite } = useFavMessage({});
-  const mids = useSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
+  const mids = useAppSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
   const [forwardModalVisible, setForwardModalVisible] = useState(false);
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
+
   const handleClose = () => {
     dispatch(updateSelectMessages({ context, id, operation: "reset" }));
   };
+
   const handleFav = async () => {
     const added = await addFavorite(mids);
     if (added) {
@@ -60,6 +64,7 @@ export default function Operations({ context, id }) {
       toast.error("Operation Failed!");
     }
   };
+
   const toggleDeleteModal = (isSuccess = false) => {
     setDeleteModalVisible((prev) => !prev);
     if (isSuccess) {
@@ -67,14 +72,17 @@ export default function Operations({ context, id }) {
       toast.success("Messages Deleted!");
     }
   };
+
   const toggleForwardModal = () => {
     setForwardModalVisible((prev) => !prev);
   };
+
   useKey("Escape", (evt) => {
     console.log("Escape keypress", evt);
     dispatch(updateSelectMessages({ context, id, operation: "reset" }));
   });
   const canDel = canDelete(mids);
+
   return (
     <>
       <Styled>

src/routes/chat/Layout/index.tsx

@@ -1,7 +1,5 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, FC, ReactElement } from "react";
 import { useDrop } from "react-dnd";
-import { useSelector } from "react-redux";
-
 import { NativeTypes } from "react-dnd-html5-backend";
 import ImagePreviewModal from "../../../common/component/ImagePreviewModal";
 import Send from "../../../common/component/Send";
@@ -9,8 +7,19 @@ import Styled from "./styled";
 import Operations from "./Operations";
 import useUploadFile from "../../../common/hook/useUploadFile";
 import { ChatPrefixs } from "../../../app/config";
+import { useAppSelector } from "../../../app/store";
 
-export default function Layout({
+interface Props {
+  children: ReactElement;
+  header: ReactElement;
+  aside: ReactElement | null;
+  contacts: ReactElement | null;
+  dropFiles: [];
+  context: string;
+  to: number | null;
+}
+
+const Layout: FC<Props> = ({
   children,
   header,
   aside = null,
@@ -18,11 +27,11 @@ export default function Layout({
   dropFiles = [],
   context = "channel",
   to = null
-}) {
+}) => {
   const { addStageFile } = useUploadFile({ context, id: to });
-  const messagesContainer = useRef(undefined);
+  const messagesContainer = useRef<HTMLDivElement>(null);
   const [previewImage, setPreviewImage] = useState(null);
-  const { selects, channelsData, contactsData } = useSelector((store) => {
+  const { selects, channelsData, contactsData } = useAppSelector((store) => {
     return {
       selects: store.ui.selectMessages[`${context}_${to}`],
       channelsData: store.channels.byId,
@@ -49,6 +58,7 @@ export default function Layout({
     }),
     [context, to]
   );
+
   useEffect(() => {
     if (dropFiles?.length) {
       const filesData = dropFiles.map((file) => {
@@ -63,6 +73,7 @@ export default function Layout({
   const closePreviewModal = () => {
     setPreviewImage(null);
   };
+
   useEffect(() => {
     const container = messagesContainer?.current;
     if (container) {
@@ -85,6 +96,7 @@ export default function Layout({
     }
   }, []);
   const name = context == "channel" ? channelsData[to]?.name : contactsData[to]?.name;
+
   return (
     <>
       {previewImage && <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />}
@@ -112,4 +124,6 @@ export default function Layout({
       </Styled>
     </>
   );
-}
+};
+
+export default Layout;