use window.history.pushState

apps/app/src/components/SearchPage.tsx

@@ -99,6 +99,8 @@ export const SearchPage = (): JSX.Element => {
   const initQ = (Array.isArray(queries) ? queries.join(' ') : queries) ?? '';
 
   const [keyword, setKeyword] = useState<string>(initQ);
+  type changeStyle = 'search' | 'browser';
+  const [changeState, setChangeState] = useState<changeStyle>('search');
   const [offset, setOffset] = useState<number>(0);
   const [limit, setLimit] = useState<number>(showPageLimitationL ?? INITIAL_PAGIONG_SIZE);
   const [configurationsByControl, setConfigurationsByControl] = useState<Partial<ISearchConfigurations>>({});
@@ -165,10 +167,10 @@ export const SearchPage = (): JSX.Element => {
 
   const initialSearchConditions: Partial<ISearchConditions> = useMemo(() => {
     return {
-      keyword: initQ,
+      keyword,
       limit: INITIAL_PAGIONG_SIZE,
     };
-  }, [initQ]);
+  }, [keyword]);
 
   // for bulk deletion
   const deleteAllButtonClickedHandler = usePageDeleteModalForBulkDeletion(data, searchPageBaseRef, () => mutate());
@@ -177,8 +179,33 @@ export const SearchPage = (): JSX.Element => {
   useEffect(() => {
     const newUrl = new URL('/_search', 'http://example.com');
     newUrl.searchParams.append('q', keyword);
-    window.history.pushState('', `Search - ${keyword}`, `${newUrl.pathname}${newUrl.search}`);
-  }, [keyword]);
+    switch (changeState) {
+      case 'search': {
+        window.history.pushState(keyword, `Search - ${keyword}`, `${newUrl.pathname}${newUrl.search}`);
+        break;
+      }
+      case 'browser': {
+        break;
+      }
+      default: break;
+    }
+    setChangeState('search');
+  }, [keyword, setChangeState]);
+
+  // browser back and forward
+  useEffect(() => {
+    const browserButton = (k) => {
+      setChangeState('browser');
+      if (typeof k.state === 'string') {
+        setKeyword(k.state);
+      }
+    };
+    window.addEventListener('popstate', browserButton);
+    return () => {
+      window.removeEventListener('popstate', browserButton);
+    };
+  }, [setChangeState, setKeyword]);
+
   const hitsCount = data?.meta.hitsCount;
 
   const allControl = useMemo(() => {