Skip to content

Commit dfee626

Browse files
davenquinndavenquinn
committed
Merge branch 'dev' of github.com:UW-Deepdive-Infrastructure/xdd_site into dev
* 'dev' of github.com:UW-Deepdive-Infrastructure/xdd_site: Fixed default route when input is cleared out from search= . Cleaned up snippets page and hooked the useSearchString hook back up Add reference card to articles change height property on results to prevent hammering of api Starting to add test calls
2 parents 2b743a8 + 755ab30 commit dfee626

File tree

4 files changed

+108
-117
lines changed

4 files changed

+108
-117
lines changed

‎components/main.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ div.publication
185185

186186
.results {
187187
padding: 0 4px
188-
height 200px
188+
min-height: 200px
189189
}
190190

191191
.loading-overlay {

‎components/search.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
1-
import {useState, useEffect} from 'react'
2-
import { useRouter } from 'next/router'
3-
4-
const useSearchString = (pathname)=> {
5-
/*
6-
A React hook to manage a search string and
7-
synchronize URL query parameters
8-
*/
9-
const router = useRouter();
10-
11-
const [searchString, setState] = useState()
12-
13-
useEffect(()=>{
14-
if (searchString == null) {
15-
setState(router.query.search)
16-
}
17-
}, [router.query]);
18-
19-
const updateSearchString = (val)=>{
20-
setState(val)
21-
// Update query to house search string
22-
const href = {
23-
pathname,
24-
query: {search: val}
1+
import { useState, useEffect } from 'react';
2+
import { useRouter } from 'next/router';
3+
4+
const useSearchString = (pathname) => {
5+
/*
6+
A React hook to manage a search string and
7+
synchronize URL query parameters
8+
*/
9+
const router = useRouter();
10+
11+
const [searchString, setState] = useState();
12+
13+
useEffect(() => {
14+
if (searchString == null && router.query['search']) {
15+
setState(router.query['search'])
16+
}
17+
}, [router.query]);
18+
19+
const updateSearchString = (val) => {
20+
setState(val);
21+
22+
const query = (val != '') ? { search: val } : null;
23+
24+
const href = {
25+
pathname,
26+
query: query
27+
};
28+
29+
router.push(href, href, {shallow: true});
2530
};
26-
const as = href;
27-
router.push(href, as, {shallow: true});
28-
}
2931

30-
return [searchString, updateSearchString]
31-
}
32+
return [searchString, updateSearchString]
33+
};
3234

3335
export {useSearchString}

‎pages/article/[docid].tsx‎

Lines changed: 73 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
1-
import React, {Component} from 'react'
1+
import React, {Component} from 'react';
22
import Head from 'next/head'
3-
import BasePage from '../../components/base-page'
4-
import dynamic from 'next/dynamic'
5-
import {InputGroup, Callout} from "@blueprintjs/core"
6-
import { useRouter } from 'next/router'
3+
import BasePage from '../../components/base-page';
4+
import dynamic from 'next/dynamic';
5+
import { InputGroup, Callout } from '@blueprintjs/core';
6+
import { useRouter } from 'next/router';
77
import Link from 'next/link'
88
//import {GeoDeepDiveSwatchInner} from '@macrostrat/ui-components'
99

1010
const loadAPIResultView = async function(){
11-
const mod = await import('@macrostrat/ui-components')
11+
const mod = await import('@macrostrat/ui-components');
1212
return mod.APIResultView
13-
}
13+
};
14+
1415
const loadCard = async function(){
15-
const mod = await import('@macrostrat/ui-components')
16-
return mod.GDDReferenceCard
17-
}
16+
const mod = await import('@macrostrat/ui-components');
17+
return mod.GDDReferenceCard
18+
};
19+
1820
const loadSwatch = async function(){
19-
const mod = await import('@macrostrat/ui-components')
20-
return mod.GeoDeepDiveSwatchInner
21-
}
21+
const mod = await import('@macrostrat/ui-components');
22+
return mod.GeoDeepDiveSwatchInnerBare
23+
};
24+
2225
const loadAuthorList = async function(){
23-
const mod = await import('@macrostrat/ui-components')
24-
return mod.AuthorList
25-
}
26+
const mod = await import('@macrostrat/ui-components');
27+
return mod.AuthorList
28+
};
2629

2730
const APIResultView = dynamic(loadAPIResultView, { ssr: false });
2831
const GDDReferenceCard = dynamic(loadCard, { ssr: false });
@@ -31,51 +34,60 @@ const GeoDeepDiveSwatchInner = dynamic(loadSwatch, { ssr: false });
3134

3235
const Swatch = ({data}) => {
3336
return <GeoDeepDiveSwatchInner {...data} />
34-
}
37+
};
3538

3639
const SimilarDocs = (props) => {
3740
const {docs} = props;
38-
return <div name="similar_docs">
39-
<h2>Similar documents</h2>
40-
<ul>
41-
{docs.map( doc => {
42-
return <li><a href={`${doc.url}`}>{doc.title} ({doc.doi})</a></li>
43-
})}
44-
</ul>
41+
return <div>
42+
<h2>Similar documents</h2>
43+
<ul>
44+
{docs.map( doc => {
45+
return <li><a href={`${doc.url}`}>{doc.title} ({doc.doi})</a></li>
46+
})}
47+
</ul>
4548
</div>
46-
}
49+
};
4750

