From 11205566ac88b13ffdf48fb18164834cfe2f9fcb Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 23 Jul 2023 01:54:14 +0800
Subject: [PATCH] feat: add search input

---
 web/src/pages/Home.tsx    | 16 ++++++++++++++--
 web/src/stores/v1/view.ts | 13 ++++++++++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index dd2c0e0..38a467b 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,4 +1,4 @@
-import { Button, Tab, TabList, Tabs } from "@mui/joy";
+import { Button, Input, Tab, TabList, Tabs } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
@@ -43,8 +43,20 @@ const Home: React.FC = () => {
   return (
     <>
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-start items-center mb-4">
+        <div className="w-full flex flex-row justify-between items-center mb-4">
           <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
+          <Input
+            className="w-32"
+            type="text"
+            size="sm"
+            placeholder="Search"
+            startDecorator={<Icon.Search className="w-4 h-auto" />}
+            endDecorator={
+              filter.search !== "" && <Icon.X className="w-4 h-auto cursor-pointer" onClick={() => viewStore.setFilter({ search: "" })} />
+            }
+            value={filter.search}
+            onChange={(e) => viewStore.setFilter({ search: e.target.value })}
+          />
         </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
diff --git a/web/src/stores/v1/view.ts b/web/src/stores/v1/view.ts
index e48a2db..9a97319 100644
--- a/web/src/stores/v1/view.ts
+++ b/web/src/stores/v1/view.ts
@@ -5,6 +5,7 @@ export interface Filter {
   tag?: string;
   mineOnly?: boolean;
   visibility?: Visibility;
+  search?: string;
 }
 
 export interface Order {
@@ -48,7 +49,7 @@ const useViewStore = create<ViewState>()(
 );
 
 export const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter, currentUser: User) => {
-  const { tag, mineOnly, visibility } = filter;
+  const { tag, mineOnly, visibility, search } = filter;
   const filteredShortcutList = shortcutList.filter((shortcut) => {
     if (tag) {
       if (!shortcut.tags.includes(tag)) {
@@ -65,6 +66,16 @@ export const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter
         return false;
       }
     }
+    if (search) {
+      if (
+        !shortcut.name.toLowerCase().includes(search.toLowerCase()) &&
+        !shortcut.description.toLowerCase().includes(search.toLowerCase()) &&
+        !shortcut.tags.some((tag) => tag.toLowerCase().includes(search.toLowerCase())) &&
+        !shortcut.link.toLowerCase().includes(search.toLowerCase())
+      ) {
+        return false;
+      }
+    }
     return true;
   });
   return filteredShortcutList;