From 7f9b760b58a876720c4d92050c58529ad6ab4a6d Mon Sep 17 00:00:00 2001
From: haecheonlee <dlgocjs1@gmail.com>
Date: Tue, 16 Apr 2024 02:52:21 -0400
Subject: [PATCH] Refresh search list after modification

---
 .../EditorSidePanel/TablesTab/SearchBar.jsx   | 21 +++++++------------
 .../EditorSidePanel/TablesTab/TablesTab.jsx   |  2 +-
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/EditorSidePanel/TablesTab/SearchBar.jsx b/src/components/EditorSidePanel/TablesTab/SearchBar.jsx
index 4ef926b..49ec8f6 100644
--- a/src/components/EditorSidePanel/TablesTab/SearchBar.jsx
+++ b/src/components/EditorSidePanel/TablesTab/SearchBar.jsx
@@ -1,30 +1,23 @@
-import { useState } from "react";
-import { useSelect, useTables } from "../../../hooks";
+import { useEffect, useMemo, useState } from "react";
+import { useSelect } from "../../../hooks";
 import { AutoComplete } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
 
-export default function SearchBar() {
-  const { tables } = useTables();
+export default function SearchBar({ tables }) {
   const { setSelectedElement } = useSelect();
   const [searchText, setSearchText] = useState("");
-  const [filteredResult, setFilteredResult] = useState(
-    tables.map((t) => t.name)
+  const filteredTable = useMemo(
+    () => tables.map((t) => t.name).filter((i) => i.includes(searchText)),
+    [tables, searchText],
   );
 
-  const handleStringSearch = (value) => {
-    setFilteredResult(
-      tables.map((t) => t.name).filter((i) => i.includes(value))
-    );
-  };
-
   return (
     <AutoComplete
-      data={filteredResult}
+      data={filteredTable}
       value={searchText}
       showClear
       prefix={<IconSearch />}
       placeholder="Search..."
-      onSearch={(v) => handleStringSearch(v)}
       emptyContent={<div className="p-3 popover-theme">No tables found</div>}
       onChange={(v) => setSearchText(v)}
       onSelect={(v) => {
diff --git a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
index aa56c37..97a30c4 100644
--- a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
@@ -13,7 +13,7 @@ export default function TablesTab() {
     <>
       <Row gutter={6}>
         <Col span={16}>
-          <SearchBar />
+          <SearchBar tables={tables} />
         </Col>
         <Col span={8}>
           <Button icon={<IconPlus />} block onClick={() => addTable(true)}>