From e6753a4d0570b231f23f6ac8d9d9031d2c6f751c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 13 Jun 2024 16:39:59 +0530
Subject: [PATCH] chore: update page search input

---
 web/core/components/pages/header/root.tsx     |  5 +++-
 .../components/pages/list/search-input.tsx    | 25 ++++++++++---------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/web/core/components/pages/header/root.tsx b/web/core/components/pages/header/root.tsx
index ec7aaddf1..9bedbb941 100644
--- a/web/core/components/pages/header/root.tsx
+++ b/web/core/components/pages/header/root.tsx
@@ -52,7 +52,10 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
       <div className="flex-shrink-0 h-[50px] w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
         <PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
         <div className="h-full flex items-center gap-2 self-end">
-          <PageSearchInput />
+          <PageSearchInput
+            searchQuery={filters.searchQuery}
+            updateSearchQuery={(val) => updateFilters("searchQuery", val)}
+          />
           <PageOrderByDropdown
             sortBy={filters.sortBy}
             sortKey={filters.sortKey}
diff --git a/web/core/components/pages/list/search-input.tsx b/web/core/components/pages/list/search-input.tsx
index 957c08183..1f79e818f 100644
--- a/web/core/components/pages/list/search-input.tsx
+++ b/web/core/components/pages/list/search-input.tsx
@@ -1,16 +1,17 @@
 import { FC, useState, useRef } from "react";
-import { observer } from "mobx-react-lite";
 import { Search, X } from "lucide-react";
+// helpers
 import { cn } from "@/helpers/common.helper";
-import { useProjectPages } from "@/hooks/store";
+// hooks
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
-export const PageSearchInput: FC = observer(() => {
-  // hooks
-  const {
-    filters: { searchQuery },
-    updateFilters,
-  } = useProjectPages();
+type Props = {
+  searchQuery: string;
+  updateSearchQuery: (val: string) => void;
+};
+
+export const PageSearchInput: FC<Props> = (props) => {
+  const { searchQuery, updateSearchQuery } = props;
   // states
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // refs
@@ -22,7 +23,7 @@ export const PageSearchInput: FC = observer(() => {
 
   const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Escape") {
-      if (searchQuery && searchQuery.trim() !== "") updateFilters("searchQuery", "");
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
       else {
         setIsSearchOpen(false);
         inputRef.current?.blur();
@@ -59,7 +60,7 @@ export const PageSearchInput: FC = observer(() => {
           className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
           placeholder="Search pages"
           value={searchQuery}
-          onChange={(e) => updateFilters("searchQuery", e.target.value)}
+          onChange={(e) => updateSearchQuery(e.target.value)}
           onKeyDown={handleInputKeyDown}
         />
         {isSearchOpen && (
@@ -67,7 +68,7 @@ export const PageSearchInput: FC = observer(() => {
             type="button"
             className="grid place-items-center"
             onClick={() => {
-              updateFilters("searchQuery", "");
+              updateSearchQuery("");
               setIsSearchOpen(false);
             }}
           >
@@ -77,4 +78,4 @@ export const PageSearchInput: FC = observer(() => {
       </div>
     </>
   );
-});
+};