@@ -1,6 +1,7 @@
1−import { useCallback, useRef, useState } from "react";
1+import { useCallback, useRef, useState, useEffect } from "react";
22import { glossary } from "../lib/glossary";
33import Link from "next/link";
4+import { useRouter } from "next/router";
45
56const glossarySearch = (query) => {
67 return glossary.filter((entry) => {
@@ -10,15 +11,31 @@ const glossarySearch = (query) => {
1011
1112export default function Search(props) {
1213 const searchRef = useRef(null);
13− const [query, SetQuery] = useState("");
14+ const [query, setQuery] = useState("");
1415 const [active, setActive] = useState(false);
1516 const [results, setResults] = useState([]);
1617 const searchEndpoint = (query) => `/api/search?q=${query}`;
1718
19+ const router = useRouter();
20+
21+ useEffect(() => {
22+ router.events.on("routeChangeComplete", handleRouteChange);
23+ return () => {
24+ router.events.off("routeChangeComplete", handleRouteChange);
25+ };
26+ }, [router.events]);
27+
28+ const handleRouteChange = () => {
29+ setQuery("");
30+ setResults([]);
31+ setActive(false);
32+ props.closeSearch();
33+ };
34+
1835 const onChange = useCallback((event) => {
1936 const query = event.target.value;
2037
21− SetQuery(query);
38+ setQuery(query);
2239 if (query.length) {
2340 fetch(searchEndpoint(query))
2441 .then((res) => res.json())
@@ -50,7 +67,7 @@ export default function Search(props) {
5067
5168 const clear = useCallback((e) => {
5269 e.stopPropagation();
53− SetQuery("");
70+ setQuery("");
5471 }, []);
5572
5673 // Locks document scrolling when search is open
@@ -64,9 +81,12 @@ export default function Search(props) {
6481
6582 if (props.showSearch) {
6683 return (
67− <div className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center">
84+ <div
85+ onClick={props.closeSearch}
86+ className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center"
87+ >
6888 <div
69− className="relative my-32 flex flex-col max-w-screen-lg w-10/12 md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0"
89+ className="relative flex flex-col max-w-screen-lg w-12/12 m-4 md:my-32 md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0"
7090 ref={searchRef}
7191 >
7292 <div className="">
@@ -77,12 +97,13 @@ export default function Search(props) {
7797 placeholder="Search..."
7898 type="text"
7999 value={query}
100+ onClick={(e) => e.stopPropagation()}
80101 autoFocus={true}
81102 />
82103
83104 <span
84105 onClick={props.toggleSearch}
85− className="absolute right-2 top-2 cursor-pointer"
106+ className="absolute right-2.5 top-2.5 cursor-pointer"
86107 >
87108 <p className="px-2 h-8 bg-wall flex items-center justify-center text-sm rounded">
88109 ESC
@@ -91,75 +112,75 @@ export default function Search(props) {
91112 </div>
92113
93114 <div
94− className={
95− "overflow-scroll min-h-0 pb-2" +
96− (query.length > 0 ? "" : "hidden")
97− }
115+ className={"overflow-y-scroll" + (query.length > 0 ? "" : "hidden")}
98116 >
99− {active &&
100− results.length === 0 &&
101− glossaryResults.length === 0 &&
102− query !== "" ? (
103− <div className="flex font-semibold text-sm p-3 py-8 w-full">
104− <p className="mr-2 text-gray">No Results found for</p>
105− <p className="font-semibold">"{query}"</p>
106− </div>
107− ) : null}
108− {active && glossaryResults.length > 0 ? (
109− <div>
110− <div className="flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
111− <p className="font-semibold text-sm">Glossary</p>
117+ <div>
118+ {active &&
119+ results.length === 0 &&
120+ glossaryResults.length === 0 &&
121+ query !== "" ? (
122+ <div className="flex font-semibold text-sm p-3 py-8 w-full">
123+ <p className="mr-2 text-gray">No Results found for</p>
124+ <p className="font-semibold">"{query}"</p>
112125 </div>
126+ ) : null}
127+ {active && glossaryResults.length > 0 ? (
128+ <>
129+ <div className="sticky top-0 flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
130+ <p className="font-semibold text-sm">Glossary</p>
131+ </div>
113132
114− {glossaryResults.map(({ name, link, desc, symbol }) => {
115− return (
116− <Link href={link} as={link} key={link}>
117− <div className="cursor-pointer hover:bg-wall">
118− <div className="font-semibold p-3">
119− {symbol.length > 0 && (
120− <code className="mr-1 bg-wall rounded px-1 py-0.5">
121− {symbol}
122− </code>
123− )}
124− {name}
125− <p className="font-normal text-base mt-1">{desc}</p>
126− </div>
127− </div>
128− </Link>
129− );
130− })}
131− </div>
132− ) : null}
133− {active && results.length > 0 && (
134− <ul className="">
135− <div>
136− <p className="font-semibold text-sm p-3 py-1 bg-ultraDeepWall text-white">
137− {results.length} results for "{query}"
138− </p>
139− </div>
140− {results
141− .filter((e) => e.parent !== "Glossary")
142− .map(({ title, slug, content, parent }) => {
133+ {glossaryResults.map(({ name, link, desc, symbol }) => {
143134 return (
144− <li
145− key={slug}
146− className="cursor-pointer hover:bg-wall p-3"
147− >
148− <Link href={slug} as={slug}>
149− <div>
150− <p className="font-medium text-base">
151− {parent} / {title}
152− </p>
153− <p className="text-base font-regular text-small text-gray">
154− {content}
155− </p>
135+ <Link href={link} as={link} key={link}>
136+ <div className="cursor-pointer hover:bg-wall">
137+ <div className="font-semibold p-3">
138+ {symbol.length > 0 && (
139+ <code className="mr-1 bg-wall rounded px-1 py-0.5">
140+ {symbol}
141+ </code>
142+ )}
143+ {name}
144+ <p className="font-normal text-base mt-1">{desc}</p>
156145 </div>
157− </Link>
158− </li>
146+ </div>
147+ </Link>
159148 );
160149 })}
161− </ul>
162− )}
150+ </>
151+ ) : null}
152+ {active && results.length > 0 && (
153+ <>
154+ <div className="sticky top-0 flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
155+ <p className="font-semibold text-sm">
156+ {results.length} results for "{query}"
157+ </p>
158+ </div>
159+
160+ {results
161+ .filter((e) => e.parent !== "Glossary")
162+ .map(({ title, slug, content, parent }) => {
163+ return (
164+ <div
165+ key={slug}
166+ className="cursor-pointer hover:bg-wall p-3"
167+ >
168+ <Link href={slug} as={slug}>
169+ <div>
170+ <p className="font-medium text-base">
171+ {parent} / {title}
172+ </p>
173+ <p className="text-base font-regular text-small text-gray">
174+ {content}
175+ </p>
176+ </div>
177+ </Link>
178+ </div>
179+ );
180+ })}
181+ </>
182+ )}
183+ </div>
163184 </div>
164185 </div>
165186 </div>