From 20373c4376c9123f1bac4e4978299cc54c4329dc Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Tue, 12 Apr 2022 18:21:59 +0800
Subject: [PATCH] refactor: setting modals to pages

---
 src/app/services/channel.js                   |   9 +-
 src/app/slices/ui.js                          |  12 --
 src/common/component/Setting/config/Logins.js | 115 -----------------
 .../component/Setting/config/useConfig.js     |  92 --------------
 src/common/component/Setting/navs.js          | 104 ---------------
 .../component/StyledSettingContainer.js       |  75 ++++++-----
 src/routes/chat/ChannelList/NavItem.js        |  15 ++-
 src/routes/chat/ChannelList/index.js          |   2 +-
 src/routes/home/Menu.js                       |  15 +--
 src/routes/home/index.js                      |  29 ++---
 src/routes/index.js                           |   6 +
 .../setting}/LogoutConfirmModal.js            |  19 ++-
 .../Setting => routes/setting}/MyAccount.js   |   4 +-
 .../setting}/Notifications.js                 |   6 +-
 .../Setting => routes/setting}/Overview.js    |  12 +-
 .../setting}/ProfileBasicEditModal.js         |  12 +-
 .../setting}/config/Agora.js                  |  10 +-
 .../setting}/config/Firebase.js               |  10 +-
 src/routes/setting/config/Logins.js           | 119 ++++++++++++++++++
 .../Setting => routes/setting}/config/SMTP.js |  14 +--
 .../setting}/config/StyledContainer.js        |   0
 src/routes/setting/config/useConfig.js        | 107 ++++++++++++++++
 .../Setting => routes/setting}/index.js       |  11 +-
 src/routes/setting/navs.js                    | 104 +++++++++++++++
 .../settingChannel}/DeleteConfirmModal.js     |  14 +--
 .../settingChannel}/Overview.js               |  14 +--
 .../settingChannel}/index.js                  |  18 +--
 .../settingChannel}/navs.js                   |   2 +-
 28 files changed, 473 insertions(+), 477 deletions(-)
 delete mode 100644 src/common/component/Setting/config/Logins.js
 delete mode 100644 src/common/component/Setting/config/useConfig.js
 delete mode 100644 src/common/component/Setting/navs.js
 rename src/{common/component/Setting => routes/setting}/LogoutConfirmModal.js (80%)
 rename src/{common/component/Setting => routes/setting}/MyAccount.js (97%)
 rename src/{common/component/Setting => routes/setting}/Notifications.js (75%)
 rename src/{common/component/Setting => routes/setting}/Overview.js (93%)
 rename src/{common/component/Setting => routes/setting}/ProfileBasicEditModal.js (84%)
 rename src/{common/component/Setting => routes/setting}/config/Agora.js (91%)
 rename src/{common/component/Setting => routes/setting}/config/Firebase.js (89%)
 create mode 100644 src/routes/setting/config/Logins.js
 rename src/{common/component/Setting => routes/setting}/config/SMTP.js (90%)
 rename src/{common/component/Setting => routes/setting}/config/StyledContainer.js (100%)
 create mode 100644 src/routes/setting/config/useConfig.js
 rename src/{common/component/Setting => routes/setting}/index.js (79%)
 create mode 100644 src/routes/setting/navs.js
 rename src/{common/component/ChannelSetting => routes/settingChannel}/DeleteConfirmModal.js (79%)
 rename src/{common/component/ChannelSetting => routes/settingChannel}/Overview.js (89%)
 rename src/{common/component/ChannelSetting => routes/settingChannel}/index.js (75%)
 rename src/{common/component/ChannelSetting => routes/settingChannel}/navs.js (92%)

diff --git a/src/app/services/channel.js b/src/app/services/channel.js
index 0cfa48e0..7494214d 100644
--- a/src/app/services/channel.js
+++ b/src/app/services/channel.js
@@ -6,7 +6,6 @@ import { updateChannel, removeChannel } from "../slices/channels";
 import { removeMessage } from "../slices/message";
 import { removeChannelSession } from "../slices/message.channel";
 import { removeReactionMessage } from "../slices/message.reaction";
