refactor: add typescript support to project

src/routes/chat/DMList/index.tsx

@@ -1,11 +1,15 @@
-// import React from "react";
-import { useSelector } from "react-redux";
-
+import { FC } from "react";
 import { getUnreadCount } from "../utils";
-
 import NavItem from "./NavItem";
-export default function DMList({ uids, setDropFiles }) {
-  const { userMessage, messageData, readUsers, loginUid } = useSelector((store) => {
+import { useAppSelector } from "../../../app/store";
+
+interface Props {
+  uids: number[];
+  setDropFiles: () => void;
+}
+
+const DMList: FC<Props> = ({ uids, setDropFiles }) => {
+  const { userMessage, messageData, readUsers, loginUid } = useAppSelector((store) => {
     return {
       loginUid: store.authData.uid,
       readUsers: store.footprint.readUsers,
@@ -31,14 +35,20 @@ export default function DMList({ uids, setDropFiles }) {
     return { lastMid, unreads, uid };
   });
   // console.log("temp uids", sessions);
-  return sessions
-    .sort((s1, s2) => {
-      if (!s1.lastMid) return s2.lastMid - Infinity;
-      return s2.lastMid - s1.lastMid;
-    })
-    .map(({ lastMid, uid, unreads }) => {
-      return (
-        <NavItem key={uid} uid={uid} mid={lastMid} unreads={unreads} setFiles={setDropFiles} />
-      );
-    });
-}
+  return (
+    <>
+      {sessions
+        .sort((s1, s2) => {
+          if (!s1.lastMid) return s2.lastMid - Infinity;
+          return s2.lastMid - s1.lastMid;
+        })
+        .map(({ lastMid, uid, unreads }) => {
+          return (
+            <NavItem key={uid} uid={uid} mid={lastMid} unreads={unreads} setFiles={setDropFiles} />
+          );
+        })}
+    </>
+  );
+};
+
+export default DMList;