From d2d813c04ce37cdb4a283dcd60b7986882970be5 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 1 Apr 2021 14:18:51 +0200
Subject: simple fuzzy search working

---
 components/tag.tsx |  2 +-
 package.json       |  1 +
 pages/search.tsx   | 52 +++++++++++++++++++++++++++++++++++++++-------------
 yarn.lock          |  5 +++++
 4 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/components/tag.tsx b/components/tag.tsx
index 48c75ce..477b8e2 100644
--- a/components/tag.tsx
+++ b/components/tag.tsx
@@ -5,7 +5,7 @@ export default function Tags(props: {
 }) {
 	return <div className="tags">
 		<span>Tags:</span>
-		{props.tags.map(tag => <Tag name={tag}/>)}
+		{props.tags.map(tag => <Tag key={Math.random().toString()} name={tag}/>)}
 	</div>
 }
 
diff --git a/package.json b/package.json
index 2671cdc..636b466 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "fuse.js": "^6.4.6",
     "next": "10.0.9",
     "react": "17.0.2",
     "react-dom": "17.0.2",
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>
diff --git a/yarn.lock b/yarn.lock
index ce40569..6579763 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -834,6 +834,11 @@ fsevents@~2.3.1:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
+fuse.js@^6.4.6:
+  version "6.4.6"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.4.6.tgz#62f216c110e5aa22486aff20be7896d19a059b79"
+  integrity sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw==
+
 get-orientation@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/get-orientation/-/get-orientation-1.1.2.tgz#20507928951814f8a91ded0a0e67b29dfab98947"
-- 
cgit v1.2.3