-import { toggleChannelSetting } from "../slices/ui";
 import { onMessageSendStarted } from "./handlers";
 export const channelApi = createApi({
   reducerPath: "channelApi",
@@ -79,16 +78,10 @@ export const channelApi = createApi({
         method: "DELETE",
       }),
       async onQueryStarted(id, { dispatch, getState, queryFulfilled }) {
-        const {
-          ui: { channelSetting },
-          channelMessage,
-        } = getState();
+        const { channelMessage } = getState();
         try {
           await queryFulfilled;
           dispatch(removeChannel(id));
-          if (id == channelSetting) {
-            dispatch(toggleChannelSetting());
-          }
           // 删掉该channel下的所有消息&reaction
           const mids = channelMessage[id];
           if (mids) {
diff --git a/src/app/slices/ui.js b/src/app/slices/ui.js
index 3e3f9d58..8eb0e4dc 100644
--- a/src/app/slices/ui.js
+++ b/src/app/slices/ui.js
@@ -5,8 +5,6 @@ const initialState = {
   ready: false,
   inputMode: "text",
   menuExpand: false,
-  setting: false,
-  channelSetting: null,
   fileListView: Views.item,
 };
 const uiSlice = createSlice({
@@ -31,14 +29,6 @@ const uiSlice = createSlice({
     updateFileListView(state, action) {
       state.fileListView = action.payload;
     },
-    toggleSetting(state) {
-      state.setting = !state.setting;
-    },
-    toggleChannelSetting(state, action) {
-      console.log("toggle channel setting payload", action);
-      const id = action.payload;
-      state.channelSetting = state.channelSetting ? null : id;
-    },
   },
 });
 export const {
@@ -46,9 +36,7 @@ export const {
   setReady,
   updateOnline,
   updateInputMode,
-  toggleSetting,
   toggleMenuExpand,
-  toggleChannelSetting,
   updateFileListView,
 } = uiSlice.actions;
 export default uiSlice.reducer;
diff --git a/src/common/component/Setting/config/Logins.js b/src/common/component/Setting/config/Logins.js
deleted file mode 100644
index 2e96cfcb..00000000
--- a/src/common/component/Setting/config/Logins.js
+++ /dev/null
@@ -1,115 +0,0 @@
-// import { useState, useEffect } from "react";
-import StyledContainer from './StyledContainer';
-// import Input from "../../styled/Input";
-import Textarea from '../../styled/Textarea';
-import Toggle from '../../styled/Toggle';
-import Label from '../../styled/Label';
-import SaveTip from '../../SaveTip';
-import useConfig from './useConfig';
-
-export default function Logins() {
- const { values, updateConfig, setValues, reset, changed } = useConfig('login');
- const handleUpdate = () => {
-  // const { token_url, description } = values;
-  updateConfig(values);
- };
- const handleChange = (evt) => {
-  const newValue = evt.target.value;
-  const { type } = evt.target.dataset;
-  const items = newValue ? newValue.split('\n') : [];
-  setValues((prev) => {
-   return { ...prev, [type]: items };
-  });
- };
- const handleToggle = (val) => {
-  setValues((prev) => {
-   return { ...prev, ...val };
-  });
- };
- if (!values) return null;
- const { google, metamask, password, oidc = [] } = values ?? {};
- return (
-  <StyledContainer>
-   <div className="inputs">
-    <div className="input row">
-     <Label>Password</Label>
-     <Toggle
-      onClick={handleToggle.bind(null, { password: !password })}
-      data-checked={password}
-     ></Toggle>
-    </div>
-    <div className="input row">
-     <Label>Google</Label>
-     <Toggle onClick={handleToggle.bind(null, { google: !google })} data-checked={google}></Toggle>
-    </div>
-    <div className="input row">
-     <Label>Metamask</Label>
-     <Toggle
-      onClick={handleToggle.bind(null, { metamask: !metamask })}
-      data-checked={metamask}
-     ></Toggle>
-    </div>
-    <div className="input">
-     <Label htmlFor="desc">OIDC</Label>
-     <Textarea
-      rows={10}
-      data-type="oidc"
-      onChange={handleChange}
-      value={oidc.join('\n')}
-      name="oidc"
-      placeholder="Input issuer list, one line, one issuer"
-     />
-    </div>
-
-    {/* <div className="input">
-          <Label htmlFor="name">Token Url</Label>
-          <Input
-            disabled={!enabled}
-            data-type="token_url"
-            onChange={handleChange}
-            value={token_url || "https://oauth2.googleapis.com/token"}
-            name="token_url"
-            placeholder="Token URL"
-          />
-        </div>
-        <div className="input">
-          <Label htmlFor="desc">Project ID</Label>
-          <Input
-            disabled={!enabled}
-            type={"number"}
-            data-type="project_id"
-            onChange={handleChange}
-            value={project_id}
-            name="project_id"
-            placeholder="Project ID"
-          />
-        </div>
-        <div className="input">
-          <Label htmlFor="desc">Private Key</Label>
-          <Textarea
-            rows={10}
-            disabled={!enabled}
-            data-type="private_key"
-            onChange={handleChange}
-            value={private_key}
-            name="private_key"
-            placeholder="Private key"
-          />
-        </div>
-        <div className="input">
-          <Label htmlFor="desc">Client Email</Label>
-          <Input
-            disabled={!enabled}
-            data-type="client_email"
-            onChange={handleChange}
-            value={client_email}
-            name="client_email"
-            placeholder="Client Email address"
-          />
-        </div> */}
-   </div>
-   {changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
-   {/* <button onClick={handleUpdate} className="btn">update</button> */}
-  </StyledContainer>
- );
-}
diff --git a/src/common/component/Setting/config/useConfig.js b/src/common/component/Setting/config/useConfig.js
deleted file mode 100644
index a7e3da26..00000000
--- a/src/common/component/Setting/config/useConfig.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useEffect, useState } from 'react';
-import { isObjectEqual } from '../../../utils';
-import toast from 'react-hot-toast';
-import {
- useGetAgoraConfigQuery,
- useGetFirebaseConfigQuery,
- useGetSMTPConfigQuery,
- useGetLoginConfigQuery,
- useUpdateLoginConfigMutation,
- useUpdateSMTPConfigMutation,
- useUpdateAgoraConfigMutation,
- useUpdateFirebaseConfigMutation
-} from '../../../../app/services/server';
-export default function useConfig(config = 'smtp') {
- const [changed, setChanged] = useState(false);
- const [values, setValues] = useState({});
- const { data: Login, refetch: refetchLogin } = useGetLoginConfigQuery();
- const [updateLoginConfig, { isSuccess: LoginUpdated }] = useUpdateLoginConfigMutation();
- const { data: SMTP, refetch: refetchSMTP } = useGetSMTPConfigQuery();
- const [updateSMTPConfig, { isSuccess: SMTPUpdated }] = useUpdateSMTPConfigMutation();
- const { data: Agora, refetch: refetchAgora } = useGetAgoraConfigQuery();
- const [updateAgoraConfig, { isSuccess: AgoraUpdated }] = useUpdateAgoraConfigMutation();
- const { data: Firebase, refetch: refetchFirebase } = useGetFirebaseConfigQuery();
- const [updateFirebaseConfig, { isSuccess: FirebaseUpdated }] = useUpdateFirebaseConfigMutation();
-
- const datas = {
-  login: Login,
-  smtp: SMTP,
-  agora: Agora,
-  firebase: Firebase
- };
- const updateFns = {
-  login: updateLoginConfig,
-  smtp: updateSMTPConfig,
-  agora: updateAgoraConfig,
-  firebase: updateFirebaseConfig
- };
- const refetchs = {
-  smtp: refetchSMTP,
-  agora: refetchAgora,
-  firebase: refetchFirebase,
-  login: refetchLogin
- };
- const updateds = {
-  login: LoginUpdated,
-  smtp: SMTPUpdated,
-  agora: AgoraUpdated,
-  firebase: FirebaseUpdated
- };
- const data = datas[config];
- const updateConfig = updateFns[config];
- const refetch = refetchs[config];
- const updated = updateds[config];
- const reset = () => {
-  setValues(data ?? {});
- };
-
- const toggleEnable = () => {
-  setValues((prev) => {
-   return { ...prev, enabled: !prev.enabled };
-  });
- };
- useEffect(() => {
-  if (updated) {
-   toast.success('Configuration Updated!');
-   refetch();
-  }
- }, [updated]);
- useEffect(() => {
-  console.log('wtf', data);
-  // if (data) {
-  setValues(data ?? {});
-  // }
- }, [data]);
- useEffect(() => {
-  // if (data && values) {
-  if (!isObjectEqual(data, values)) {
-   setChanged(true);
-  } else {
-   setChanged(false);
-  }
-  // }
- }, [data, values]);
- return {
-  reset,
-  changed,
-  updateConfig,
-  values,
-  setValues,
-  toggleEnable
- };
-}
diff --git a/src/common/component/Setting/navs.js b/src/common/component/Setting/navs.js
deleted file mode 100644
index 6126f89e..00000000
--- a/src/common/component/Setting/navs.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useSelector } from 'react-redux';
-import MyAccount from './MyAccount';
-import Overview from './Overview';
-import Logins from './config/Logins';
-import ConfigFirebase from './config/Firebase';
-import ConfigSMTP from './config/SMTP';
-import Notifications from './Notifications';
-import ManageMembers from '../ManageMembers';
-import FAQ from '../FAQ';
-import ConfigAgora from './config/Agora';
-const navs = [
- {
-  title: 'General',
-  items: [
-   {
-    name: 'overview',
-    title: 'Overview',
-    component: <Overview />
-   },
-   {
-    name: 'members',
-    title: 'Members',
-    component: <ManageMembers />,
-    admin: true
-   },
-   {
-    name: 'notification',
-    title: 'Notification',
-    component: <Notifications />
-   }
-  ]
- },
- {
-  title: 'User',
-  items: [
-   {
-    name: 'my_account',
-    title: 'My Account',
-    component: <MyAccount />
-   }
-  ]
- },
- {
-  title: 'Configuration',
-  items: [
-   {
-    name: 'firebase',
-    title: 'Firebase',
-    component: <ConfigFirebase />
-   },
-   {
-    name: 'agora',
-    title: 'Agora',
-    component: <ConfigAgora />
-   },
-   {
-    name: 'smtp',
-    title: 'SMTP',
-    component: <ConfigSMTP />
-   },
-   {
-    name: 'social_login',
-    title: 'Social Login',
-    component: <Logins />
-   }
-  ],
-  admin: true
- },
- {
-  title: 'About',
-  items: [
-   {
-    name: 'faq',
-    title: 'FAQ',
-    component: <FAQ />
-   },
-   {
-    name: 'terms',
-    title: 'Terms & Privacy',
-    component: 'Terms & Privacy'
-   },
-   {
-    name: 'feedback',
-    title: 'Feedback',
-    component: 'feedback'
-   }
-  ]
- }
-];
-const useNavs = () => {
- const loginUser = useSelector((store) => {
-  return store.contacts.byId[store.authData.uid];
- });
- const Navs = navs.filter((nav) => {
-  if (loginUser.is_admin) {
-   return true;
-  } else {
-   return !nav.admin;
-  }
- });
- return Navs;
-};
-
-export default useNavs;
diff --git a/src/common/component/StyledSettingContainer.js b/src/common/component/StyledSettingContainer.js
index 93d22904..311df4e4 100644
--- a/src/common/component/StyledSettingContainer.js
+++ b/src/common/component/StyledSettingContainer.js
@@ -1,10 +1,9 @@
 // import React from 'react'
 import styled from "styled-components";
-import Modal from "./Modal";
 import backIcon from "../../assets/icons/arrow.left.svg?url";
 const StyledWrapper = styled.div`
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   display: flex;
   > .left {
     max-height: 100vh;
@@ -89,47 +88,45 @@ export default function StyledSettingContainer({
     updateNav(name);
   };
   return (
-    <Modal>
-      <StyledWrapper>
-        <div className="left">
-          <h2 onClick={closeModal} className="title">
-            {title}
-          </h2>
-          {navs.map(({ title, items }) => {
-            return (
-              <ul key={title} data-title={title} className="items">
-                {items.map(({ name, title }) => {
-                  return (
-                    <li
-                      key={name}
-                      onClick={handleNavClick.bind(null, name)}
-                      className={`item ${name == nav?.name ? "curr" : ""}`}
-                    >
-                      {title}
-                    </li>
-                  );
-                })}
-              </ul>
-            );
-          })}
-          {dangers.length ? (
-            <ul className="items danger">
-              {dangers.map((d) => {
-                const { title, handler } = d;
+    <StyledWrapper>
+      <div className="left">
+        <h2 onClick={closeModal} className="title">
+          {title}
+        </h2>
+        {navs.map(({ title, items }) => {
+          return (
+            <ul key={title} data-title={title} className="items">
+              {items.map(({ name, title }) => {
                 return (
-                  <li key={title} onClick={handler} className="item">
+                  <li
+                    key={name}
+                    onClick={handleNavClick.bind(null, name)}
+                    className={`item ${name == nav?.name ? "curr" : ""}`}
+                  >
                     {title}
                   </li>
                 );
               })}
             </ul>
-          ) : null}
-        </div>
-        <div className="right">
-          {nav && <h4 className="title">{nav.title}</h4>}
-          {children}
-        </div>
-      </StyledWrapper>
-    </Modal>
+          );
+        })}
+        {dangers.length ? (
+          <ul className="items danger">
+            {dangers.map((d) => {
+              const { title, handler } = d;
+              return (
+                <li key={title} onClick={handler} className="item">
+                  {title}
+                </li>
+              );
+            })}
+          </ul>
+        ) : null}
+      </div>
+      <div className="right">
+        {nav && <h4 className="title">{nav.title}</h4>}
+        {children}
+      </div>
+    </StyledWrapper>
   );
 }
diff --git a/src/routes/chat/ChannelList/NavItem.js b/src/routes/chat/ChannelList/NavItem.js
index 1012aa93..5cbd590c 100644
--- a/src/routes/chat/ChannelList/NavItem.js
+++ b/src/routes/chat/ChannelList/NavItem.js
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import Tippy from "@tippyjs/react";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import ContextMenu from "../../../common/component/ContextMenu";
@@ -11,12 +11,10 @@ import { useReadMessageMutation } from "../../../app/services/message";
 import { useUpdateMuteSettingMutation } from "../../../app/services/contact";
 
 import StyledLink from "./styled";
-import { toggleChannelSetting } from "../../../app/slices/ui";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import { getUnreadCount } from "../utils";
 
 const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
-  const dispatch = useDispatch();
   const navigate = useNavigate();
   const [muteChannel] = useUpdateMuteSettingMutation();
   const [updateReadIndex] = useReadMessageMutation();
@@ -47,7 +45,10 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
   const handleChannelSetting = (evt) => {
     evt.preventDefault();
     evt.stopPropagation();
-    dispatch(toggleChannelSetting(id));
+    const { id } = evt.target.dataset;
+    if (id) {
+      navigate(`/setting/channel/${id}`);
+    }
   };
   const [{ isActive }, drop] = useDrop(() => ({
     accept: [NativeTypes.FILE],
@@ -138,7 +139,11 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
         </div>
         <div className="icons">
           <Tooltip placement="bottom" tip="Channel Setting">
-            <i className="setting" onClick={handleChannelSetting}></i>
+            <i
+              className="setting"
+              data-id={id}
+              onClick={handleChannelSetting}
+            ></i>
           </Tooltip>
           {unreads > 0 && (
             <i className={`badge ${isDot ? "dot" : ""}`}>
diff --git a/src/routes/chat/ChannelList/index.js b/src/routes/chat/ChannelList/index.js
index 3ef6a15f..8ff96405 100644
--- a/src/routes/chat/ChannelList/index.js
+++ b/src/routes/chat/ChannelList/index.js
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useSelector } from "react-redux";
 
-import DeleteConfirmModal from "../../../common/component/ChannelSetting/DeleteConfirmModal";
+import DeleteConfirmModal from "../../settingChannel/DeleteConfirmModal";
 import NavItem from "./NavItem";
 
 export default function ChannelList({ setDropFiles }) {
diff --git a/src/routes/home/Menu.js b/src/routes/home/Menu.js
index 855ae093..3360ecb1 100644
--- a/src/routes/home/Menu.js
+++ b/src/routes/home/Menu.js
@@ -1,10 +1,7 @@
 // import React from 'react'
-import { useDispatch } from "react-redux";
-import { toggleSetting } from "../../app/slices/ui";
+import { NavLink } from "react-router-dom";
 import Tooltip from "../../common/component/Tooltip";
 import settingIcon from "../../assets/icons/setting.svg?url";
-// import foldIcon from "../../assets/icons/fold.svg?url";
-// import unfoldIcon from "../../assets/icons/unfold.svg?url";
 import styled from "styled-components";
 const StyledMenus = styled.ul`
   display: flex;
@@ -35,15 +32,13 @@ const StyledMenus = styled.ul`
   }
 `;
 export default function Menu() {
-  const dispatch = useDispatch();
-  const handleSetting = () => {
-    dispatch(toggleSetting());
-  };
   return (
     <StyledMenus>
-      <li className="menu" onClick={handleSetting}>
+      <li className="menu">
         <Tooltip placement="right" tip="Settings">
-          <img src={settingIcon} alt="setting icon" className="icon" />
+          <NavLink to={"/setting"}>
+            <img src={settingIcon} alt="setting icon" className="icon" />
+          </NavLink>
         </Tooltip>
         {/* {expand && (
           <span className="txt animate__animated animate__fadeIn">
diff --git a/src/routes/home/index.js b/src/routes/home/index.js
index 30b69161..37b2be1c 100644
--- a/src/routes/home/index.js
+++ b/src/routes/home/index.js
@@ -1,8 +1,7 @@
 // import React from 'react';
 // import { useEffect } from "react";
-import { Outlet, NavLink } from "react-router-dom";
-import { useSelector, useDispatch } from "react-redux";
-import { toggleMenuExpand } from "../../app/slices/ui";
+import { Outlet, NavLink, useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
 import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
 // import Tools from "./Tools";
@@ -11,30 +10,34 @@ import Menu from "./Menu";
 import usePreload from "./usePreload";
 import Tooltip from "../../common/component/Tooltip";
 import Notification from "../../common/component/Notification";
-import SettingModal from "../../common/component/Setting";
-import ChannelSettingModal from "../../common/component/ChannelSetting";
 
 import ChatIcon from "../../assets/icons/chat.svg?url";
 import ContactIcon from "../../assets/icons/contact.svg?url";
 import FolderIcon from "../../assets/icons/folder.svg?url";
-
+// const routes = ["/setting", "/setting/channel/:cid"];
 export default function HomePage() {
-  const dispatch = useDispatch();
+  const { pathname } = useLocation();
   const {
-    ui: { ready, setting, channelSetting },
+    ui: { ready },
   } = useSelector((store) => {
     return {
       ui: store.ui,
     };
   });
   const { data, loading } = usePreload();
-  const toggleExpand = () => {
-    dispatch(toggleMenuExpand());
-  };
   // console.log("index loading", loading, ready);
   if (loading || !ready) {
     return <Loading />;
   }
+  const isSettingPage = pathname.startsWith("/setting");
+  if (isSettingPage) {
+    return (
+      <>
+        <Notification />
+        <Outlet />
+      </>
+    );
+  }
   return (
     <>
       <Notification />
@@ -75,14 +78,12 @@ export default function HomePage() {
           </nav>
           <div className="divider"></div>
           {/* <Tools expand={menuExpand} /> */}
-          <Menu toggle={toggleExpand} />
+          <Menu />
         </div>
         <div className="col right">
           <Outlet />
         </div>
       </StyledWrapper>
-      {setting && <SettingModal />}
-      {channelSetting && <ChannelSettingModal id={channelSetting} />}
     </>
   );
 }
diff --git a/src/routes/index.js b/src/routes/index.js
index 713c1c11..fa2a04a4 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -13,6 +13,8 @@ import Meta from "../common/component/Meta";
 
 import store from "../app/store";
 import InvitePage from "./invite";
+import SettingPage from "./setting";
+import SettingChannelPage from "./settingChannel";
 import toast from "react-hot-toast";
 import ResourceManagement from "./resources";
 
@@ -53,6 +55,10 @@ const PageRoutes = () => {
             </RequireAuth>
           }
         >
+          <Route path="setting">
+            <Route index element={<SettingPage />} />
+            <Route path="channel/:cid" element={<SettingChannelPage />} />
+          </Route>
           <Route index element={<ChatPage />} />
           <Route path="chat">
             <Route index element={<ChatPage />} />
diff --git a/src/common/component/Setting/LogoutConfirmModal.js b/src/routes/setting/LogoutConfirmModal.js
similarity index 80%
rename from src/common/component/Setting/LogoutConfirmModal.js
rename to src/routes/setting/LogoutConfirmModal.js
index 171f7b49..b9224265 100644
--- a/src/common/component/Setting/LogoutConfirmModal.js
+++ b/src/routes/setting/LogoutConfirmModal.js
@@ -1,14 +1,12 @@
 // import React from "react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
-import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
-import { toggleSetting } from "../../../app/slices/ui";
-// import BASE_URL from "../../app/config";
-import StyledModal from "../styled/Modal";
-import Button from "../styled/Button";
-import Checkbox from "../styled/Checkbox";
-import useLogout from "../../hook/useLogout";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
+import Checkbox from "../../common/component/styled/Checkbox";
+import useLogout from "../../common/hook/useLogout";
 const StyledConfirm = styled(StyledModal)`
   .clear {
     font-weight: normal;
@@ -28,9 +26,9 @@ const StyledConfirm = styled(StyledModal)`
     }
   }
 `;
-import Modal from "../Modal";
+import Modal from "../../common/component/Modal";
 export default function LogoutConfirmModal({ closeModal }) {
-  const dispatch = useDispatch();
+  const navigate = useNavigate();
   const [clearLocal, setClearLocal] = useState(false);
   const { logout, exited, exiting, clearLocalData } = useLogout();
   const handleLogout = () => {
@@ -45,8 +43,7 @@ export default function LogoutConfirmModal({ closeModal }) {
         console.log("clear all store");
         clearLocalData();
       }
-      // closeModal();
-      dispatch(toggleSetting());
+      navigate("/");
     }
   }, [exited, clearLocal]);
   return (
diff --git a/src/common/component/Setting/MyAccount.js b/src/routes/setting/MyAccount.js
similarity index 97%
rename from src/common/component/Setting/MyAccount.js
rename to src/routes/setting/MyAccount.js
index 5fb74e64..8e8ae20b 100644
--- a/src/common/component/Setting/MyAccount.js
+++ b/src/routes/setting/MyAccount.js
@@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
 import toast from "react-hot-toast";
-import { useUpdateAvatarMutation } from "../../../app/services/contact";
-import AvatarUploader from "../AvatarUploader";
+import { useUpdateAvatarMutation } from "../../app/services/contact";
+import AvatarUploader from "../../common/component/AvatarUploader";
 import ProfileBasicEditModal from "./ProfileBasicEditModal";
 const StyledWrapper = styled.div`
   display: flex;
diff --git a/src/common/component/Setting/Notifications.js b/src/routes/setting/Notifications.js
similarity index 75%
rename from src/common/component/Setting/Notifications.js
rename to src/routes/setting/Notifications.js
index 4f026082..b0ac66ce 100644
--- a/src/common/component/Setting/Notifications.js
+++ b/src/routes/setting/Notifications.js
@@ -1,8 +1,8 @@
 // import React from "react";
 import styled from "styled-components";
-import useNotification from "../../hook/useNotification";
-import StyledToggle from "../styled/Toggle";
-import Label from "../styled/Label";
+import useNotification from "../../common/hook/useNotification";
+import StyledToggle from "../../common/component/styled/Toggle";
+import Label from "../../common/component/styled/Label";
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/common/component/Setting/Overview.js b/src/routes/setting/Overview.js
similarity index 93%
rename from src/common/component/Setting/Overview.js
rename to src/routes/setting/Overview.js
index 7028dd53..230f59a9 100644
--- a/src/common/component/Setting/Overview.js
+++ b/src/routes/setting/Overview.js
@@ -5,12 +5,12 @@ import {
   useGetServerQuery,
   useUpdateServerMutation,
   useUpdateLogoMutation,
-} from "../../../app/services/server";
-import LogoUploader from "../AvatarUploader";
-import Input from "../styled/Input";
-import Label from "../styled/Label";
-import Textarea from "../styled/Textarea";
-import SaveTip from "../SaveTip";
+} from "../../app/services/server";
+import LogoUploader from "../../common/component/AvatarUploader";
+import Input from "../../common/component/styled/Input";
+import Label from "../../common/component/styled/Label";
+import Textarea from "../../common/component/styled/Textarea";
+import SaveTip from "../../common/component/SaveTip";
 import toast from "react-hot-toast";
 const StyledWrapper = styled.div`
   position: relative;
diff --git a/src/common/component/Setting/ProfileBasicEditModal.js b/src/routes/setting/ProfileBasicEditModal.js
similarity index 84%
rename from src/common/component/Setting/ProfileBasicEditModal.js
rename to src/routes/setting/ProfileBasicEditModal.js
index 69200d51..50ac7535 100644
--- a/src/common/component/Setting/ProfileBasicEditModal.js
+++ b/src/routes/setting/ProfileBasicEditModal.js
@@ -1,12 +1,10 @@
 // import React from "react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
-// import { useDispatch } from "react-redux";
-import Input from "../styled/Input";
-// import BASE_URL from "../../app/config";
-import { useUpdateInfoMutation } from "../../../app/services/contact";
-import StyledModal from "../styled/Modal";
-import Button from "../styled/Button";
+import Input from "../../common/component/styled/Input";
+import { useUpdateInfoMutation } from "../../app/services/contact";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
 const StyledEdit = styled(StyledModal)`
   .input {
     margin: 48px 0;
@@ -22,7 +20,7 @@ const StyledEdit = styled(StyledModal)`
     }
   }
 `;
-import Modal from "../Modal";
+import Modal from "../../common/component/Modal";
 import toast from "react-hot-toast";
 export default function ProfileBasicEditModal({
   label = "Username",
diff --git a/src/common/component/Setting/config/Agora.js b/src/routes/setting/config/Agora.js
similarity index 91%
rename from src/common/component/Setting/config/Agora.js
rename to src/routes/setting/config/Agora.js
index 833f9cd3..ccd1b10d 100644
--- a/src/common/component/Setting/config/Agora.js
+++ b/src/routes/setting/config/Agora.js
@@ -1,10 +1,10 @@
 // import { useState, useEffect } from "react";
 import StyledContainer from "./StyledContainer";
-import Input from "../../styled/Input";
-import Textarea from "../../styled/Textarea";
-import Label from "../../styled/Label";
-import Toggle from "../../styled/Toggle";
-import SaveTip from "../../SaveTip";
+import Input from "../../../common/component/styled/Input";
+import Textarea from "../../../common/component/styled/Textarea";
+import Label from "../../../common/component/styled/Label";
+import Toggle from "../../../common/component/styled/Toggle";
+import SaveTip from "../../../common/component/SaveTip";
 import useConfig from "./useConfig";
 export default function ConfigAgora() {
   const {
diff --git a/src/common/component/Setting/config/Firebase.js b/src/routes/setting/config/Firebase.js
similarity index 89%
rename from src/common/component/Setting/config/Firebase.js
rename to src/routes/setting/config/Firebase.js
index c4db3590..f2b1bbbd 100644
--- a/src/common/component/Setting/config/Firebase.js
+++ b/src/routes/setting/config/Firebase.js
@@ -1,10 +1,10 @@
 // import { useState, useEffect } from "react";
 import StyledContainer from "./StyledContainer";
-import Input from "../../styled/Input";
-import Textarea from "../../styled/Textarea";
-import Toggle from "../../styled/Toggle";
-import Label from "../../styled/Label";
-import SaveTip from "../../SaveTip";
+import Input from "../../../common/component/styled/Input";
+import Textarea from "../../../common/component/styled/Textarea";
+import Toggle from "../../../common/component/styled/Toggle";
+import Label from "../../../common/component/styled/Label";
+import SaveTip from "../../../common/component/SaveTip";
 import useConfig from "./useConfig";
 
 export default function ConfigFirebase() {
diff --git a/src/routes/setting/config/Logins.js b/src/routes/setting/config/Logins.js
new file mode 100644
index 00000000..835a4960
--- /dev/null
+++ b/src/routes/setting/config/Logins.js
@@ -0,0 +1,119 @@
+// import { useState, useEffect } from "react";
+import StyledContainer from "./StyledContainer";
+import Textarea from "../../../common/component/styled/Textarea";
+import Toggle from "../../../common/component/styled/Toggle";
+import Label from "../../../common/component/styled/Label";
+import SaveTip from "../../../common/component/SaveTip";
+import useConfig from "./useConfig";
+
+export default function Logins() {
+  const { values, updateConfig, setValues, reset, changed } = useConfig(
+    "login"
+  );
+  const handleUpdate = () => {
+    // const { token_url, description } = values;
+    updateConfig(values);
+  };
+  const handleChange = (evt) => {
+    const newValue = evt.target.value;
+    const { type } = evt.target.dataset;
+    const items = newValue ? newValue.split("\n") : [];
+    setValues((prev) => {
+      return { ...prev, [type]: items };
+    });
+  };
+  const handleToggle = (val) => {
+    setValues((prev) => {
+      return { ...prev, ...val };
+    });
+  };
+  if (!values) return null;
+  const { google, metamask, password, oidc = [] } = values ?? {};
+  return (
+    <StyledContainer>
+      <div className="inputs">
+        <div className="input row">
+          <Label>Password</Label>
+          <Toggle
+            onClick={handleToggle.bind(null, { password: !password })}
+            data-checked={password}
+          ></Toggle>
+        </div>
+        <div className="input row">
+          <Label>Google</Label>
+          <Toggle
+            onClick={handleToggle.bind(null, { google: !google })}
+            data-checked={google}
+          ></Toggle>
+        </div>
+        <div className="input row">
+          <Label>Metamask</Label>
+          <Toggle
+            onClick={handleToggle.bind(null, { metamask: !metamask })}
+            data-checked={metamask}
+          ></Toggle>
+        </div>
+        <div className="input">
+          <Label htmlFor="desc">OIDC</Label>
+          <Textarea
+            rows={10}
+            data-type="oidc"
+            onChange={handleChange}
+            value={oidc.join("\n")}
+            name="oidc"
+            placeholder="Input issuer list, one line, one issuer"
+          />
+        </div>
+
+        {/* <div className="input">
+          <Label htmlFor="name">Token Url</Label>
+          <Input
+            disabled={!enabled}
+            data-type="token_url"
+            onChange={handleChange}
+            value={token_url || "https://oauth2.googleapis.com/token"}
+            name="token_url"
+            placeholder="Token URL"
+          />
+        </div>
+        <div className="input">
+          <Label htmlFor="desc">Project ID</Label>
+          <Input
+            disabled={!enabled}
+            type={"number"}
+            data-type="project_id"
+            onChange={handleChange}
+            value={project_id}
+            name="project_id"
+            placeholder="Project ID"
+          />
+        </div>
+        <div className="input">
+          <Label htmlFor="desc">Private Key</Label>
+          <Textarea
+            rows={10}
+            disabled={!enabled}
+            data-type="private_key"
+            onChange={handleChange}
+            value={private_key}
+            name="private_key"
+            placeholder="Private key"
+          />
+        </div>
+        <div className="input">
+          <Label htmlFor="desc">Client Email</Label>
+          <Input
+            disabled={!enabled}
+            data-type="client_email"
+            onChange={handleChange}
+            value={client_email}
+            name="client_email"
+            placeholder="Client Email address"
+          />
+        </div> */}
+      </div>
+      {changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
+      {/* <button onClick={handleUpdate} className="btn">update</button> */}
+    </StyledContainer>
+  );
+}
diff --git a/src/common/component/Setting/config/SMTP.js b/src/routes/setting/config/SMTP.js
similarity index 90%
rename from src/common/component/Setting/config/SMTP.js
rename to src/routes/setting/config/SMTP.js
index 15503c8a..4682e5fb 100644
--- a/src/common/component/Setting/config/SMTP.js
+++ b/src/routes/setting/config/SMTP.js
@@ -6,15 +6,15 @@ const StyledTest = styled.div`
   white-space: nowrap;
   margin-top: 24px;
 `;
-import { useSendTestEmailMutation } from "../../../../app/services/server";
-import iconQuestion from "../../../../assets/icons/question.svg?url";
+import { useSendTestEmailMutation } from "../../../app/services/server";
+import iconQuestion from "../../../assets/icons/question.svg?url";
 import useConfig from "./useConfig";
 import StyledContainer from "./StyledContainer";
-import Input from "../../styled/Input";
-import Button from "../../styled/Button";
-import Toggle from "../../styled/Toggle";
-import Label from "../../styled/Label";
-import SaveTip from "../../SaveTip";
+import Input from "../../../common/component/styled/Input";
+import Button from "../../../common/component/styled/Button";
+import Toggle from "../../../common/component/styled/Toggle";
+import Label from "../../../common/component/styled/Label";
+import SaveTip from "../../../common/component/SaveTip";
 import toast from "react-hot-toast";
 
 export default function ConfigSMTP() {
diff --git a/src/common/component/Setting/config/StyledContainer.js b/src/routes/setting/config/StyledContainer.js
similarity index 100%
rename from src/common/component/Setting/config/StyledContainer.js
rename to src/routes/setting/config/StyledContainer.js
diff --git a/src/routes/setting/config/useConfig.js b/src/routes/setting/config/useConfig.js
new file mode 100644
index 00000000..4cd468a4
--- /dev/null
+++ b/src/routes/setting/config/useConfig.js
@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { isObjectEqual } from "../../../common/utils";
+import toast from "react-hot-toast";
+import {
+  useGetAgoraConfigQuery,
+  useGetFirebaseConfigQuery,
+  useGetSMTPConfigQuery,
+  useGetLoginConfigQuery,
+  useUpdateLoginConfigMutation,
+  useUpdateSMTPConfigMutation,
+  useUpdateAgoraConfigMutation,
+  useUpdateFirebaseConfigMutation,
+} from "../../../app/services/server";
+export default function useConfig(config = "smtp") {
+  const [changed, setChanged] = useState(false);
+  const [values, setValues] = useState({});
+  const { data: Login, refetch: refetchLogin } = useGetLoginConfigQuery();
+  const [
+    updateLoginConfig,
+    { isSuccess: LoginUpdated },
+  ] = useUpdateLoginConfigMutation();
+  const { data: SMTP, refetch: refetchSMTP } = useGetSMTPConfigQuery();
+  const [
+    updateSMTPConfig,
+    { isSuccess: SMTPUpdated },
+  ] = useUpdateSMTPConfigMutation();
+  const { data: Agora, refetch: refetchAgora } = useGetAgoraConfigQuery();
+  const [
+    updateAgoraConfig,
+    { isSuccess: AgoraUpdated },
+  ] = useUpdateAgoraConfigMutation();
+  const {
+    data: Firebase,
+    refetch: refetchFirebase,
+  } = useGetFirebaseConfigQuery();
+  const [
+    updateFirebaseConfig,
+    { isSuccess: FirebaseUpdated },
+  ] = useUpdateFirebaseConfigMutation();
+
+  const datas = {
+    login: Login,
+    smtp: SMTP,
+    agora: Agora,
+    firebase: Firebase,
+  };
+  const updateFns = {
+    login: updateLoginConfig,
+    smtp: updateSMTPConfig,
+    agora: updateAgoraConfig,
+    firebase: updateFirebaseConfig,
+  };
+  const refetchs = {
+    smtp: refetchSMTP,
+    agora: refetchAgora,
+    firebase: refetchFirebase,
+    login: refetchLogin,
+  };
+  const updateds = {
+    login: LoginUpdated,
+    smtp: SMTPUpdated,
+    agora: AgoraUpdated,
+    firebase: FirebaseUpdated,
+  };
+  const data = datas[config];
+  const updateConfig = updateFns[config];
+  const refetch = refetchs[config];
+  const updated = updateds[config];
+  const reset = () => {
+    setValues(data ?? {});
+  };
+
+  const toggleEnable = () => {
+    setValues((prev) => {
+      return { ...prev, enabled: !prev.enabled };
+    });
+  };
+  useEffect(() => {
+    if (updated) {
+      toast.success("Configuration Updated!");
+      refetch();
+    }
+  }, [updated]);
+  useEffect(() => {
+    console.log("wtf", data);
+    // if (data) {
+    setValues(data ?? {});
+    // }
+  }, [data]);
+  useEffect(() => {
+    // if (data && values) {
+    if (!isObjectEqual(data, values)) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+    // }
+  }, [data, values]);
+  return {
+    reset,
+    changed,
+    updateConfig,
+    values,
+    setValues,
+    toggleEnable,
+  };
+}
diff --git a/src/common/component/Setting/index.js b/src/routes/setting/index.js
similarity index 79%
rename from src/common/component/Setting/index.js
rename to src/routes/setting/index.js
index cb4f14e1..f583fabb 100644
--- a/src/common/component/Setting/index.js
+++ b/src/routes/setting/index.js
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { useDispatch } from "react-redux";
-import { toggleSetting } from "../../../app/slices/ui";
-import StyledSettingContainer from "../StyledSettingContainer";
+// import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import StyledSettingContainer from "../../common/component/StyledSettingContainer";
 import useNavs from "./navs";
 import LogoutConfirmModal from "./LogoutConfirmModal";
 
@@ -14,9 +14,10 @@ export default function Setting() {
     .flat();
   const [currNav, setCurrNav] = useState(flatenNavs[0]);
   const [logoutConfirm, setLogoutConfirm] = useState(false);
-  const dispatch = useDispatch();
+  const navgateTo = useNavigate();
   const close = () => {
-    dispatch(toggleSetting());
+    // dispatch(toggleSetting());
+    navgateTo(-1);
   };
   const toggleLogoutConfrim = () => {
     setLogoutConfirm((prev) => !prev);
diff --git a/src/routes/setting/navs.js b/src/routes/setting/navs.js
new file mode 100644
index 00000000..9401367f
--- /dev/null
+++ b/src/routes/setting/navs.js
@@ -0,0 +1,104 @@
+import { useSelector } from "react-redux";
+import MyAccount from "./MyAccount";
+import Overview from "./Overview";
+import Logins from "./config/Logins";
+import ConfigFirebase from "./config/Firebase";
+import ConfigSMTP from "./config/SMTP";
+import Notifications from "./Notifications";
+import ManageMembers from "../../common/component/ManageMembers";
+import FAQ from "../../common/component/FAQ";
+import ConfigAgora from "./config/Agora";
+const navs = [
+  {
+    title: "General",
+    items: [
+      {
+        name: "overview",
+        title: "Overview",
+        component: <Overview />,
+      },
+      {
+        name: "members",
+        title: "Members",
+        component: <ManageMembers />,
+        admin: true,
+      },
+      {
+        name: "notification",
+        title: "Notification",
+        component: <Notifications />,
+      },
+    ],
+  },
+  {
+    title: "User",
+    items: [
+      {
+        name: "my_account",
+        title: "My Account",
+        component: <MyAccount />,
+      },
+    ],
+  },
+  {
+    title: "Configuration",
+    items: [
+      {
+        name: "firebase",
+        title: "Firebase",
+        component: <ConfigFirebase />,
+      },
+      {
+        name: "agora",
+        title: "Agora",
+        component: <ConfigAgora />,
+      },
+      {
+        name: "smtp",
+        title: "SMTP",
+        component: <ConfigSMTP />,
+      },
+      {
+        name: "social_login",
+        title: "Social Login",
+        component: <Logins />,
+      },
+    ],
+    admin: true,
+  },
+  {
+    title: "About",
+    items: [
+      {
+        name: "faq",
+        title: "FAQ",
+        component: <FAQ />,
+      },
+      {
+        name: "terms",
+        title: "Terms & Privacy",
+        component: "Terms & Privacy",
+      },
+      {
+        name: "feedback",
+        title: "Feedback",
+        component: "feedback",
+      },
+    ],
+  },
+];
+const useNavs = () => {
+  const loginUser = useSelector((store) => {
+    return store.contacts.byId[store.authData.uid];
+  });
+  const Navs = navs.filter((nav) => {
+    if (loginUser.is_admin) {
+      return true;
+    } else {
+      return !nav.admin;
+    }
+  });
+  return Navs;
+};
+
+export default useNavs;
diff --git a/src/common/component/ChannelSetting/DeleteConfirmModal.js b/src/routes/settingChannel/DeleteConfirmModal.js
similarity index 79%
rename from src/common/component/ChannelSetting/DeleteConfirmModal.js
rename to src/routes/settingChannel/DeleteConfirmModal.js
index 3a7918ae..3860c519 100644
--- a/src/common/component/ChannelSetting/DeleteConfirmModal.js
+++ b/src/routes/settingChannel/DeleteConfirmModal.js
@@ -2,11 +2,10 @@
 import { useEffect } from "react";
 import toast from "react-hot-toast";
 import { useNavigate, useMatch } from "react-router-dom";
-import Modal from "../Modal";
-// import BASE_URL from "../../app/config";
-import { useLazyRemoveChannelQuery } from "../../../app/services/channel";
-import StyledModal from "../styled/Modal";
-import Button from "../styled/Button";
+import Modal from "../../common/component/Modal";
+import { useLazyRemoveChannelQuery } from "../../app/services/channel";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
 
 export default function DeleteConfirmModal({ id, closeModal }) {
   const navigateTo = useNavigate();
@@ -18,10 +17,8 @@ export default function DeleteConfirmModal({ id, closeModal }) {
   useEffect(() => {
     if (isSuccess) {
       toast.success("delete channel successfully!");
-      if (pathMatched) {
-        navigateTo("/chat");
-      }
       closeModal();
+      navigateTo("/chat");
     }
   }, [isSuccess, id, pathMatched]);
   if (!id) return null;
@@ -32,7 +29,6 @@ export default function DeleteConfirmModal({ id, closeModal }) {
         description="Are you sure want to delete this channel?"
         buttons={
           <>
-            {" "}
             <Button onClick={closeModal.bind(null, undefined)}>Cancel</Button>
             <Button onClick={handleDelete} className="danger">
               {isLoading ? "Deleting" : `Delete`}
diff --git a/src/common/component/ChannelSetting/Overview.js b/src/routes/settingChannel/Overview.js
similarity index 89%
rename from src/common/component/ChannelSetting/Overview.js
rename to src/routes/settingChannel/Overview.js
index c22b1d1e..5bf95956 100644
--- a/src/common/component/ChannelSetting/Overview.js
+++ b/src/routes/settingChannel/Overview.js
@@ -4,12 +4,12 @@ import toast from "react-hot-toast";
 import {
   useGetChannelQuery,
   useUpdateChannelMutation,
-} from "../../../app/services/channel";
-import Input from "../styled/Input";
-import Label from "../styled/Label";
-import Textarea from "../styled/Textarea";
-import SaveTip from "../SaveTip";
-import channelIcon from "../../../assets/icons/channel.svg?url";
+} from "../../app/services/channel";
+import Input from "../../common/component/styled/Input";
+import Label from "../../common/component/styled/Label";
+import Textarea from "../../common/component/styled/Textarea";
+import SaveTip from "../../common/component/SaveTip";
+import channelIcon from "../../assets/icons/channel.svg?url";
 import { useSelector } from "react-redux";
 const StyledWrapper = styled.div`
   position: relative;
@@ -89,7 +89,7 @@ export default function Overview({ id = 0 }) {
 
   if (!values || !id) return null;
   const { name, description } = values;
-  const isAdmin = loginUser.is_admin;
+  const isAdmin = loginUser?.is_admin;
   return (
     <StyledWrapper>
       <div className="inputs">
diff --git a/src/common/component/ChannelSetting/index.js b/src/routes/settingChannel/index.js
similarity index 75%
rename from src/common/component/ChannelSetting/index.js
rename to src/routes/settingChannel/index.js
index 54d96339..4e59491c 100644
--- a/src/common/component/ChannelSetting/index.js
+++ b/src/routes/settingChannel/index.js
@@ -1,11 +1,12 @@
 import { useState } from "react";
-import { useDispatch } from "react-redux";
-import { toggleChannelSetting } from "../../../app/slices/ui";
-import StyledSettingContainer from "../StyledSettingContainer";
+import { useParams, useNavigate } from "react-router-dom";
+import StyledSettingContainer from "../../common/component/StyledSettingContainer";
 import DeleteConfirmModal from "./DeleteConfirmModal";
 import useNavs from "./navs";
-export default function ChannelSetting({ id = 0 }) {
-  const navs = useNavs(id);
+export default function ChannelSetting() {
+  const navigate = useNavigate();
+  const { cid } = useParams();
+  const navs = useNavs(cid);
   const flatenNavs = navs
     .map(({ items }) => {
       return items;
@@ -13,9 +14,8 @@ export default function ChannelSetting({ id = 0 }) {
     .flat();
   const [currNav, setCurrNav] = useState(flatenNavs[0]);
   const [deleteConfirm, setDeleteConfirm] = useState(false);
-  const dispatch = useDispatch();
   const close = () => {
-    dispatch(toggleChannelSetting());
+    navigate(-1);
   };
   const toggleDeleteConfrim = () => {
     setDeleteConfirm((prev) => !prev);
@@ -26,7 +26,7 @@ export default function ChannelSetting({ id = 0 }) {
       setCurrNav(tmp);
     }
   };
-  if (!id) return null;
+  if (!cid) return null;
   return (
     <>
       <StyledSettingContainer
@@ -45,7 +45,7 @@ export default function ChannelSetting({ id = 0 }) {
         {currNav.component}
       </StyledSettingContainer>
       {deleteConfirm && (
-        <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={id} />
+        <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={cid} />
       )}
     </>
   );
diff --git a/src/common/component/ChannelSetting/navs.js b/src/routes/settingChannel/navs.js
similarity index 92%
rename from src/common/component/ChannelSetting/navs.js
rename to src/routes/settingChannel/navs.js
index d35ccb7c..855d4a6b 100644
--- a/src/common/component/ChannelSetting/navs.js
+++ b/src/routes/settingChannel/navs.js
@@ -1,5 +1,5 @@
 import Overview from "./Overview";
-import ManageMembers from "../ManageMembers";
+import ManageMembers from "../../common/component/ManageMembers";
 const useNavs = (channelId) => {
   const navs = [
     {