diff --git a/src/app/services/channel.ts b/src/app/services/channel.ts index c40116f5..4fb688e9 100644 --- a/src/app/services/channel.ts +++ b/src/app/services/channel.ts @@ -3,7 +3,7 @@ import { createApi } from "@reduxjs/toolkit/query/react"; import baseQuery from "./base.query"; import BASE_URL, { ContentTypes } from "../config"; import { updateChannel, removeChannel } from "../slices/channels"; -import { updateRemeberedNavs } from "../slices/ui"; +import { updateRememberedNavs } from "../slices/ui"; import { removeMessage } from "../slices/message"; import { removeChannelSession } from "../slices/message.channel"; import { removeReactionMessage } from "../slices/message.reaction"; @@ -72,8 +72,8 @@ export const channelApi = createApi({ } } }), - createInviteLink: builder.query({ - query: (gid = "") => ({ + createInviteLink: builder.query({ + query: (gid) => ({ headers: { "content-type": "text/plain", accept: "text/plain" @@ -98,7 +98,7 @@ export const channelApi = createApi({ const { channelMessage, ui: { - remeberedNavs: { chat: remeberedPath } + rememberedNavs: { chat: remeberedPath } } } = getState() as RootState; try { @@ -106,7 +106,7 @@ export const channelApi = createApi({ // 删掉该channel下的所有消息&reaction const mids = channelMessage[id]; if (remeberedPath == `/chat/channel/${id}`) { - dispatch(updateRemeberedNavs({ path: null })); + dispatch(updateRememberedNavs({ path: null })); } if (mids) { dispatch(removeChannelSession(id)); diff --git a/src/app/slices/ui.ts b/src/app/slices/ui.ts index 924d706b..0a652867 100644 --- a/src/app/slices/ui.ts +++ b/src/app/slices/ui.ts @@ -12,7 +12,7 @@ export interface State { selectMessages: { [key: string]: any }; draftMarkdown: { [key: string]: any }; draftMixedText: { [key: string]: any }; - remeberedNavs: { + rememberedNavs: { chat: null | string; user: null | string; }; @@ -29,7 +29,7 @@ const initialState: State = { draftMarkdown: {}, draftMixedText: {}, // todo: typo - remeberedNavs: { + rememberedNavs: { chat: null, user: null } @@ -57,9 +57,9 @@ const uiSlice = createSlice({ updateFileListView(state, action) { state.fileListView = action.payload; }, - updateRemeberedNavs(state, action: PayloadAction<{ key?: string; path: string | null }>) { + updateRememberedNavs(state, action: PayloadAction<{ key?: string; path: string | null }>) { const { key = "chat", path = null } = action.payload || {}; - state.remeberedNavs[key] = path; + state.rememberedNavs[key] = path; }, updateDraftMarkdown(state, action) { const { key, value } = action.payload; @@ -165,7 +165,7 @@ export const { updateSelectMessages, updateDraftMarkdown, updateDraftMixedText, - updateRemeberedNavs + updateRememberedNavs } = uiSlice.actions; export default uiSlice.reducer; diff --git a/src/common/component/FileMessage/styled.tsx b/src/common/component/FileMessage/styled.tsx index 043f38e8..9a115132 100644 --- a/src/common/component/FileMessage/styled.tsx +++ b/src/common/component/FileMessage/styled.tsx @@ -7,9 +7,8 @@ const Styled = styled.div` border-radius: 6px; width: 370px; height: 66px; - /* height: fit-content; */ &.sending { - /* opacity: 0.9; */ + opacity: 0.9; } * { user-select: text; diff --git a/src/common/component/ForwardModal/index.tsx b/src/common/component/ForwardModal/index.tsx index 34766b84..4a3da547 100644 --- a/src/common/component/ForwardModal/index.tsx +++ b/src/common/component/ForwardModal/index.tsx @@ -1,4 +1,4 @@ -import { useState, MouseEvent } from "react"; +import { useState, MouseEvent, ChangeEvent } from "react"; // import toast from "react-hot-toast"; import Modal from "../Modal"; import Button from "../styled/Button"; @@ -20,8 +20,8 @@ export default function ForwardModal({ mids, closeModal }) { const [appendText, setAppendText] = useState(""); const { sendMessages } = useSendMessage(); const { forwardMessage, forwarding } = useForwardMessage(); - const [selectedMembers, setSelectedMembers] = useState([]); - const [selectedChannels, setSelectedChannels] = useState([]); + const [selectedMembers, setSelectedMembers] = useState([]); + const [selectedChannels, setSelectedChannels] = useState([]); const { channels, // input: channelInput, @@ -29,14 +29,14 @@ export default function ForwardModal({ mids, closeModal }) { } = useFilteredChannels(); const { users, input, updateInput } = useFilteredUsers(); const toggleCheck = ({ currentTarget }: MouseEvent) => { - const { id, type = "user" } = currentTarget.dataset; + const { id = 0, type = "user" } = currentTarget.dataset; const ids = type == "user" ? selectedMembers : selectedChannels; const updateState = type == "user" ? setSelectedMembers : setSelectedChannels; let tmp = ids.includes(+id) ? ids.filter((m) => m != id) : [...ids, +id]; console.log(id, currentTarget); updateState(tmp); }; - const updateAppendText = (evt) => { + const updateAppendText = (evt: ChangeEvent) => { setAppendText(evt.target.value); }; const handleForward = async () => { @@ -55,14 +55,14 @@ export default function ForwardModal({ mids, closeModal }) { toast.success("Forward Message Successfully"); closeModal(); }; - const removeSelected = (id, from = "user") => { + const removeSelected = (id: number, from = "user") => { if (from == "user") { setSelectedMembers(selectedMembers.filter((m) => m != id)); } else { setSelectedChannels(selectedChannels.filter((cid) => cid != id)); } }; - const handleSearchChange = (evt) => { + const handleSearchChange = (evt: ChangeEvent) => { const newVal = evt.target.value; updateChannelInput(newVal); updateInput(newVal); diff --git a/src/common/component/ForwardModal/styled.tsx b/src/common/component/ForwardModal/styled.tsx index e436f42a..d538d6f0 100644 --- a/src/common/component/ForwardModal/styled.tsx +++ b/src/common/component/ForwardModal/styled.tsx @@ -2,7 +2,6 @@ import styled from "styled-components"; const StyledWrapper = styled.div` display: flex; - /* max-width: 604px; */ max-height: 514px; min-height: 400px; background: #fff; @@ -12,7 +11,6 @@ const StyledWrapper = styled.div` overflow: hidden; .left { width: 276px; - /* height: 100%; */ box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1); overflow-y: scroll; .search { @@ -36,15 +34,12 @@ const StyledWrapper = styled.div` .users { display: flex; flex-direction: column; - /* height: 260px; */ padding-bottom: 20px; - /* overflow-y: scroll; */ .user { cursor: pointer; display: flex; align-items: center; padding: 0 16px; - /* margin: 0 4px; */ width: -webkit-fill-available; border-radius: 4px; &:hover { @@ -60,8 +55,6 @@ const StyledWrapper = styled.div` display: flex; flex-direction: column; align-items: flex-start; - /* height: 100%; */ - /* justify-content: space-between; */ padding: 16px; box-sizing: border-box; .title { diff --git a/src/common/component/GithubLoginButton.tsx b/src/common/component/GithubLoginButton.tsx index 3de77471..9bd7f821 100644 --- a/src/common/component/GithubLoginButton.tsx +++ b/src/common/component/GithubLoginButton.tsx @@ -17,7 +17,6 @@ const StyledSocialButton = styled(Button)` color: #344054; border: 1px solid #d0d5dd; background: none !important; - .icon { width: 24px; height: 24px; @@ -48,12 +47,11 @@ const GithubLoginButton: FC = ({ type = "login", client_id }) => { useEffect(() => { if (isSuccess) { toast.success("Login Successfully"); - // navigateTo("/"); } }, [isSuccess]); useEffect(() => { if (error) { - switch (error.status) { + switch (error?.status) { case 410: toast.error( "No associated account found, please user admin for an invitation link to join." @@ -68,9 +66,7 @@ const GithubLoginButton: FC = ({ type = "login", client_id }) => { }, [error]); const handleGithubLogin = () => { location.href = `https://github.com/login/oauth/authorize?client_id=${client_id}`; - // console.log("github login"); }; - // console.log("google login ", loaded); return ( diff --git a/src/common/component/InviteModal/AddMembers.tsx b/src/common/component/InviteModal/AddMembers.tsx index ff374581..b8b40c65 100644 --- a/src/common/component/InviteModal/AddMembers.tsx +++ b/src/common/component/InviteModal/AddMembers.tsx @@ -30,8 +30,6 @@ const Styled = styled.div` gap: 5px; width: 100%; overflow: scroll; - - /* white-space: nowrap; */ &::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ height: 0; /* Remove scrollbar space */ @@ -57,7 +55,6 @@ const Styled = styled.div` fill: #fff; fill-opacity: 1; } - /* filter: invert(1); */ } } .input { @@ -68,7 +65,6 @@ const Styled = styled.div` .users { display: flex; flex-direction: column; - /* height: 260px; */ padding-bottom: 20px; max-height: 364px; overflow: scroll; @@ -77,7 +73,6 @@ const Styled = styled.div` display: flex; align-items: center; padding: 4px 8px; - /* margin: 0 4px; */ width: -webkit-fill-available; border-radius: 8px; &:hover { @@ -104,10 +99,10 @@ interface Props { const AddMembers: FC = ({ cid, closeModal }) => { const [addMembers, { isLoading: isAdding, isSuccess }] = useAddMembersMutation(); - const [selects, setSelects] = useState([]); + const [selects, setSelects] = useState([]); const { channel, userData } = useAppSelector((store) => { return { - channel: store.channels.byId[cid], + channel: cid ? store.channels.byId[cid] : null, userData: store.users.byId }; }); @@ -124,8 +119,8 @@ const AddMembers: FC = ({ cid, closeModal }) => { const { input, updateInput, users = [] } = useFilteredUsers(); const toggleCheckMember = ({ currentTarget }: MouseEvent) => { - const { uid } = currentTarget.dataset; - if (selects.includes(+uid)) { + const uid = Number(currentTarget.dataset.uid); + if (selects.includes(uid)) { setSelects((prevs) => { return prevs.filter((id) => id != uid); }); @@ -150,7 +145,7 @@ const AddMembers: FC = ({ cid, closeModal }) => { {selects.map((uid) => { return (
  • - {userData[uid].name} + {userData[uid]?.name}
  • ); diff --git a/src/common/component/InviteModal/InviteByEmail.tsx b/src/common/component/InviteModal/InviteByEmail.tsx index 02ecd04f..0bf12545 100644 --- a/src/common/component/InviteModal/InviteByEmail.tsx +++ b/src/common/component/InviteModal/InviteByEmail.tsx @@ -39,14 +39,12 @@ const Styled = styled.div` flex-direction: column; gap: 16px; margin-bottom: 16px; - /* position: relative; */ } > .link { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; - /* position: relative; */ } label { color: #6b7280; diff --git a/src/common/component/InviteModal/index.tsx b/src/common/component/InviteModal/index.tsx index 8e1d54ec..1050e4d2 100644 --- a/src/common/component/InviteModal/index.tsx +++ b/src/common/component/InviteModal/index.tsx @@ -41,7 +41,7 @@ interface Props { const InviteModal: FC = ({ type = "server", cid, title = "", closeModal }) => { const { channel, server } = useAppSelector((store) => { return { - channel: store.channels.byId[cid], + channel: cid ? store.channels.byId[cid] : undefined, server: store.server }; }); diff --git a/src/common/component/LeaveChannel/TransferOwnerModal.tsx b/src/common/component/LeaveChannel/TransferOwnerModal.tsx index 1d567e46..1f2d84ea 100644 --- a/src/common/component/LeaveChannel/TransferOwnerModal.tsx +++ b/src/common/component/LeaveChannel/TransferOwnerModal.tsx @@ -44,13 +44,13 @@ const TransferOwnerModal: FC = ({ id, closeModal, withLeave = true }) => leaveChannel, leaveSuccess, transferSuccess, - transfering + transferring } = useLeaveChannel(id); - const [uid, setUid] = useState(null); + const [uid, setUid] = useState(null); const navigateTo = useNavigate(); - const handleSelectUser = (uid) => { + const handleSelectUser = (uid: number) => { setUid(uid); }; const handleTransferAndLeave = async () => { @@ -70,7 +70,7 @@ const TransferOwnerModal: FC = ({ id, closeModal, withLeave = true }) => }, [leaveSuccess, transferSuccess, withLeave]); if (!id) return null; - const operating = leaving || transfering; + const operating = leaving || transferring; return ( = ({ id, closeModal, withLeave = true }) => > {otherMembers.map((id) => { - // const { uid } = u; return (
  • { - localStorage.setItem(KEY_PWA_INSTALLED, true); + localStorage.setItem(KEY_PWA_INSTALLED, "true"); }; return { diff --git a/src/common/component/MarkdownEditor/index.tsx b/src/common/component/MarkdownEditor/index.tsx index 90c99b2d..59b33eba 100644 --- a/src/common/component/MarkdownEditor/index.tsx +++ b/src/common/component/MarkdownEditor/index.tsx @@ -18,7 +18,7 @@ function MarkdownEditor({ sendMarkdown, setEditorInstance }) { - const editorRef = useRef(undefined); + const editorRef = useRef(undefined); const { uploadFile } = useUploadFile(); // const [pHolder, setPHolder] = useState(placeholder); useEffect(() => { @@ -46,11 +46,12 @@ function MarkdownEditor({ }, []); const send = () => { - const edtr = editorRef.current.getInstance(); - const md = edtr.getMarkdown().trim(); + if (!editorRef.current) return; + const editor = editorRef.current.getInstance(); + const md = editor.getMarkdown().trim(); if (md) { - sendMarkdown(edtr.getMarkdown()); - edtr.reset(); + sendMarkdown(editor.getMarkdown()); + editor.reset(); } }; return ( @@ -59,11 +60,9 @@ function MarkdownEditor({ initialValue={initialValue} plugins={[codeSyntaxHighlight]} placeholder={placeholder} - // onChange={handleChange} ref={editorRef} toolbarItems={[]} hideModeSwitch={true} - // initialValue="hello world!" previewStyle="vertical" height={height} initialEditType="markdown" @@ -76,6 +75,3 @@ function MarkdownEditor({ ); } export default MarkdownEditor; -// export default memo(MarkdownEditor, (prevs, nexts) => { -// return prevs.placeholder == nexts.placeholder; -// }); diff --git a/src/common/component/Message/Mention.tsx b/src/common/component/Message/Mention.tsx index 3987f2ed..4cdabd58 100644 --- a/src/common/component/Message/Mention.tsx +++ b/src/common/component/Message/Mention.tsx @@ -1,4 +1,4 @@ -import { FC } from "react"; +import { FC, ReactNode } from "react"; import Tippy from "@tippyjs/react"; import styled from "styled-components"; import Profile from "../Profile"; @@ -15,7 +15,7 @@ const Styled = styled.span` interface Props { uid: number; popover?: boolean; - cid: number; + cid?: number; textOnly?: boolean; } diff --git a/src/common/component/Message/Reply.tsx b/src/common/component/Message/Reply.tsx index d49d46e8..1ff89d12 100644 --- a/src/common/component/Message/Reply.tsx +++ b/src/common/component/Message/Reply.tsx @@ -113,7 +113,7 @@ const renderContent = (data) => { (match, idx) => { console.log("match", match); const uid = match.trim().slice(1); - return ; + return ; } )} diff --git a/src/common/component/SaveTip.tsx b/src/common/component/SaveTip.tsx index 7c60291f..bb6d7ad0 100644 --- a/src/common/component/SaveTip.tsx +++ b/src/common/component/SaveTip.tsx @@ -12,7 +12,6 @@ const StyledWrapper = styled.div` justify-content: space-between; color: #333; background: #fff; - /* gap: 20px; */ border: 1px solid #e5e7eb; box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06); border-radius: 25px; diff --git a/src/common/component/Server.tsx b/src/common/component/Server.tsx index 4cf06675..943a1994 100644 --- a/src/common/component/Server.tsx +++ b/src/common/component/Server.tsx @@ -14,7 +14,6 @@ const StyledWrapper = styled.div` align-items: center; justify-content: space-between; gap: 8px; - /* margin-bottom: 10px; */ .server { display: flex; align-items: center; diff --git a/src/common/component/StyledSettingContainer.tsx b/src/common/component/StyledSettingContainer.tsx index 97f2cda7..86f310f2 100644 --- a/src/common/component/StyledSettingContainer.tsx +++ b/src/common/component/StyledSettingContainer.tsx @@ -78,7 +78,6 @@ const StyledWrapper = styled.div` background-color: #fff; width: 100%; max-height: 100%; - /* max-height: -webkit-fill-available; */ overflow: auto; padding: 32px; diff --git a/src/common/hook/useInviteLink.ts b/src/common/hook/useInviteLink.ts index 2acd46bc..b72431ed 100644 --- a/src/common/hook/useInviteLink.ts +++ b/src/common/hook/useInviteLink.ts @@ -3,7 +3,7 @@ import useCopy from "./useCopy"; import { useGetSMTPStatusQuery } from "../../app/services/server"; import { useLazyCreateInviteLinkQuery as useCreateChannelInviteLinkQuery } from "../../app/services/channel"; -export default function useInviteLink(cid: string | null = "") { +export default function useInviteLink(cid?: number) { const [finalLink, setFinalLink] = useState(""); const { data: SMTPEnabled, isSuccess: smtpStatusFetchSuccess } = useGetSMTPStatusQuery(); const [generateChannelInviteLink, { data: channelInviteLink, isLoading: generatingChannelLink }] = @@ -20,8 +20,6 @@ export default function useInviteLink(cid: string | null = "") { useEffect(() => { const _link = channelInviteLink; if (_link && smtpStatusFetchSuccess) { - // const tmpURL = new URL(_link); - // tmpURL.searchParams.set("code", SMTPEnabled); setFinalLink(_link); } }, [channelInviteLink, smtpStatusFetchSuccess]); diff --git a/src/common/hook/useLeaveChannel.ts b/src/common/hook/useLeaveChannel.ts index 32fce899..dea53d22 100644 --- a/src/common/hook/useLeaveChannel.ts +++ b/src/common/hook/useLeaveChannel.ts @@ -5,10 +5,10 @@ export default function useLeaveChannel(cid: number) { const { channel, loginUid } = useAppSelector((store) => { return { channel: store.channels.byId[cid], loginUid: store.authData.user?.uid }; }); - const [update, { isLoading: transfering, isSuccess: transferSuccess }] = + const [update, { isLoading: transferring, isSuccess: transferSuccess }] = useUpdateChannelMutation(); const [leave, { isLoading: leaving, isSuccess: leaveSuccess }] = useLazyLeaveChannelQuery(); - const transferOwner = (uid = null) => { + const transferOwner = (uid: number) => { if (!uid) return; update({ id: cid, owner: uid }); }; @@ -16,8 +16,8 @@ export default function useLeaveChannel(cid: number) { if (!cid) return; leave(cid); }; - const isOwner = loginUid == channel.owner; - const otherMembers = channel.members.filter((m) => m != loginUid); + const isOwner = loginUid == channel?.owner; + const otherMembers = channel?.members.filter((m) => m != loginUid) || []; return { otherMembers, transferOwner, @@ -25,7 +25,7 @@ export default function useLeaveChannel(cid: number) { leaving, leaveSuccess, isOwner, - transfering, + transferring, transferSuccess }; } diff --git a/src/common/hook/useUploadFile.ts b/src/common/hook/useUploadFile.ts index 5784ead1..2f3151d4 100644 --- a/src/common/hook/useUploadFile.ts +++ b/src/common/hook/useUploadFile.ts @@ -144,7 +144,9 @@ export default function useUploadFile(props: { context: string; id: string } | o stopUploading, data, isUploading: isPreparing || isUploading, - progress: Number((sliceUploadedCountRef.current / totalSliceCountRef.current) * 100).toFixed(2), + progress: +Number((sliceUploadedCountRef.current / totalSliceCountRef.current) * 100).toFixed( + 2 + ), uploadFile, isError: uploadFileError, isSuccess: !!data, diff --git a/src/common/utils.tsx b/src/common/utils.tsx index 5fff3ca5..3d4580b3 100644 --- a/src/common/utils.tsx +++ b/src/common/utils.tsx @@ -127,7 +127,7 @@ export function sliceFile(file, chunksAmount) { return chunks; } -export const getFileIcon = (type, name = "") => { +export const getFileIcon = (type: string, name = "") => { let icon = null; const checks = { @@ -198,10 +198,7 @@ export const normalizeArchiveData = (data = null, filePath = null, uid = null) = thumbnail_id, avatar: user.avatar }); - user.avatar = avatarUrl; - - // console.log("user data", transformedContent, user); return { source, from_mid: mid, diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx index 4f61c995..28b48da9 100644 --- a/src/routes/chat/ChannelChat/index.tsx +++ b/src/routes/chat/ChannelChat/index.tsx @@ -6,7 +6,7 @@ import { useDispatch, useSelector } from "react-redux"; import PinList from "./PinList"; import FavList from "../FavList"; import { useReadMessageMutation } from "../../../app/services/message"; -import { updateRemeberedNavs } from "../../../app/slices/ui"; +import { updateRememberedNavs } from "../../../app/slices/ui"; import useMessageFeed from "../../../common/hook/useMessageFeed"; import useConfig from "../../../common/hook/useConfig"; import ChannelIcon from "../../../common/component/ChannelIcon"; @@ -76,9 +76,9 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) { // dispatch(readMessage(msgIds)); // }; useEffect(() => { - dispatch(updateRemeberedNavs()); + dispatch(updateRememberedNavs()); return () => { - dispatch(updateRemeberedNavs({ path: pathname })); + dispatch(updateRememberedNavs({ path: pathname })); }; }, [pathname]); diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index e7e08a29..db03b524 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -27,7 +27,7 @@ export default function HomePage() { loginUid, ui: { ready, - remeberedNavs: { chat: chatPath, user: userPath } + rememberedNavs: { chat: chatPath, user: userPath } } } = useAppSelector((store) => { return { diff --git a/src/routes/settingChannel/Overview.tsx b/src/routes/settingChannel/Overview.tsx index 45add62d..b1dc8b28 100644 --- a/src/routes/settingChannel/Overview.tsx +++ b/src/routes/settingChannel/Overview.tsx @@ -138,7 +138,6 @@ export default function Overview({ id = 0 }) { {changed && } - {/* */} ); } diff --git a/src/routes/settingChannel/navs.tsx b/src/routes/settingChannel/navs.tsx index 678442a7..8f193a5d 100644 --- a/src/routes/settingChannel/navs.tsx +++ b/src/routes/settingChannel/navs.tsx @@ -29,26 +29,8 @@ const useNavs = (cid: number): Nav[] => { title: "Members", component: } - // { - // name: "permissions", - // title: "Permissions", - // }, - // { - // name: "invites", - // title: "Invites", - // }, - // { - // name: "integrations", - // title: "Integrations", - // }, ] } - // { - // title: "User Management", - // items: [ - - // ], - // }, ]; }; diff --git a/src/routes/users/index.tsx b/src/routes/users/index.tsx index da42155e..6f2d9d0b 100644 --- a/src/routes/users/index.tsx +++ b/src/routes/users/index.tsx @@ -1,7 +1,7 @@ import { useEffect } from "react"; import { NavLink, useParams, useLocation } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; -import { updateRemeberedNavs } from "../../app/slices/ui"; +import { updateRememberedNavs } from "../../app/slices/ui"; import Search from "../../common/component/Search"; import User from "../../common/component/User"; import Profile from "../../common/component/Profile"; @@ -16,9 +16,9 @@ export default function UsersPage() { const { user_id } = useParams(); const userIds = useSelector((store) => store.users.ids); useEffect(() => { - dispatch(updateRemeberedNavs({ key: "user" })); + dispatch(updateRememberedNavs({ key: "user" })); return () => { - dispatch(updateRemeberedNavs({ key: "user", path: pathname })); + dispatch(updateRememberedNavs({ key: "user", path: pathname })); }; }, [pathname]);