aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 21:19:44 +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 { useEffect, useState } from "react";
import { shortcutService } from "../services"; import { shortcutService } from "../services";
import { useAppSelector } from "../stores"; import { useAppSelector } from "../stores";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
import Icon from "../components/Icon"; import Icon from "../components/Icon";
import Dropdown from "../components/common/Dropdown";
import ShortcutListView from "../components/ShortcutListView"; import ShortcutListView from "../components/ShortcutListView";
import CreateShortcutDialog from "../components/CreateShortcutDialog"; import CreateShortcutDialog from "../components/CreateShortcutDialog";
@ -15,9 +14,12 @@ interface State {
const Home: React.FC = () => { const Home: React.FC = () => {
const loadingState = useLoading(); const loadingState = useLoading();
const { shortcutList } = useAppSelector((state) => state.shortcut); const { shortcutList } = useAppSelector((state) => state.shortcut);
const user = useAppSelector((state) => state.user).user as User;
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
showCreateShortcutDialog: false, showCreateShortcutDialog: false,
}); });
const [selectedFilter, setSelectFilter] = useState<"ALL" | "PRIVATE">("ALL");
const filteredShortcutList = selectedFilter === "ALL" ? shortcutList : shortcutList.filter((shortcut) => shortcut.creatorId === user.id);
useEffect(() => { useEffect(() => {
Promise.all([shortcutService.getMyAllShortcuts()]).finally(() => { 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="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"> <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> <div>
<Dropdown <Select defaultValue={"ALL"} onChange={(_, value) => setSelectFilter(value as any)}>
trigger={ <Option value={"ALL"}>All</Option>
<button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"> <Option value={"PRIVATE"}>Mine</Option>
<Icon.Plus className="w-4 h-auto mr-1" /> Add new... </Select>
</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"
/>
</div> </div>
</div> </div>
{loadingState.isLoading ? ( {loadingState.isLoading ? (
@ -64,7 +56,7 @@ const Home: React.FC = () => {
<Icon.Loader className="mr-2 w-5 h-auto animate-spin" /> <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
loading loading
</div> </div>
) : shortcutList.length === 0 ? ( ) : filteredShortcutList.length === 0 ? (
<div className="py-4 w-full flex flex-col justify-center items-center"> <div className="py-4 w-full flex flex-col justify-center items-center">
<Icon.PackageOpen className="w-12 h-auto text-gray-400" /> <Icon.PackageOpen className="w-12 h-auto text-gray-400" />
<p className="mt-4 mb-2">No shortcuts found.</p> <p className="mt-4 mb-2">No shortcuts found.</p>
@ -73,7 +65,7 @@ const Home: React.FC = () => {
</Button> </Button>
</div> </div>
) : ( ) : (
<ShortcutListView shortcutList={shortcutList} /> <ShortcutListView shortcutList={filteredShortcutList} />
)} )}
</div> </div>