From bda750bc52027f377a31f5982d56ea1a3ad6ca11 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Sun, 16 Feb 2025 07:59:40 +0100 Subject: [PATCH 1/2] fix(frontend): synchronize selected inbox subscriber with url query --- .../inbox/components/ConversationsList.tsx | 18 ++++++++++++--- frontend/src/pages/inbox/index.tsx | 23 +++++++++++++++++++ .../inbox/subscribers/[subscriber]/index.tsx | 12 ++++++++++ .../src/pages/inbox/subscribers/index.tsx | 12 ++++++++++ 4 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 frontend/src/pages/inbox/index.tsx create mode 100644 frontend/src/pages/inbox/subscribers/[subscriber]/index.tsx create mode 100644 frontend/src/pages/inbox/subscribers/index.tsx diff --git a/frontend/src/components/inbox/components/ConversationsList.tsx b/frontend/src/components/inbox/components/ConversationsList.tsx index 88ef4c5f..c8427f90 100644 --- a/frontend/src/components/inbox/components/ConversationsList.tsx +++ b/frontend/src/components/inbox/components/ConversationsList.tsx @@ -6,7 +6,6 @@ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ - import { Avatar, Conversation, @@ -14,11 +13,13 @@ import { } from "@chatscope/chat-ui-kit-react"; import InboxIcon from "@mui/icons-material/MoveToInbox"; import { Chip, debounce, Grid } from "@mui/material"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; import { useConfig } from "@/hooks/useConfig"; import { useTranslate } from "@/hooks/useTranslate"; import { Title } from "@/layout/content/Title"; -import { EntityType } from "@/services/types"; +import { EntityType, RouterType } from "@/services/types"; import { getAvatarSrc } from "../helpers/mapMessages"; import { useChat } from "../hooks/ChatContext"; @@ -30,6 +31,8 @@ export const SubscribersList = (props: { searchPayload: any; assignedTo: AssignedTo; }) => { + const { query, push } = useRouter(); + const subscriber = query.subscriber?.toString(); const { apiUrl } = useConfig(); const { t, i18n } = useTranslate(); const chat = useChat(); @@ -39,6 +42,12 @@ export const SubscribersList = (props: { !isFetching && hasNextPage && fetchNextPage(); }, 400); + useEffect(() => { + if (chat && subscriber) { + chat.setSubscriberId(subscriber); + } + }, [chat, subscriber]); + return ( <> @@ -53,7 +62,10 @@ export const SubscribersList = (props: { > {subscribers.map((subscriber) => ( chat.setSubscriberId(subscriber.id)} + onClick={() => { + chat.setSubscriberId(subscriber.id); + push(`/${RouterType.INBOX}/subscribers/${subscriber.id}`); + }} className="changeColor" key={subscriber.id} active={chat.subscriber?.id === subscriber.id} diff --git a/frontend/src/pages/inbox/index.tsx b/frontend/src/pages/inbox/index.tsx new file mode 100644 index 00000000..22a6c3c2 --- /dev/null +++ b/frontend/src/pages/inbox/index.tsx @@ -0,0 +1,23 @@ +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + + +import { ReactElement } from "react"; + +import { Inbox } from "@/components/inbox"; +import { Layout } from "@/layout"; + +const InboxPage = () => { + return ; +}; + +InboxPage.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +export default InboxPage; diff --git a/frontend/src/pages/inbox/subscribers/[subscriber]/index.tsx b/frontend/src/pages/inbox/subscribers/[subscriber]/index.tsx new file mode 100644 index 00000000..9ff4acb0 --- /dev/null +++ b/frontend/src/pages/inbox/subscribers/[subscriber]/index.tsx @@ -0,0 +1,12 @@ +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + + +import InboxPage from "../.."; + +export default InboxPage; diff --git a/frontend/src/pages/inbox/subscribers/index.tsx b/frontend/src/pages/inbox/subscribers/index.tsx new file mode 100644 index 00000000..9ff4acb0 --- /dev/null +++ b/frontend/src/pages/inbox/subscribers/index.tsx @@ -0,0 +1,12 @@ +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + + +import InboxPage from "../.."; + +export default InboxPage; From 36994c205ca08186c0d2e74d36b37a2aadedca6d Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Sun, 16 Feb 2025 08:12:42 +0100 Subject: [PATCH 2/2] fix(frontend): support navigation without subscriber query --- .../src/components/inbox/components/ConversationsList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/inbox/components/ConversationsList.tsx b/frontend/src/components/inbox/components/ConversationsList.tsx index c8427f90..66409f85 100644 --- a/frontend/src/components/inbox/components/ConversationsList.tsx +++ b/frontend/src/components/inbox/components/ConversationsList.tsx @@ -32,7 +32,7 @@ export const SubscribersList = (props: { assignedTo: AssignedTo; }) => { const { query, push } = useRouter(); - const subscriber = query.subscriber?.toString(); + const subscriber = query.subscriber?.toString() || null; const { apiUrl } = useConfig(); const { t, i18n } = useTranslate(); const chat = useChat(); @@ -43,7 +43,7 @@ export const SubscribersList = (props: { }, 400); useEffect(() => { - if (chat && subscriber) { + if (chat) { chat.setSubscriberId(subscriber); } }, [chat, subscriber]);