-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.js
86 lines (72 loc) · 1.91 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React from 'react';
import Head from 'next/head';
import router from 'next/router';
import {
AutosuggestField,
RelatedContent,
SearchField,
Posts,
ElasticPressProvider,
findResultsState,
} from '@10up/elasticpress-react';
import styles from '../styles/Home.module.css';
const onSearchHandler = ({ searchTerm, perPage }) => {
router.push(`/?s=${searchTerm || ''}&perPage=${perPage}`);
};
const Search = (props) => (
<ElasticPressProvider
node="https://thorstentestessential.clients.hosted-elasticpress.io"
indexName="thorstentestessential--demoelasticpressio-post-1"
onSearch={onSearchHandler}
{...props}
>
<div>
<SearchField debounceMs={100} />
</div>
<div>
<Posts />
</div>
</ElasticPressProvider>
);
// eslint-disable-next-line
const Home = ({ searchState, resultsState }) => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<ElasticPressProvider
node="http://elasticpress.test/__elasticsearch"
indexName="elasticpresstest-post-1"
loadInitialData={false}
>
<AutosuggestField />
</ElasticPressProvider>
<h2>Related Posts</h2>
<RelatedContent wpApiRoot="https://elasticpress.test/wp-json" postId={2738} />
<h2>Search</h2>
<Search resultsState={resultsState} searchState={searchState} />
</main>
<footer className={styles.footer}>
<a href="10up.com" target="_blank" rel="noopener noreferrer">
Powered by <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
);
};
export async function getServerSideProps({ query }) {
const searchState = {
searchTerm: query.s || null,
perPage: query.perPage || 10,
};
const resultsState = await findResultsState(Search, {
searchState,
});
return {
props: { searchState, resultsState },
};
}
export default Home;