LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 12:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: WIP search working

Browse Source
This commit is contained in:
Corbin Crutchley
2022-09-25 05:51:52 -07:00
parent ec63266f10
commit 4256a2a474
2 changed files with 42 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
api/search.ts
View File

@@ -19,5 +19,10 @@ const fuse = new Fuse(
); );
export default async (req: VercelRequest, res: VercelResponse) => { export default async (req: VercelRequest, res: VercelResponse) => {
res.send(fuse.search(req.query.query)); // TODO: `pickdeep` only required fields
const searchStr = req?.query?.query as string;
if (!searchStr) return [];
if (Array.isArray(searchStr)) return [];
const items = fuse.search(searchStr).map((item) => item.item);
res.send(items);
}; };

53
src/components/filter-search-bar/filter-search-bar.astro
View File

@@ -22,7 +22,8 @@ const { unicornProfilePicMap } = Astro.props as FilterSearchBarProps;
window.unicornProfilePicMap || unicornProfilePicMap; window.unicornProfilePicMap || unicornProfilePicMap;
</script> </script>
<script> <script>
import { render, createElement } from "preact"; import { render, createElement, Fragment } from "preact";
import { PostInfo } from "types/PostInfo";
import { PostCard } from "../../components/post-card/post-card"; import { PostCard } from "../../components/post-card/post-card";
const searchInput: HTMLElement = document.querySelector("#search-input"); const searchInput: HTMLElement = document.querySelector("#search-input");
@@ -39,6 +40,9 @@ const { unicornProfilePicMap } = Astro.props as FilterSearchBarProps;
const initDisplayVal = postListContainer.style.display; const initDisplayVal = postListContainer.style.display;
let loadingEl: HTMLElement | undefined;
let abortController: AbortController | undefined;
searchInput.addEventListener( searchInput.addEventListener(
"input", "input",
(e: InputEvent & { target: HTMLInputElement }) => { (e: InputEvent & { target: HTMLInputElement }) => {
@@ -52,29 +56,40 @@ const { unicornProfilePicMap } = Astro.props as FilterSearchBarProps;
searchPostListContainer.style.display = "none"; searchPostListContainer.style.display = "none";
return; return;
} }
postListContainer.style.display = "none"; postListContainer.style.display = "none";
searchPostListContainer.style.display = "block"; searchPostListContainer.style.display = "block";
// searchPostListContainer.innerText = val;
const unicornProfilePicMap = (window as any).unicornProfilePicMap || []; const unicornProfilePicMap = (window as any).unicornProfilePicMap || [];
const FilledPostCard = createElement(PostCard, { loadingEl && loadingEl.remove();
loadingEl = document.createElement("p");
loadingEl.innerText = "Loading...";
searchPostListContainer.append(loadingEl);
if (abortController) {
abortController.abort();
abortController = undefined;
}
abortController = new AbortController();
fetch(`/api/search?query=${val}`, { signal: abortController.signal })
.then((res) => res.json())
.then((serverVal: PostInfo[]) => {
// TODO: Debounce to avoid server kill
const FilledPostCard = createElement(
Fragment,
{},
serverVal.map((post) =>
createElement(PostCard, {
unicornProfilePicMap, unicornProfilePicMap,
post: { post,
published: new Date().toUTCString(), })
slug: "", )
title: val, );
authorsMeta: [
{
name: "Corbin Crutchley",
id: "crutchcorn",
color: "",
},
],
tags: [],
description: "Hello, world!",
excerpt: "",
},
});
render(FilledPostCard, searchPostList); render(FilledPostCard, searchPostList);
loadingEl && loadingEl.remove();
loadingEl = undefined;
abortController = undefined;
});
} }
); );
</script> </script>