From 3da57c3725d66ed6862e0c70a9b15dc3e49d31b5 Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Wed, 2 Apr 2025 12:08:51 +0100
Subject: [PATCH] fix: pressist search state inbox

---
 frontend/src/components/inbox/index.tsx |  5 +--
 frontend/src/hooks/useSearch.tsx        | 47 +++++++++++++++++++------
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/inbox/index.tsx b/frontend/src/components/inbox/index.tsx
index 6a56e84a..e57e8192 100644
--- a/frontend/src/components/inbox/index.tsx
+++ b/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)}
diff --git a/frontend/src/hooks/useSearch.tsx b/frontend/src/hooks/useSearch.tsx
index 384ac5e9..ac4e2605 100644
--- a/frontend/src/hooks/useSearch.tsx
+++ b/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: {