refactor: setting page

src/app/listener.middleware/handler.server.js

@@ -6,12 +6,6 @@ export default async function handler({ operation, payload }) {
     return;
   }
   switch (operation) {
-    case "updateInviteLink":
-      {
-        const data = payload;
-        await table.setItem("inviteLink", data);
-      }
-      break;
     case "updateInfo":
       {
         const data = payload;

src/app/services/channel.js

@@ -72,6 +72,21 @@ export const channelApi = createApi({
       //   }
       // },
     }),
+    createInviteLink: builder.query({
+      query: (gid) => ({
+        headers: {
+          "content-type": "text/plain",
+          accept: "text/plain",
+        },
+        url: `/group/${gid}/create_invite_link`,
+        responseHandler: (response) => response.text(),
+      }),
+      transformResponse: (link) => {
+        // 替换掉域名
+        const invite = new URL(link);
+        return `${location.origin}${invite.pathname}${invite.search}${invite.hash}`;
+      },
+    }),
     removeChannel: builder.query({
       query: (id) => ({
         url: `group/${id}`,
@@ -126,6 +141,8 @@ export const channelApi = createApi({
 });
 
 export const {
+  useLazyCreateInviteLinkQuery,
+  useCreateInviteLinkQuery,
   useLazyGetHistoryMessagesQuery,
   useGetChannelQuery,
   useUpdateChannelMutation,

src/app/services/server.js

@@ -1,6 +1,6 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import BASE_URL from "../config";
-import { updateInviteLink, updateInfo } from "../slices/server";
+import { updateInfo } from "../slices/server";
 import baseQuery from "./base.query";
 const defaultExpireDuration = 7 * 24 * 60 * 60;
 export const serverApi = createApi({
@@ -108,18 +108,6 @@ export const serverApi = createApi({
         const invite = new URL(link);
         return `${location.origin}${invite.pathname}${invite.search}${invite.hash}`;
       },
-      async onQueryStarted(
-        expire = defaultExpireDuration,
-        { dispatch, queryFulfilled }
-      ) {
-        try {
-          const { data: link } = await queryFulfilled;
-          console.log("link", link);
-          dispatch(updateInviteLink({ expire, link }));
-        } catch {
-          console.log("invite link error");
-        }
-      },
     }),
     updateServer: builder.mutation({
       query: (data) => ({

src/app/slices/server.js

@@ -32,16 +32,7 @@ const serverSlice = createSlice({
         state[_key] = values[_key];
       });
     },
-    updateInviteLink(state, action) {
-      const { link, expire = 7 * 24 * 60 * 60 } = action.payload;
-      state.inviteLink = { link, expire };
-    },
   },
 });
-export const {
+export const { updateInfo, resetServer, fullfillServer } = serverSlice.actions;
-  updateInfo,
-  resetServer,
-  fullfillServer,
-  updateInviteLink,
-} = serverSlice.actions;
 export default serverSlice.reducer;

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 currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
-    const tmp = flatenNavs.find((n) => n.name == name);
-    if (tmp) {
-      setCurrNav(tmp);
-    }
-  };
   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(
+  const { loginUser, channel } = useSelector((store) => {
-    (store) => store.contacts.byId[store.authData.uid]
+    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"