48-
const functionForStuff = (data) =>{
49-
console.log(data)
51+
const functionForStuff = (data) => {
52+
console.log(data);
5053
return <div>
51-
<h1>{data.title}</h1>
52-
<Swatch data={data} />
53-
<SimilarDocs docs={data.similar_docs} />
54+
<h1>{data.title}</h1>
55+
<GDDReferenceCard docid={data._gddid}/>
56+
{/*<Swatch data={data} />*/}
57+
{/*<SimilarDocs docs={data.similar_docs} />*/}
5458
</div>
55-
}
59+
};
5660

5761
const DocIDView = (props)=>{
58-
const {searchString} = props;
59-
let docid = null;
60-
if (searchString == null) return null
61-
if (searchString.length == 24) {
62-
docid = searchString;
63-
}
64-
if (docid != null) {
65-
return <APIResultView
66-
route="http://geodeepdive.org/api/articles"
67-
params={{"docid": docid, "similar_docs": true}}
68-
opts={{unwrapResponse: (res)=>res.success.data[0]}}>
69-
{functionForStuff}
70-
</APIResultView>
71-
72-
}
73-
return <Callout icon="alert" title="Document results"
74-
intent="primary">
75-
Search for documents
76-
</Callout>
77-
78-
}
62+
const {searchString} = props;
63+
let docid = null;
64+
65+
if (searchString == null) return null;
66+
67+
if (searchString.length == 24) {
68+
docid = searchString;
69+
}
70+
71+
function handleUnwrapResponse(response) {
72+
if(response.success && response.success.data) {
73+
return response.success.data[0];
74+
}
75+
}
76+
77+
if (docid != null) {
78+
return <APIResultView
79+
route="http://geodeepdive.org/api/articles"
80+
params={ { docid: docid } }
81+
opts={ { unwrapResponse: handleUnwrapResponse } }>
82+
{functionForStuff}
83+
</APIResultView>
84+
}
85+
86+
return <Callout icon="search-text" title="Document results" intent="primary">
87+
Search for documents
88+
</Callout>
89+
90+
};
7991

8092

8193
//const DocIDView = (props)=>{
@@ -95,14 +107,14 @@ const DocIDView = (props)=>{
95107
//
96108
//}
97109
//
98-
const ArticlePage = ()=>{
99-
const router = useRouter()
100-
const { docid } = router.query
101-
console.log(docid);
102-
103-
return <BasePage title="article search">
104-
<DocIDView searchString={docid} />
105-
</BasePage>
106-
}
110+
111+
const ArticlePage = ( )=> {
112+
const router = useRouter();
113+
const { docid } = router.query;
114+
115+
return <BasePage title="Article Search">
116+
<DocIDView searchString={docid} />
117+
</BasePage>
118+
};
107119

108120
export default ArticlePage

‎pages/snippets.tsx‎

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, {createContext, useState, Component, useEffect} from 'react';
2-
import debounce from 'lodash.debounce';
32
import Head from 'next/head'
43
import BasePage from '../components/base-page'
54
import dynamic from 'next/dynamic'
@@ -9,7 +8,6 @@ import "@blueprintjs/core/lib/css/blueprint.css"
98
import { InputGroup, Callout, Button, Intent, Spinner } from "@blueprintjs/core"
109
import { useSearchString } from '../components/search'
1110
import { LinkCard } from '../components/link-card'
12-
import { useRouter } from 'next/router';
1311

1412
let ROUTE = "https://geodeepdive.org/api/snippets";
1513

@@ -27,7 +25,7 @@ const InfiniteScrollView = dynamic(loadCard, { ssr: false });
2725

2826
const loadRefCard = async function(){
2927
const mod = await import('@macrostrat/ui-components');
30-
return mod.GddReferenceCard
28+
return mod.GDDReferenceCard
3129
};
3230
const GddReferenceCard = dynamic(loadRefCard, { ssr: false });
3331

@@ -137,20 +135,15 @@ const ResultView = (props)=> {
137135
success: null,
138136
hits: 0 }
139137
);
140-
// const [loading, setLoading] = useState(false);
141138

142139
const { searchString } = props;
143140

144-
145141
useEffect( () => {
146142
setData({
147143
params: {...data.params, term: searchString },
148144
success: null,
149145
hits: 0
150146
});
151-
152-
// setLoading(true);
153-
154147
}, [searchString]);
155148

156149

@@ -163,8 +156,6 @@ const ResultView = (props)=> {
163156

164157
function setDataState(response) {
165158
if(response && response.success) {
166-
// setLoading( false);
167-
168159
setData({
169160
...data,
170161
success: response.success,
@@ -212,30 +203,16 @@ const ResultView = (props)=> {
212203

213204
export default function SnippetsPage() {
214205
const [inputValue, setInputValue] = useState("");
215-
const [path, setPath] = useState("/snippets");
216-
const [searchString, setSearchString] = useState("");
217-
const router = useRouter();
218-
219-
useEffect( () => {
220-
router.push(path, path, {shallow: true});
221-
}, [path]);
222-
206+
const [searchString, updateSearchString] = useSearchString("/snippets");
223207

224208
function handleInputValueChange(e) {
225-
if (e.target.value !== '') {
226-
setPath('/snippets?search=' + e.target.value);
227-
} else {
228-
setPath("/snippets");
229-
}
230-
231209
setInputValue(e.target.value);
232210
}
233211

234212
function initiateSearch() {
235-
setSearchString(inputValue);
213+
updateSearchString(inputValue);
236214
}
237215

238-
239216
return<BasePage title="Snippets Search" fixedHeader={true}>
240217
<div className="search-bar">
241218
<InputGroup

0 commit comments

Comments
 (0)