git.iko.soy/urbit.org
on eef7fb1 help sign in
urbit.org/components/Search.js
209 lines 7.8 kB history raw
1import { Component, createRef } from "react";
2import { glossary } from "../lib/glossary";
3import { withRouter } from "next/router";
4import Downshift from "downshift";
6class Search extends Component {
7 constructor(props) {
8 super(props);
9 this.state = {
10 results: [],
11 };
12 this.searchEndpoint = this.searchEndpoint.bind(this);
13 this.onInputValueChange = this.onInputValueChange.bind(this);
14 this.onSelect = this.onSelect.bind(this);
15 this.glossarySearch = this.glossarySearch.bind(this);
16 }
18 searchEndpoint(query) {
19 return `/api/search?q=${query}`;
20 }
22 glossarySearch(query) {
23 return glossary.filter((entry) => {
24 return query.toLowerCase() === entry.name || entry.symbol === query;
25 });
26 }
28 onSelect(item) {
29 if (item.slug) {
30 this.props.router.push(item.slug);
31 }
33 this.setState({
34 query: "",
35 results: [],
36 });
38 this.props.closeSearch();
39 }
41 onInputValueChange(query) {
42 if (query.length) {
43 fetch(this.searchEndpoint(query))
44 .then((res) => res.json())
45 .then((res) => {
46 // Wrap results in an object which will tell React what component to use to render results.
47 const results = res.results.map((item) => ({
48 type: "RESULT",
49 content: item,
50 }));
52 const glossaryResults = this.glossarySearch(query).map((item) => ({
53 type: "GLOSSARY_RESULT",
54 content: item,
55 }));
57 const list = [...glossaryResults, ...results];
59 this.setState({ results: list });
60 });
61 } else {
62 this.setState({ results: [] });
63 }
64 }
66 render() {
67 const { state, props } = this;
69 if (props.showSearch) {
70 return (
71 <Downshift
72 onSelect={(selection) => this.onSelect(selection)}
73 onInputValueChange={(event) => this.onInputValueChange(event)}
74 itemToString={(item) => (item ? item.slug : "")}
75 defaultHighlightedIndex={0}
76 >
77 {({
78 getInputProps,
79 getItemProps,
80 getLabelProps,
81 getMenuProps,
82 isOpen,
83 inputValue,
84 highlightedIndex,
85 selectedItem,
86 getRootProps,
87 }) => (
88 <div
89 onClick={(e) => props.closeSearch(e)}
90 className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center p-4"
91 >
92 <div className="relative flex flex-col max-w-screen-lg md:my-32 w-full md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0 overflow-hidden">
93 <div
94 style={{ display: "inline-block" }}
95 {...getRootProps({}, { suppressRefError: true })}
96 >
97 <input
98 autoFocus
99 className="text-lg md:text-xl lg:text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"
100 placeholder="Search..."
101 type="text"
102 onClick={(e) => e.stopPropagation()}
103 {...getInputProps({
104 onKeyDown: (event) => {
105 if (event.key === "Escape") {
106 // Prevent Downshift's default 'Escape' behavior.
107 event.nativeEvent.preventDownshiftDefault = true;
108 this.props.closeSearch(event);
109 }
110 },
111 })}
112 />
113 </div>
114 <ul {...getMenuProps()} className="overflow-y-scroll">
115 {isOpen
116 ? state.results.map((item, index) => {
117 const selected = highlightedIndex === index;
118 if (item.type === "GLOSSARY_RESULT") {
119 return (
120 <li
121 className={`cursor-pointer flex text-left w-full ${
122 selected ? "bg-green" : ""
123 }`}
124 {...getItemProps({
125 key: item.content.slug + "-" + index,
126 index,
127 item: item.content,
128 selected: highlightedIndex === index,
129 })}
130 >
131 <div className="font-semibold p-3">
132 <p
133 className={`text-base ${
134 selected ? "text-white" : "text-black"
135 }`}
136 >
137 {item.content.symbol.length > 0 && (
138 <code
139 className={`mr-1 rounded px-1 py-0.5 ${
140 selected ? "bg-washedWhite" : "bg-wall"
141 }`}
142 >
143 {item.content.symbol}
144 </code>
145 )}
146 {item.content.name}
147 </p>
148 <p
149 className={`font-normal text-base mt-1 ${
150 selected ? "text-white" : "text-black"
151 }`}
152 >
153 {item.content.desc}
154 </p>
155 </div>
156 </li>
157 );
158 }
159 if (item.type === "RESULT") {
160 return (
161 <li
162 className={`cursor-pointer flex text-left w-full ${
163 selected ? "bg-green" : ""
164 }`}
165 {...getItemProps({
166 key: item.content.link + "-" + index,
167 index,
168 item: item.content,
169 selected,
170 })}
171 >
172 <div className="p-3">
173 <p
174 className={`font-medium text-base ${
175 selected ? "text-white" : "text-black"
176 }`}
177 >
178 {item.content.parent !== "Content"
179 ? `${item.content.parent} /`
180 : ""}{" "}
181 {item.content.title}
182 </p>
183 <p
184 className={`text-base font-regular text-small ${
185 selected ? "text-midWhite" : "text-gray"
186 }`}
187 >
188 {item.content.content}
189 </p>
190 </div>
191 </li>
192 );
193 }
194 return null;
195 })
196 : null}
197 </ul>
198 </div>
199 </div>
200 )}
201 </Downshift>
202 );
203 } else {
204 return null;
205 }
206 }
209export default withRouter(Search);