Skip to content

Commit f0a1dfe

Browse files
HaroenvHaroenv
authored
feat(hooks): implement routing guides (#381)
* feat(hooks): implement routing guides * remove test stuff
1 parent f737586 commit f0a1dfe

File tree

21 files changed

+18426
-0
lines changed

21 files changed

+18426
-0
lines changed

‎React InstantSearch Hooks/routing-basic/.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎React InstantSearch Hooks/routing-basic/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# routing-basic
2+
3+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
4+
5+
## Get started
6+
7+
To run this project locally, install the dependencies and run the local server:
8+
9+
```sh
10+
npm install
11+
npm start
12+
```
13+
14+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
15+
16+
```sh
17+
yarn
18+
yarn start
19+
```
20+
21+
Open http://localhost:3000 to see your app.

‎React InstantSearch Hooks/routing-basic/package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "routing-basic",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"algoliasearch": "^4.13.0",
7+
"instantsearch.css": "^7.4.5",
8+
"instantsearch.js": "^4.40.5",
9+
"react": "^18.1.0",
10+
"react-dom": "^18.1.0",
11+
"react-instantsearch-hooks-web": "^6.24.3",
12+
"react-scripts": "5.0.1"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build"
17+
},
18+
"eslintConfig": {
19+
"extends": [
20+
"react-app",
21+
"react-app/jest"
22+
]
23+
},
24+
"browserslist": {
25+
"production": [
26+
">0.2%",
27+
"not dead",
28+
"not op_mini all"
29+
],
30+
"development": [
31+
"last 1 chrome version",
32+
"last 1 firefox version",
33+
"last 1 safari version"
34+
]
35+
}
36+
}

‎React InstantSearch Hooks/routing-basic/public/favicon.png

1.88 KB
Loading

‎React InstantSearch Hooks/routing-basic/public/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
9+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
10+
11+
<!--
12+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
13+
https://community.algolia.com/react-instantsearch/Getting_started.html#load-the-algolia-theme
14+
-->
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
16+
17+
<title>routing-basic</title>
18+
</head>
19+
20+
<body>
21+
<noscript>
22+
You need to enable JavaScript to run this app.
23+
</noscript>
24+
25+
<div id="root"></div>
26+
</body>
27+
28+
</html>

‎React InstantSearch Hooks/routing-basic/src/App.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
em {
2+
background: cyan;
3+
font-style: normal;
4+
}
5+
6+
.header {
7+
display: flex;
8+
align-items: center;
9+
min-height: 50px;
10+
padding: 0.5rem 1rem;
11+
background-image: linear-gradient(to right, #8e43e7, #00aeff);
12+
color: #fff;
13+
margin-bottom: 1rem;
14+
}
15+
16+
.header a {
17+
color: #fff;
18+
text-decoration: none;
19+
}
20+
21+
.header-title {
22+
font-size: 1.2rem;
23+
font-weight: normal;
24+
}
25+
26+
.header-title::after {
27+
content: ' ▸ ';
28+
padding: 0 0.5rem;
29+
}
30+
31+
.header-subtitle {
32+
font-size: 1.2rem;
33+
}
34+
35+
.container {
36+
max-width: 1200px;
37+
margin: 0 auto;
38+
padding: 1rem;
39+
}
40+
41+
.search-panel {
42+
display: flex;
43+
}
44+
45+
.search-panel__filters {
46+
flex: 1;
47+
}
48+
49+
.search-panel__results {
50+
flex: 3;
51+
}
52+
53+
.searchbox {
54+
margin-bottom: 2rem;
55+
}
56+
57+
.pagination {
58+
margin: 2rem auto;
59+
text-align: center;
60+
}

‎React InstantSearch Hooks/routing-basic/src/App.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {
2+
Highlight,
3+
Hits,
4+
InstantSearch,
5+
Pagination,
6+
RefinementList,
7+
SearchBox,
8+
} from 'react-instantsearch-hooks-web';
9+
import { history } from 'instantsearch.js/es/lib/routers';
10+
import { simple } from 'instantsearch.js/es/lib/stateMappings';
11+
import algoliasearch from 'algoliasearch/lite';
12+
13+
import './App.css';
14+
15+
const searchClient = algoliasearch(
16+
'latency',
17+
'6be0576ff61c053d5f9a3225e2a90f76'
18+
);
19+
20+
const routing = {
21+
router: history(),
22+
stateMapping: simple(),
23+
};
24+
25+
function App() {
26+
return (
27+
<div className="container">
28+
<InstantSearch
29+
searchClient={searchClient}
30+
indexName="instant_search"
31+
routing={routing}
32+
>
33+
<div className="search-panel">
34+
<div className="search-panel__filters">
35+
<RefinementList attribute="brand" />
36+
</div>
37+
38+
<div className="search-panel__results">
39+
<SearchBox className="searchbox" placeholder="Search" />
40+
<Hits hitComponent={Hit} />
41+
42+
<div className="pagination">
43+
<Pagination />
44+
</div>
45+
</div>
46+
</div>
47+
</InstantSearch>
48+
</div>
49+
);
50+
}
51+
52+
function Hit({ hit }) {
53+
return (
54+
<div>
55+
<Highlight attribute="name" hit={hit} />
56+
</div>
57+
);
58+
}
59+
60+
export default App;

‎React InstantSearch Hooks/routing-basic/src/index.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
body,
2+
h1 {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
9+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
10+
}

‎React InstantSearch Hooks/routing-basic/src/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
import './index.css';
4+
import App from './App';
5+
6+
render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
document.getElementById('root')
11+
);

0 commit comments

Comments
 (0)