Merge pull request #873 from Hexastack/fix/pressist-search-state-inbox

fix: pressist search state inbox

frontend/src/components/inbox/components/ConversationsList.tsx

@@ -20,6 +20,7 @@ import { useConfig } from "@/hooks/useConfig";
 import { useTranslate } from "@/hooks/useTranslate";
 import { Title } from "@/layout/content/Title";
 import { EntityType, RouterType } from "@/services/types";
+import { extractQueryParamsUrl } from "@/utils/URL";
 
 import { getAvatarSrc } from "../helpers/mapMessages";
 import { useChat } from "../hooks/ChatContext";
@@ -64,7 +65,10 @@ export const SubscribersList = (props: {
             <Conversation
               onClick={() => {
                 chat.setSubscriberId(subscriber.id);
-                push(`/${RouterType.INBOX}/subscribers/${subscriber.id}`);
+                push({
+                  pathname: `/${RouterType.INBOX}/subscribers/${subscriber.id}`,
+                  query: extractQueryParamsUrl(window.location.href),
+                });
               }}
               className="changeColor"
               key={subscriber.id}

frontend/src/components/inbox/index.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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.
@@ -26,7 +26,7 @@ import { AssignedTo } from "./types";
 
 export const Inbox = () => {
   const { t } = useTranslate();
-  const { onSearch, searchPayload } = useSearch<ISubscriber>({
+  const { onSearch, searchPayload, searchText } = useSearch<ISubscriber>({
     $or: ["first_name", "last_name"],
   });
   const [channels, setChannels] = useState<string[]>([]);
@@ -48,6 +48,7 @@ export const Inbox = () => {
             <Sidebar position="left">
               <Grid paddingX={1} paddingTop={1}>
                 <Search
+                  value={searchText}
                   onClearClick={() => onSearch("")}
                   className="changeColor"
                   onChange={(v) => onSearch(v)}

frontend/src/hooks/useSearch.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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.
@@ -7,12 +7,13 @@
  */
 
 import { debounce } from "@mui/material";
-import { ChangeEvent, useState } from "react";
+import { useRouter } from "next/router";
+import { ChangeEvent, useCallback, useEffect, useState } from "react";
 
 import {
-  TParamItem,
-  TBuildParamProps,
   TBuildInitialParamProps,
+  TBuildParamProps,
+  TParamItem,
 } from "@/types/search.types";
 
 const buildOrParams = <T,>({ params, searchText }: TBuildParamProps<T>) => ({
@@ -52,13 +53,38 @@ const buildNeqInitialParams = <T,>({
   );
 
 export const useSearch = <T,>(params: TParamItem<T>) => {
-  const [searchText, setSearchText] = useState<string>("");
-  const onSearch = debounce(
-    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string) => {
-      setSearchText(typeof e === "string" ? e : e.target.value);
-    },
-    300,
+  const router = useRouter();
+  const [searchText, setSearchText] = useState<string>(
+    (router.query.search as string) || "",
   );
+
+  useEffect(() => {
+    if (router.query.search !== searchText) {
+      setSearchText((router.query.search as string) || "");
+    }
+  }, [router.query.search]);
+
+  const updateQueryParams = useCallback(
+    debounce(async (newSearchText: string) => {
+      await router.replace(
+        {
+          pathname: router.pathname,
+          query: { ...router.query, search: newSearchText || undefined },
+        },
+        undefined,
+        { shallow: true },
+      );
+    }, 300),
+    [router],
+  );
+  const onSearch = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string,
+  ) => {
+    const newSearchText = typeof e === "string" ? e : e.target.value;
+
+    setSearchText(newSearchText);
+    updateQueryParams(newSearchText);
+  };
   const {
     $eq: eqInitialParams,
     $iLike: iLikeParams,
@@ -67,6 +93,7 @@ export const useSearch = <T,>(params: TParamItem<T>) => {
   } = params;
 
   return {
+    searchText,
     onSearch,
     searchPayload: {
       where: {

frontend/src/utils/URL.ts

@@ -6,6 +6,8 @@
  * 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 qs from "qs";
+
 export const buildURL = (baseUrl: string, relativePath: string): string => {
   try {
     return new URL(relativePath).toString();
@@ -37,3 +39,12 @@ export const isAbsoluteUrl = (value: string = ""): boolean => {
     return false;
   }
 };
+
+// todo: in the future we might need to extract this logic into a hook
+export const extractQueryParamsUrl = (fullUrl: string): string => {
+  const extractedQueryParams = qs.parse(new URL(fullUrl).search, {
+    ignoreQueryPrefix: true,
+  });
+
+  return qs.stringify(extractedQueryParams);
+};