aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-20 22:07:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add shortcut filter

Browse Source
This commit is contained in:
Steven 2023-06-28 22:39:18 +08:00
parent bcb71f6631
commit d7c7de24c1
1 changed files with 16 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/pages/Home.tsx
View File

@ -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>