refactor: add typescript support to project

src/routes/settingChannel/index.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+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";
+import { useAppSelector } from "../../app/store";
+
+let from: string | null = null;
+
+export default function ChannelSetting() {
+  const { cid } = useParams();
+  const { isAdmin, loginUid, channel } = useAppSelector((store) => {
+    return {
+      loginUid: store.authData.uid,
+      isAdmin: store.contacts.byId[store.authData.uid]?.is_admin,
+      channel: store.channels.byId[cid]
+    };
+  });
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const navs = useNavs(cid);
+  const flatenNavs = navs
+    .map(({ items }) => {
+      return items;
+    })
+    .flat();
+  const navKey = searchParams.get("nav");
+  from = from ?? (searchParams.get("f") || "/");
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const [leaveConfirm, setLeaveConfirm] = useState(false);
+  const close = () => {
+    navigate(from);
+    from = null;
+  };
+  const toggleDeleteConfrim = () => {
+    setDeleteConfirm((prev) => !prev);
+  };
+  const toggleLeaveConfrim = () => {
+    setLeaveConfirm((prev) => !prev);
+  };
+  if (!cid) return null;
+  const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
+  const canDelete = isAdmin || channel?.owner == loginUid;
+  const canLeave = !channel?.is_public;
+
+  return (
+    <>
+      <StyledSettingContainer
+        nav={currNav}
+        closeModal={close}
+        title="Channel Setting"
+        navs={navs}
+        dangers={[
+          canLeave && {
+            title: "Leave Channel",
+            handler: toggleLeaveConfrim
+          },
+          canDelete && {
+            title: "Delete Channel",
+            handler: toggleDeleteConfrim
+          }
+        ]}
+      >
+        {currNav.component}
+      </StyledSettingContainer>
+      {deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={cid} />}
+      {leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfrim} id={cid} />}
+    </>
+  );
+}