-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
55 lines (49 loc) · 1.43 KB
/
index.js
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
import React, { useState, useEffect, useContext } from "react";
import { Link, useRoute } from "wouter";
import c from "classnames";
import { appContext } from "../App";
import Website from "../Website";
import api from "../../api.js";
import style from "./style.module.css";
export default () => {
const [match, params] = useRoute("/websites/:id");
const [websites, update] = useState([]);
const [query, setQuery] = useState("");
const { period } = useContext(appContext);
useEffect(() => {
api.websites(...period).then(update);
}, []);
const onKeyDown = e => {
if (e.code === "Escape") {
setQuery("");
}
};
return (
<div className={style.menu}>
<header className={style.search}>
<input
type="search"
value={query}
placeholder="Search…"
onChange={e => setQuery(e.target.value)}
onKeyDown={e => onKeyDown(e)}
aria-label="Search Websites"
/>
</header>
{websites
.filter(website => website.url.indexOf(query.toLowerCase()) > -1)
.map(website => (
<Link key={website.id} href={`/websites/${website.id}`}>
<a
href="/"
className={c(style.row, {
[style.selected]: match && params.id === String(website.id)
})}
>
<Website website={website} />
</a>
</Link>
))}
</div>
);
};