From e80405b89751da384a482c93bff331d678d38c80 Mon Sep 17 00:00:00 2001
From: tiendn <15717476+tiendn@users.noreply.github.com>
Date: Tue, 16 Jul 2024 12:13:34 +0700
Subject: [PATCH] fix: clear search state when route to Homepage with asPath =
 /

---
 src/features/messages/MessageSearch.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/features/messages/MessageSearch.tsx b/src/features/messages/MessageSearch.tsx
index b898b18..40f696c 100644
--- a/src/features/messages/MessageSearch.tsx
+++ b/src/features/messages/MessageSearch.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 
 import { Fade } from '../../components/animations/Fade';
 import { Card } from '../../components/layout/Card';
@@ -38,6 +39,9 @@ export function MessageSearch() {
   const [startTimeFilter, setStartTimeFilter] = useState<number | null>(null);
   const [endTimeFilter, setEndTimeFilter] = useState<number | null>(null);
 
+  // Router
+  const router = useRouter();
+
   // GraphQL query and results
   const { isValidInput, isError, isFetching, hasRun, messageList, isMessagesFound } =
     useMessageSearchQuery(
@@ -72,6 +76,11 @@ export function MessageSearch() {
   // Keep url in sync
   useSyncQueryParam(QUERY_SEARCH_PARAM, isValidInput ? sanitizedInput : '');
 
+  // Reset query input when Router to homepage (no params)
+  useEffect(() => {
+    if (router.asPath === '/') setSearchInput('');
+  }, [router.asPath]);
+
   return (
     <>
       <SearchBar