From 19a48618198b333d0f69d74c56448b8b0955da96 Mon Sep 17 00:00:00 2001 From: zerosoul Date: Fri, 15 Apr 2022 13:18:03 +0800 Subject: [PATCH] refactor: setting page --- src/app/listener.middleware/handler.server.js | 6 ------ src/app/services/channel.js | 17 +++++++++++++++++ src/app/services/server.js | 14 +------------- src/app/slices/server.js | 11 +---------- src/routes/chat/ChannelList/NavItem.js | 13 ++++++++----- src/routes/home/Menu.js | 5 +++-- src/routes/setting/index.js | 19 ++++++++----------- src/routes/settingChannel/Overview.js | 16 ++++++++++------ src/routes/settingChannel/index.js | 18 ++++++++---------- 9 files changed, 56 insertions(+), 63 deletions(-) diff --git a/src/app/listener.middleware/handler.server.js b/src/app/listener.middleware/handler.server.js index accd4264..fb496748 100644 --- a/src/app/listener.middleware/handler.server.js +++ b/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; diff --git a/src/app/services/channel.js b/src/app/services/channel.js index 7494214d..5d05671e 100644 --- a/src/app/services/channel.js +++ b/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, diff --git a/src/app/services/server.js b/src/app/services/server.js index 2289c90d..44efe8a6 100644 --- a/src/app/services/server.js +++ b/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) => ({ diff --git a/src/app/slices/server.js b/src/app/slices/server.js index d7224bc0..6a6efee0 100644 --- a/src/app/slices/server.js +++ b/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 { - updateInfo, - resetServer, - fullfillServer, - updateInviteLink, -} = serverSlice.actions; +export const { updateInfo, resetServer, fullfillServer } = serverSlice.actions; export default serverSlice.reducer; diff --git a/src/routes/chat/ChannelList/NavItem.js b/src/routes/chat/ChannelList/NavItem.js index 01ca921e..088910fc 100644 --- a/src/routes/chat/ChannelList/NavItem.js +++ b/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 ( <> { {name}
- {loginUser?.is_admin && ( + {inviteIconVisible && ( { {inviteModalVisible && ( diff --git a/src/routes/home/Menu.js b/src/routes/home/Menu.js index 3360ecb1..0223de32 100644 --- a/src/routes/home/Menu.js +++ b/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 (
  • - + setting icon diff --git a/src/routes/setting/index.js b/src/routes/setting/index.js index f583fabb..97b56f04 100644 --- a/src/routes/setting/index.js +++ b/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 ( <> 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 (