git.iko.soy/urbit.org
on master help sign in
search: add id searching
96043e3Matilde Park
components/Search.js+54−1
compare with master
unifiedsplit
@@ -3,6 +3,8 @@ import { glossary } from "../lib/glossary";
3import { withRouter } from "next/router";
3import { withRouter } from "next/router";
4import debounce from "lodash.debounce";
4import debounce from "lodash.debounce";
5import Downshift from "downshift";
5import Downshift from "downshift";
6+import ob from "urbit-ob";
7+import Sigil from "../components/Sigil";
6
8
7class Search extends Component {
9class Search extends Component {
8 constructor(props) {
10 constructor(props) {
@@ -14,6 +16,7 @@ class Search extends Component {
14 this.onInputValueChange = this.onInputValueChange.bind(this);
16 this.onInputValueChange = this.onInputValueChange.bind(this);
15 this.onSelect = this.onSelect.bind(this);
17 this.onSelect = this.onSelect.bind(this);
16 this.glossarySearch = this.glossarySearch.bind(this);
18 this.glossarySearch = this.glossarySearch.bind(this);
19+ this.patpSearch = this.patpSearch.bind(this);
17 }
20 }
18
21
19 searchEndpoint(query) {
22 searchEndpoint(query) {
@@ -26,6 +29,10 @@ class Search extends Component {
26 });
29 });
27 }
30 }
28
31
32+ patpSearch(query) {
33+ return ob.isValidPatp(`~${deSig(query.toLowerCase())}`) || !isNaN(query);
34+ }
35+
29 onSelect(item) {
36 onSelect(item) {
30 if (item.slug) {
37 if (item.slug) {
31 this.props.router.push(item.slug);
38 this.props.router.push(item.slug);
@@ -50,12 +57,30 @@ class Search extends Component {
50 content: item,
57 content: item,
51 }));
58 }));
52
59
60+ const patp = this.patpSearch(query)
61+ ? !isNaN(query)
62+ ? ob.patp(query)
63+ : ob.patp(ob.patp2dec(`~${deSig(query)}`))
64+ : null;
65+
66+ const patpResult = this.patpSearch(query)
67+ ? [
68+ {
69+ type: "PATP",
70+ content: {
71+ patp: patp,
72+ slug: `/id/${patp}`,
73+ },
74+ },
75+ ]
76+ : [];
77+
53 const glossaryResults = this.glossarySearch(query).map((item) => ({
78 const glossaryResults = this.glossarySearch(query).map((item) => ({
54 type: "GLOSSARY_RESULT",
79 type: "GLOSSARY_RESULT",
55 content: item,
80 content: item,
56 }));
81 }));
57
82
58− const list = [...glossaryResults, ...results];
83+ const list = [...patpResult, ...glossaryResults, ...results];
59
84
60 this.setState({ results: list });
85 this.setState({ results: list });
61 });
86 });
@@ -117,6 +142,30 @@ class Search extends Component {
117 {isOpen
142 {isOpen
118 ? state.results.map((item, index) => {
143 ? state.results.map((item, index) => {
119 const selected = highlightedIndex === index;
144 const selected = highlightedIndex === index;
145+ if (item.type === "PATP") {
146+ return (
147+ <li
148+ className={`cursor-pointer p-2 flex space-x-2 items-center text-left w-full ${
149+ selected ? "bg-green-400" : ""
150+ }`}
151+ {...getItemProps({
152+ key: item.content.slug + "-" + index,
153+ index,
154+ item: item.content,
155+ selected: highlightedIndex === index,
156+ })}
157+ >
158+ <div className="rounded-md overflow-hidden">
159+ <Sigil
160+ patp={item.content.patp}
161+ size={25}
162+ icon
163+ />
164+ </div>
165+ <p className="font-mono">{item.content.patp}</p>
166+ </li>
167+ );
168+ }
120 if (item.type === "GLOSSARY_RESULT") {
169 if (item.type === "GLOSSARY_RESULT") {
121 return (
170 return (
122 <li
171 <li
@@ -210,4 +259,8 @@ class Search extends Component {
210 }
259 }
211}
260}
212
261
262+function deSig(string) {
263+ return string.startsWith("~") ? string.substring(1) : string;
264+}
265+
213export default withRouter(Search);
266export default withRouter(Search);