From d7c7de24c1f9f30d480f508da9371e0b0abdf6bc Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 28 Jun 2023 22:39:18 +0800
Subject: [PATCH] feat: add shortcut filter

---
 web/src/pages/Home.tsx | 40 ++++++++++++++++------------------------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 3b0534b..fbe4004 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,10 +1,9 @@
-import { Button } from "@mui/joy";
+import { Button, Option, Select } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
-import Dropdown from "../components/common/Dropdown";
 import ShortcutListView from "../components/ShortcutListView";
 import CreateShortcutDialog from "../components/CreateShortcutDialog";
 
@@ -15,9 +14,12 @@ interface State {
 const Home: React.FC = () => {
   const loadingState = useLoading();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
+  const user = useAppSelector((state) => state.user).user as User;
   const [state, setState] = useState<State>({
     showCreateShortcutDialog: false,
   });
+  const [selectedFilter, setSelectFilter] = useState<"ALL" | "PRIVATE">("ALL");
+  const filteredShortcutList = selectedFilter === "ALL" ? shortcutList : shortcutList.filter((shortcut) => shortcut.creatorId === user.id);
 
   useEffect(() => {
     Promise.all([shortcutService.getMyAllShortcuts()]).finally(() => {
@@ -36,27 +38,17 @@ const Home: React.FC = () => {
     <>
       <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-between items-center mb-4">
-          <span className="font-mono text-gray-400">Shortcuts</span>
+          <div className="flex flex-row justify-start items-center">
+            <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
+            <Button variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
+              <Icon.Plus className="w-5 h-auto" /> New
+            </Button>
+          </div>
           <div>
-            <Dropdown
-              trigger={
-                <button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow">
-                  <Icon.Plus className="w-4 h-auto mr-1" /> Add new...
-                </button>
-              }
-              actions={
-                <>
-                  <button
-                    className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
-                    onClick={() => setShowCreateShortcutDialog(true)}
-                  >
-                    <Icon.Link className="w-4 h-auto text-gray-500 mr-1" />
-                    Shortcut
-                  </button>
-                </>
-              }
-              actionsClassName="!w-32"
-            />
+            <Select defaultValue={"ALL"} onChange={(_, value) => setSelectFilter(value as any)}>
+              <Option value={"ALL"}>All</Option>
+              <Option value={"PRIVATE"}>Mine</Option>
+            </Select>
           </div>
         </div>
         {loadingState.isLoading ? (
@@ -64,7 +56,7 @@ const Home: React.FC = () => {
             <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
             loading
           </div>
-        ) : shortcutList.length === 0 ? (
+        ) : filteredShortcutList.length === 0 ? (
           <div className="py-4 w-full flex flex-col justify-center items-center">
             <Icon.PackageOpen className="w-12 h-auto text-gray-400" />
             <p className="mt-4 mb-2">No shortcuts found.</p>
@@ -73,7 +65,7 @@ const Home: React.FC = () => {
             </Button>
           </div>
         ) : (
-          <ShortcutListView shortcutList={shortcutList} />
+          <ShortcutListView shortcutList={filteredShortcutList} />
         )}
       </div>