generated from profydev/prolog-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
filter.tsx
86 lines (81 loc) · 2.38 KB
/
filter.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { Level, Status } from "@api/issues.types";
import { useFilter } from "../context/filter-context";
import { useEffect, useState } from "react";
import styles from "./filter.module.scss";
import { Select } from "@features/ui";
import { Input } from "@features/ui";
interface FilterProps {
navigateToPage: (
newPage: number,
status: Status | null,
Level: Level | null,
projectName: string | null,
) => void;
}
const StatusOptions = [
{ name: "Unresolved", value: "open" },
{ name: "Resolved", value: "resolved" },
];
const LevelOptions = [
{ name: "Error", value: "error" },
{ name: "Warning", value: "warning" },
{ name: "Info", value: "info" },
];
export function Filter({ navigateToPage }: FilterProps) {
const { setStatus, setLevel, setProjectName, status, level, projectName } =
useFilter();
const [name, setName] = useState(projectName);
useEffect(() => {
setName(projectName);
}, [projectName]);
return (
<form
className={styles.filter}
onSubmit={(e) => {
e.preventDefault();
if (name === projectName) return;
if (setStatus && setLevel && setProjectName) {
setStatus(status);
setLevel(level);
setProjectName(projectName);
}
navigateToPage(1, status, level, name);
}}
>
<div className={styles.filterSelect}>
<Select
options={StatusOptions}
action={(option) => {
navigateToPage(1, option as Status, level, projectName);
}}
ariaText="Filter status by 'unresolved' or 'resolved'"
groupName="issueStatusFilter"
placeholder="State"
hasEmpty={true}
value={status}
/>
</div>
<div className={styles.filterSelect}>
<Select
options={LevelOptions}
action={(option) => {
navigateToPage(1, status, option as Level, projectName);
}}
ariaText="Filter status by 'error', 'warning', or 'info'"
groupName="issueLevelFilter"
placeholder="Level"
hasEmpty={true}
value={level}
></Select>
</div>
<Input
maxLength={25}
onChange={(e) => setName(e.target.value)}
value={name || ""}
data-cy="issueProjectNameFilter"
placeholder="Project Name"
ariaText="Filter by project name"
/>
</form>
);
}