refactor: setting page

src/routes/chat/ChannelList/NavItem.js

@@ -1,12 +1,12 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import { useSelector } from "react-redux";
 import Tippy from "@tippyjs/react";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import ContextMenu from "../../../common/component/ContextMenu";
-import InviteModal from "../../../common/component/InviteModal";
+import InviteModal from "../../../common/component/ChannelInviteModal";
 import Tooltip from "../../../common/component/Tooltip";
 // import { useDebounce} from "rooks";
 import { useReadMessageMutation } from "../../../app/services/message";
@@ -17,6 +17,7 @@ import ChannelIcon from "../../../common/component/ChannelIcon";
 import { getUnreadCount } from "../utils";
 
 const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
+  const { pathname } = useLocation();
   const [inviteModalVisible, setInviteModalVisible] = useState(false);
   const navigate = useNavigate();
   const [muteChannel] = useUpdateMuteSettingMutation();
@@ -52,7 +53,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     evt.stopPropagation();
     const { id } = evt.target.dataset;
     if (id) {
-      navigate(`/setting/channel/${id}`);
+      navigate(`/setting/channel/${id}?f=${pathname}`);
     }
   };
   const [{ isActive }, drop] = useDrop(() => ({
@@ -91,7 +92,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
       : { add_groups: [{ gid: id }] };
     muteChannel(data);
   };
-  const { is_public, name } = channel;
+  const { is_public, name, owner } = channel;
   const { unreads = 0, mentions = [] } = getUnreadCount({
     mids,
     messageData,
@@ -99,6 +100,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     loginUid,
   });
   const isMentions = mentions.length !== 0;
+  const inviteIconVisible = loginUser?.is_admin || owner == loginUid;
   return (
     <>
       <Tippy
@@ -154,7 +156,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
             <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
           </div>
           <div className="icons">
-            {loginUser?.is_admin && (
+            {inviteIconVisible && (
               <Tooltip placement="bottom" tip="Add Member">
                 <i
                   className="icon invite"
@@ -180,6 +182,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
       </Tippy>
       {inviteModalVisible && (
         <InviteModal
+          cid={id}
           title={channel.name}
           closeModal={toggleInviteModalVisible}
         />

src/routes/home/Menu.js

@@ -1,5 +1,5 @@
 // import React from 'react'
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 import Tooltip from "../../common/component/Tooltip";
 import settingIcon from "../../assets/icons/setting.svg?url";
 import styled from "styled-components";
@@ -32,11 +32,12 @@ const StyledMenus = styled.ul`
   }
 `;
 export default function Menu() {
+  const { pathname } = useLocation();
   return (
     <StyledMenus>
       <li className="menu">
         <Tooltip placement="right" tip="Settings">
-          <NavLink to={"/setting"}>
+          <NavLink to={`/setting?f=${pathname}`}>
             <img src={settingIcon} alt="setting icon" className="icon" />
           </NavLink>
         </Tooltip>

src/routes/setting/index.js

@@ -1,37 +1,34 @@
 import { useState } from "react";
 // import { useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import StyledSettingContainer from "../../common/component/StyledSettingContainer";
 import useNavs from "./navs";
 import LogoutConfirmModal from "./LogoutConfirmModal";
-
+let from = null;
 export default function Setting() {
+  const [searchParams] = useSearchParams();
   const navs = useNavs();
   const flatenNavs = navs
     .map(({ items }) => {
       return items;
     })
     .flat();
-  const [currNav, setCurrNav] = useState(flatenNavs[0]);
+  const navKey = searchParams.get("nav");
+  from = from ?? (searchParams.get("f") || "/");
   const [logoutConfirm, setLogoutConfirm] = useState(false);
   const navgateTo = useNavigate();
   const close = () => {
     // dispatch(toggleSetting());
-    navgateTo(-1);
+    navgateTo(from);
+    from = null;
   };
   const toggleLogoutConfrim = () => {
     setLogoutConfirm((prev) => !prev);
   };
-  const updateNav = (name) => {
-    const tmp = flatenNavs.find((n) => n.name == name);
-    if (tmp) {
-      setCurrNav(tmp);
-    }
-  };
+  const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
   return (
     <>
       <StyledSettingContainer
-        updateNav={updateNav}
         nav={currNav}
         closeModal={close}
         title="Settings"

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"