Skip to content

Commit 68a188c

Browse files
davenquinndavenquinn
committed
Updated docid
2 parents e2022d6 + dfee626 commit 68a188c

File tree

3 files changed

+107
-104
lines changed

3 files changed

+107
-104
lines changed

‎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 & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import "@macrostrat/ui-components/lib/esm/index.css";
55
import "@blueprintjs/core/lib/css/blueprint.css";
66
import { InputGroup, Button } from "@blueprintjs/core";
77
import { useRouter } from "next/router";
8+
import { useSearchString } from "../components/search";
89

910
/* The below async function creates a dynamically-loaded components that
1011
support next.js server-side rendering */
@@ -17,26 +18,14 @@ const ResultView = dynamic(loadResultView, { ssr: false });
1718

1819
export default function SnippetsPage() {
1920
const [inputValue, setInputValue] = useState("");
20-
const [path, setPath] = useState("/snippets");
21-
const [searchString, setSearchString] = useState("");
22-
const router = useRouter();
23-
24-
useEffect(() => {
25-
router.push(path, path, { shallow: true });
26-
}, [path]);
21+
const [searchString, updateSearchString] = useSearchString("/snippets");
2722

2823
function handleInputValueChange(e) {
29-
if (e.target.value !== "") {
30-
setPath("/snippets?search=" + e.target.value);
31-
} else {
32-
setPath("/snippets");
33-
}
34-
3524
setInputValue(e.target.value);
3625
}
3726

3827
function initiateSearch() {
39-
setSearchString(inputValue);
28+
updateSearchString(inputValue);
4029
}
4130

4231
return (

0 commit comments

Comments
 (0)