diff options
author | lonkaars <l.leblansch@gmail.com> | 2021-04-12 10:25:43 +0200 |
---|---|---|
committer | lonkaars <l.leblansch@gmail.com> | 2021-04-12 10:25:43 +0200 |
commit | 822d1ee1be99b7d96740585ddd1174b94916335d (patch) | |
tree | 7005e359d7f62dede5f3eabe02becec37d8bfe57 /pages/search.tsx | |
parent | 7f7e14bd9dce02e6ced663fd527a5750cd13f920 (diff) |
dprint formatter :tada:
Diffstat (limited to 'pages/search.tsx')
-rw-r--r-- | pages/search.tsx | 165 |
1 files changed, 86 insertions, 79 deletions
diff --git a/pages/search.tsx b/pages/search.tsx index c9b27a5..8eff8d8 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,65 +1,69 @@ -import { useState, useEffect } from 'react'; import Fuse from 'fuse.js'; +import { useEffect, useState } from 'react'; import Navbar from '../components/navbar'; -import Tags from '../components/tag' +import Tags from '../components/tag'; import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined'; -function SearchBar(props: { searchFunction: () => void }) { - return <div className="searchBar"> +function SearchBar(props: { searchFunction: () => void; }) { + return <div className='searchBar'> <input - className="input" - id="searchInput" - placeholder="Search for posts..." - onChange={() => props.searchFunction()} - spellCheck="false" - autoComplete="off"/> - <button className="button" onClick={() => props.searchFunction()}><SearchOutlinedIcon/></button> - </div> + className='input' + id='searchInput' + placeholder='Search for posts...' + onChange={() => props.searchFunction()} + spellCheck='false' + autoComplete='off' + /> + <button className='button' onClick={() => props.searchFunction()}> + <SearchOutlinedIcon /> + </button> + </div>; } interface Post { - title: string - subtitle: string - author: string - date: string - urlname: string - tags: Array<string> + title: string; + subtitle: string; + author: string; + date: string; + urlname: string; + tags: Array<string>; } interface PostsInfo { - valid_tags: Array<string> - posts: Array<Post> + valid_tags: Array<string>; + posts: Array<Post>; } -function Post(props: { post: Post }) { - return <a className="post" href={"/post/" + props.post.urlname}> - <b className="title">{props.post.title}</b> - {props.post.subtitle && <p className="subtitle">{props.post.subtitle}</p>} - <p className="authordate">Written by {props.post.author} on {new Date(props.post.date).toLocaleString("en-us", { - month: "long", day: "numeric" - })}</p> - <Tags tags={props.post.tags}/> +function Post(props: { post: Post; }) { + return <a className='post' href={'/post/' + props.post.urlname}> + <b className='title'>{props.post.title}</b> + {props.post.subtitle && <p className='subtitle'>{props.post.subtitle}</p>} + <p className='authordate'> + Written by {props.post.author} on {new Date(props.post.date).toLocaleString('en-us', { + month: 'long', + day: 'numeric', + })} + </p> + <Tags tags={props.post.tags} /> </a>; } -function Posts(props: { posts: Array<Post> }) { - return <div className="searchResults"> - { - props.posts.map(post => <Post post={post} key={Math.random().toString()}/>) - } +function Posts(props: { posts: Array<Post>; }) { + return <div className='searchResults'> + {props.posts.map(post => <Post post={post} key={Math.random().toString()} />)} </div>; } function searchFilter(query: string, tags: Array<string>) { var output = { - query: "", - tags: [] - } + query: '', + tags: [], + }; // remove string literals from tag matching - var queryWithoutLiterals = query.replace(/\".+?\"/g, ""); + var queryWithoutLiterals = query.replace(/\".+?\"/g, ''); // find tags and remove them from the query tags.forEach(tag => { @@ -67,55 +71,56 @@ function searchFilter(query: string, tags: Array<string>) { if (index == -1) return; // remove tag from query - queryWithoutLiterals = - queryWithoutLiterals.substr(0, index) + - queryWithoutLiterals.substr(index + tag.length); + queryWithoutLiterals = queryWithoutLiterals.substr(0, index) + + queryWithoutLiterals.substr(index + tag.length); output.tags.push(tag); }); // add back in the string literals (janky just gets pasted on end) - output.query = - queryWithoutLiterals + " " + - (query.match(/\".+?\"/g) + output.query = queryWithoutLiterals + ' ' + + (query.match(/\".+?\"/g) ?.map(r => r.substr(1, r.length - 2)) - .join(" ") || ""); + .join(' ') || ''); return output; } export default function SearchPage() { var [posts, setPosts] = useState<PostsInfo>({ posts: [], valid_tags: [] }); - var [query, setQuery] = useState("-"); + var [query, setQuery] = useState('-'); var [visiblePosts, setVisiblePosts] = useState<Array<Post>>([]); var fuse = new Fuse(posts.posts, { keys: [ - "title", - "subtitle", - "author", - "date", - "urlname", - "tags" + 'title', + 'subtitle', + 'author', + 'date', + 'urlname', + 'tags', ], - isCaseSensitive: false - }) + isCaseSensitive: false, + }); - useEffect(() => {(async () => { - var query = new URLSearchParams(window.location.search).get("q") || ""; - if(query) - (document.getElementById("searchInput") as HTMLInputElement).value = query; + useEffect(() => { + (async () => { + var query = new URLSearchParams(window.location.search).get('q') || ''; + if (query) { + (document.getElementById('searchInput') as HTMLInputElement).value = query; + } - var posts = await fetch("/posts.json"); - var postsJson: PostsInfo = await posts.json(); - postsJson.posts = postsJson.posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) - setPosts(postsJson); - setQuery(query); - })()}, []); + var posts = await fetch('/posts.json'); + var postsJson: PostsInfo = await posts.json(); + postsJson.posts = postsJson.posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); + setPosts(postsJson); + setQuery(query); + })(); + }, []); useEffect(() => { var search = searchFilter(query, posts.valid_tags); - if(search.query.length == 0) { + if (search.query.length == 0) { var results = posts.posts; } else { var fuseSearch = fuse.search(search.query); @@ -123,32 +128,34 @@ export default function SearchPage() { } results = results.filter(result => { - for(var i in search.tags) { - if (!result.tags.includes(search.tags[i])) + for (var i in search.tags) { + if (!result.tags.includes(search.tags[i])) { return false; + } } return true; }); - setVisiblePosts(results) + setVisiblePosts(results); }, [query]); return <div> - <div className="centeredPage"> - <div className="titleWrapper"> + <div className='centeredPage'> + <div className='titleWrapper'> <h1>Search for posts</h1> </div> - <div className="navAreaWrapper"> - <div className="sticky"> - <Navbar page="search"/> + <div className='navAreaWrapper'> + <div className='sticky'> + <Navbar page='search' /> </div> </div> - <div className="contentWrapper"> - <SearchBar searchFunction={() => { - setTimeout(() => setQuery((document.getElementById("searchInput") as HTMLInputElement).value)); - }}/> - <Posts posts={visiblePosts}/> + <div className='contentWrapper'> + <SearchBar + searchFunction={() => { + setTimeout(() => setQuery((document.getElementById('searchInput') as HTMLInputElement).value)); + }} + /> + <Posts posts={visiblePosts} /> </div> </div> - </div> + </div>; } - |