refactor: setting page

src/routes/settingChannel/Overview.js

@@ -41,9 +41,12 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function Overview({ id = 0 }) {
-  const loginUser = useSelector(
-    (store) => store.contacts.byId[store.authData.uid]
-  );
+  const { loginUser, channel } = useSelector((store) => {
+    return {
+      loginUser: store.contacts.byId[store.authData.uid],
+      channel: store.channels.byId[id],
+    };
+  });
   const { data, refetch } = useGetChannelQuery(id);
   const [changed, setChanged] = useState(false);
   const [values, setValues] = useState(null);
@@ -89,14 +92,15 @@ export default function Overview({ id = 0 }) {
 
   if (!values || !id) return null;
   const { name, description } = values;
-  const isAdmin = loginUser?.is_admin;
+  const readOnly = !loginUser?.is_admin && channel?.owner != loginUser?.uid;
+
   return (
     <StyledWrapper>
       <div className="inputs">
         <div className="input">
           <Label htmlFor="name">Channel Name</Label>
           <Input
-            disabled={!isAdmin}
+            disabled={readOnly}
             className="name"
             data-type="name"
             onChange={handleChange}
@@ -109,7 +113,7 @@ export default function Overview({ id = 0 }) {
         <div className="input">
           <Label htmlFor="desc">Channel Topic</Label>
           <Textarea
-            disabled={!isAdmin}
+            disabled={readOnly}
             data-type="description"
             onChange={handleChange}
             value={description ?? ""}

src/routes/settingChannel/index.js

@@ -1,10 +1,12 @@
 import { useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, useSearchParams } from "react-router-dom";
 import StyledSettingContainer from "../../common/component/StyledSettingContainer";
 import DeleteConfirmModal from "./DeleteConfirmModal";
 import useNavs from "./navs";
+let from = null;
 export default function ChannelSetting() {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const { cid } = useParams();
   const navs = useNavs(cid);
   const flatenNavs = navs
@@ -12,25 +14,21 @@ export default function ChannelSetting() {
       return items;
     })
     .flat();
-  const [currNav, setCurrNav] = useState(flatenNavs[0]);
+  const navKey = searchParams.get("nav");
+  from = from ?? (searchParams.get("f") || "/");
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const close = () => {
-    navigate(-1);
+    navigate(from);
+    from = null;
   };
   const toggleDeleteConfrim = () => {
     setDeleteConfirm((prev) => !prev);
   };
-  const updateNav = (name) => {
-    const tmp = flatenNavs.find((n) => n.name == name);
-    if (tmp) {
-      setCurrNav(tmp);
-    }
-  };
   if (!cid) return null;
+  const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
   return (
     <>
       <StyledSettingContainer
-        updateNav={updateNav}
         nav={currNav}
         closeModal={close}
         title="Channel Setting"