├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.js └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Searchkit Starter App 2 | 3 | Used to start new applications which use Searchkit. Based off the popular create-react-app. If you dont know about `create-react-app`, please read their [readme](https://github.com/facebookincubator/create-react-app/blob/master/README.md) and install create-react-app on your machine 4 | 5 | ## Install instructions 6 | 7 | - git clone https://github.com/searchkit/searchkit-starter-app.git 8 | - cd searchkit-starter-app 9 | - yarn 10 | - npm start 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "searchkit-cra", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@apollo/client": "3.5.10", 9 | "@elastic/datemath": "^5.0.3", 10 | "@elastic/eui": "^30.4.1", 11 | "@searchkit/client": "3.0.0-canary.51", 12 | "@searchkit/elastic-ui": "3.0.0-canary.51", 13 | "@searchkit/sdk": "3.0.0-canary.51", 14 | "graphql": "15.4.0", 15 | "moment": "^2.29.1", 16 | "react": "17.0.2", 17 | "react-dom": "17.0.2", 18 | "react-scripts": "5.0.0" 19 | }, 20 | "devDependencies": { 21 | "@babel/runtime": "7.13.8" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test --env=jsdom", 27 | "eject": "react-scripts eject" 28 | }, 29 | "browserslist": [ 30 | ">0.2%", 31 | "not dead", 32 | "not ie <= 11", 33 | "not op_mini all" 34 | ] 35 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/searchkit/searchkit-starter-app/b54c6f5b84c4fa1150c8eb2d4f17c9749d1543ed/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { 2 | DateRangeFacet, 3 | MultiMatchQuery, 4 | RangeFacet, 5 | RefinementSelectFacet 6 | } from "@searchkit/sdk"; 7 | import { 8 | FacetsList, 9 | SearchBar, 10 | ResetSearchButton, 11 | SelectedFilters, 12 | Pagination 13 | } from "@searchkit/elastic-ui"; 14 | import { useSearchkitVariables } from "@searchkit/client"; 15 | import { useSearchkitSDK } from "@searchkit/sdk/lib/esm/react-hooks"; 16 | import { 17 | EuiPage, 18 | EuiFlexGrid, 19 | EuiPageBody, 20 | EuiPageContent, 21 | EuiPageContentBody, 22 | EuiPageContentHeader, 23 | EuiPageContentHeaderSection, 24 | EuiPageHeader, 25 | EuiPageHeaderSection, 26 | EuiPageSideBar, 27 | EuiTitle, 28 | EuiHorizontalRule, 29 | EuiText, 30 | EuiFlexGroup, 31 | EuiFlexItem 32 | } from "@elastic/eui"; 33 | 34 | import "@elastic/eui/dist/eui_theme_light.css"; 35 | 36 | const config = { 37 | host: "https://commerce-demo.es.us-east4.gcp.elastic-cloud.com:9243", 38 | connectionOptions: { 39 | apiKey: "NWF4c2VYOEJzRDhHMzlEX1JDejU6YnJXaS1XWjlSZ2F5ek1Cc3V4aXV6dw==" 40 | }, 41 | index: "imdb_movies", 42 | hits: { 43 | fields: ["title"] 44 | }, 45 | query: new MultiMatchQuery({ 46 | fields: [ 47 | "title", 48 | "genres", 49 | "directors", 50 | "writers", 51 | "actors", 52 | "countries", 53 | "plot" 54 | ] 55 | }), 56 | facets: [ 57 | new RefinementSelectFacet({ 58 | field: "type", 59 | identifier: "type", 60 | label: "Type", 61 | multipleSelect: true 62 | }), 63 | new RangeFacet({ 64 | field: "metascore", 65 | identifier: "metascore", 66 | label: "Metascore", 67 | range: { 68 | min: 0, 69 | max: 100, 70 | interval: 5 71 | } 72 | }), 73 | new DateRangeFacet({ 74 | field: "released", 75 | identifier: "released", 76 | label: "Released" 77 | }), 78 | 79 | new RefinementSelectFacet({ 80 | field: "genres.keyword", 81 | identifier: "genres", 82 | label: "Genres", 83 | multipleSelect: true 84 | }), 85 | 86 | new RefinementSelectFacet({ 87 | field: "countries.keyword", 88 | identifier: "countries", 89 | label: "Countries" 90 | }), 91 | new RefinementSelectFacet({ 92 | field: "rated", 93 | identifier: "rated", 94 | label: "Rated", 95 | multipleSelect: true 96 | }), 97 | new RefinementSelectFacet({ 98 | field: "directors.keyword", 99 | identifier: "directors", 100 | label: "Directors" 101 | }), 102 | 103 | new RefinementSelectFacet({ 104 | field: "writers.keyword", 105 | identifier: "writers", 106 | label: "Writers" 107 | }), 108 | 109 | new RefinementSelectFacet({ 110 | field: "actors.keyword", 111 | identifier: "actors", 112 | label: "Actors", 113 | multipleSelect: true 114 | }), 115 | 116 | new RangeFacet({ 117 | field: "imdbrating", 118 | identifier: "imdbrating", 119 | label: "IMDB Rating", 120 | range: { 121 | interval: 1, 122 | max: 10, 123 | min: 1 124 | } 125 | }) 126 | ] 127 | }; 128 | 129 | const HitsList = ({ data }) => ( 130 | 131 | {data?.hits.items.map((hit) => ( 132 | 133 | 134 | 135 | 136 | 137 | Nature 142 | 143 | 144 | 145 |
{hit.fields.title}
146 | 147 | 148 |

{hit.fields.plot}

149 | 150 | 151 | 152 | 153 |
    154 |
  • 155 | ACTORS: 156 | {hit.fields.actors.join(", ")} 157 |
    • 158 | 159 |
  • 160 | WRITERS: 161 | {hit.fields.writers.join(", ")} 162 |
    • 163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | ))} 171 | 172 | ); 173 | 174 | function App() { 175 | const Facets = FacetsList([]); 176 | const variables = useSearchkitVariables(); 177 | const { results, loading } = useSearchkitSDK(config, variables); 178 | return ( 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 |

{results?.summary.total} Results

201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | ); 214 | } 215 | 216 | export default App; 217 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | import { withSearchkit, withSearchkitRouting } from "@searchkit/client"; 5 | 6 | const SearchkitApp = withSearchkit(withSearchkitRouting(App)); 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById("root") 13 | ); 14 | --------------------------------------------------------------------------------