aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
Diffstat (limited to 'pages')
-rw-r--r--pages/search.tsx52
1 files changed, 39 insertions, 13 deletions
diff --git a/pages/search.tsx b/pages/search.tsx
index 8053d4a..af9bfeb 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,21 +1,20 @@
import { useState, useEffect } from 'react';
+import Fuse from 'fuse.js';
import Navbar from '../components/navbar';
-import { FormEvent } from 'react';
-import { ArticleMeta } from './post/[id]';
import Tags from '../components/tag'
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
-function SearchBar(props: {
- searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
-}) {
+function SearchBar(props: { searchFunction: () => void }) {
return <div className="searchBar">
- <form onSubmit={props.searchFunction}>
- <input className="input" placeholder="Search for posts..." autoComplete="off"/>
- <button className="button" onClick={() => props.searchFunction()}><SearchOutlinedIcon/></button>
- <input type="submit" style={{ display: "none" }}/>
- </form>
+ <input
+ className="input"
+ id="searchInput"
+ placeholder="Search for posts..."
+ onChange={() => props.searchFunction()}
+ autoComplete="off"/>
+ <button className="button" onClick={() => props.searchFunction()}><SearchOutlinedIcon/></button>
</div>
}
@@ -54,12 +53,39 @@ function Posts(props: { posts: Array<Post> }) {
export default function SearchPage() {
var [posts, setPosts] = useState<PostsInfo>({ posts: [], valid_tags: [] });
+ var [query, setQuery] = useState("");
+ var [visiblePosts, setVisiblePosts] = useState<Array<Post>>([]);
+
+ var fuse = new Fuse(posts.posts, {
+ keys: [
+ "title",
+ "subtitle",
+ "author",
+ "date",
+ "urlname",
+ "tags"
+ ],
+ isCaseSensitive: false
+ })
useEffect(() => {(async () => {
+ var query = new URLSearchParams(window.location.search).get("q") || "";
+ if(query)
+ (document.getElementById("searchInput") as HTMLInputElement).value = query;
+ setQuery(query);
+
var posts = await fetch("/posts.json");
setPosts(await posts.json());
})()}, []);
+ useEffect(() => {
+ if(query.length == 0) {
+ setVisiblePosts(posts.posts)
+ } else {
+ setVisiblePosts(fuse.search(query).map(res => res.item))
+ }
+ }, [query]);
+
return <div>
<div className="centeredPage">
<div className="titleWrapper">
@@ -71,10 +97,10 @@ export default function SearchPage() {
</div>
</div>
<div className="contentWrapper">
- <SearchBar searchFunction={(event?: FormEvent<HTMLFormElement>) => {
- event?.preventDefault();
+ <SearchBar searchFunction={() => {
+ setTimeout(() => setQuery((document.getElementById("searchInput") as HTMLInputElement).value));
}}/>
- <Posts posts={posts.posts}/>
+ <Posts posts={visiblePosts}/>
</div>
</div>
</div>