\n This dashboard will help you check the search results with ease.\n \n \n }\n />\n }\n />\n {/* TODO: Enable it once facet search is available */}\n {/* }\n /> */}\n \n \n)\n\nexport default OnBoarding\n","import React from 'react'\nimport styled from 'styled-components'\nimport PropTypes from 'prop-types'\n\nimport { SearchSmall, Speed } from 'components/icons'\nimport Typography from 'components/Typography'\n\nconst Legend = styled(Typography)`\n display: flex;\n align-items: center;\n margin-bottom: 6px;\n svg {\n margin-right: 6px;\n }\n`\n\nconst Stat = ({ icon, legend, value, ...props }) => (\n \n \n \n {value}\n \n
\n)\n\nconst StatsContainer = styled.div`\n display: flex;\n`\n\nconst Stats = ({ nbHits, processingTimeMS, nbResults, ...props }) => (\n \n }\n legend=\"Hits\"\n value={`${nbHits !== nbResults ? '~' : ''} ${nbHits}`}\n />\n }\n legend=\"Time spent\"\n value={`${processingTimeMS} ms`}\n />\n \n)\n\nStats.propTypes = {\n /**\n * Number of hits provided by connectStats\n */\n nbHits: PropTypes.number,\n /**\n * Time in ms needed to execute the request\n */\n processingTimeMS: PropTypes.number,\n /**\n * Number of results provided by connectStateResults\n */\n nbResults: PropTypes.number,\n}\n\nStats.defaultProps = {\n nbHits: null,\n processingTimeMS: null,\n nbResults: null,\n}\n\nexport default Stats\n","import React from 'react'\nimport Color from 'color'\nimport styled from 'styled-components'\n\nimport IconButton from 'components/IconButton'\nimport ArrowDownIcon from 'components/icons/ArrowDown'\n\nconst ArrowDown = styled(ArrowDownIcon)`\n transform: rotate(180deg);\n color: white;\n`\n\nconst ScrollButton = styled(IconButton)`\n position: fixed;\n bottom: 40px;\n right: 40px;\n background-color: ${(p) => Color(p.theme.colors.gray[2]).alpha(0.4)};\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 300ms;\n\n &:hover,\n &:focus {\n background-color: ${(p) => Color(p.theme.colors.gray[4])};\n }\n`\n\nconst ScrollToTop = () => {\n const scrollToTop = () => {\n window.scroll({ top: 0, behavior: 'smooth' })\n }\n\n return (\n scrollToTop()} aria-label=\"scroll to top\">\n \n \n )\n}\n\nexport default ScrollToTop\n","import React from 'react'\nimport { connectHighlight } from 'react-instantsearch-dom'\nimport Typography from 'components/Typography'\n\nconst Highlight = connectHighlight(\n ({ highlight, attribute, hit, indexContextValue, ...props }) => {\n const parsedHit = highlight({\n highlightProperty: '_highlightResult',\n attribute,\n hit,\n })\n\n return (\n \n {parsedHit.map((part, index) =>\n part.isHighlighted ? (\n {part.value}\n ) : (\n {part.value}\n )\n )}\n \n )\n }\n)\n\nexport default Highlight\n","/* eslint-disable no-unused-vars */\nimport React from 'react'\nimport styled from 'styled-components'\nimport ReactJson from 'react-json-view'\nimport { LazyLoadImage } from 'react-lazy-load-image-component'\n\nimport { Highlight as IsHighlight } from 'react-instantsearch-dom'\n\nimport { jsonTheme } from 'theme'\nimport { DocumentMedium } from 'components/icons'\nimport Button from 'components/Button'\nimport Box from 'components/Box'\nimport Card from 'components/Card'\nimport BaseLink from 'components/Link'\nimport Typography from 'components/Typography'\nimport Highlight from './Highlight'\n\nconst EmptyImage = styled.div`\n width: 100%;\n height: 264px;\n background-color: ${(p) => p.theme.colors.main.light};\n border-radius: 10px;\n`\n\nconst CustomCard = styled(Card)`\n display: flex;\n`\n\nconst Grid = styled.div`\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n word-break: break-all;\n`\n\nconst HitKey = styled(Typography)`\n grid-column: 1 / 2;\n`\n\nconst HitValue = styled.div`\n grid-column: 2 / 4;\n word-break: break-word;\n`\n\nconst ContentContainer = styled.div`\n width: 100%;\n`\n\nconst Link = styled(BaseLink)`\n transition: color 300ms;\n text-decoration: underline;\n color: ${(p) => p.theme.colors.gray[2]};\n &:hover,\n &:focus {\n outline: none;\n color: ${(p) => p.theme.colors.gray[0]};\n }\n`\n\nconst Hr = styled.hr`\n border-color: ${(p) => p.theme.colors.gray[10]};\n background-color: ${(p) => p.theme.colors.gray[10]};\n border-style: solid;\n border-top: 0;\n`\n\nconst ObjectValue = ({ value }) => {\n const [toggled, setToggled] = React.useState(false)\n return (\n <>\n }\n onClick={() => setToggled((prevToggled) => !prevToggled)}\n aria-expanded={toggled}\n >\n json\n \n {toggled && (\n \n )}\n \n )\n}\n\nconst isObject = (value) => value.trim().match(/^{(.*?)}$/)\n\nconst FieldValue = ({ value, hit, objectKey }) => {\n if (isObject(value)) return \n if (value.match(/(https|http):\\/\\//)) {\n return (\n \n \n \n )\n }\n return (\n \n )\n}\n\nfunction Hit({ hit, imageKey }) {\n const [displayMore, setDisplayMore] = React.useState(false)\n const documentProperties = Object.entries(hit._highlightResult)\n return (\n \n \n {hit[imageKey] ? (\n \n ) : (\n \n )}\n \n \n {documentProperties\n .slice(0, displayMore ? hit.length : 6)\n .map(([key, value], index) => (\n \n \n \n {key}\n \n \n \n \n \n
\n \n ))}\n {documentProperties.length > 6 && !displayMore && (\n \n \n ...\n \n \n setDisplayMore(true)}\n >\n Show more\n \n
\n \n )}\n \n \n )\n}\n\nexport default Hit\n","import React from 'react'\nimport styled from 'styled-components'\nimport { connectInfiniteHits } from 'react-instantsearch-dom'\n// import ReactJson from 'react-json-view'\n\n// import { jsonTheme } from 'theme'\nimport Button from 'components/Button'\n// import Card from 'components/Card'\nimport ScrollToTop from 'components/ScrollToTop'\n\nimport Hit from './Hit'\n\nconst HitsList = styled.ul`\n padding: 0;\n margin: 0;\n > li + li {\n margin-top: 16px;\n }\n`\n\nconst findImageKey = (array) => {\n const imageKey = array.find(\n (elem) =>\n typeof elem[1] === 'string' &&\n elem[1].match(/^(https|http):\\/\\/.*(jpe?g|png|gif)(\\?.*)?$/g)\n )\n return imageKey?.[0]\n}\n\nconst InfiniteHits = connectInfiniteHits(({ hits, hasMore, refineNext }) => {\n // ({ hits, hasMore, refineNext, mode }) => {\n const imageKey = hits[0] ? findImageKey(Object.entries(hits[0])) : null\n return (\n \n {/* {mode === 'fancy' ? ( */}\n \n {hits.map((hit, index) => (\n \n ))}\n \n {/* ) : (\n \n \n \n )} */}\n {hasMore && (\n \n Load more\n \n )}\n \n
\n )\n})\n\nexport default InfiniteHits\n","import React from 'react'\nimport EmptyView from 'components/EmptyView'\nimport Typography from 'components/Typography'\n\nconst NoResultForRequest = () => (\n \n \n Sorry mate, no results matching your request\n \n \n \n ☹️\n \n \n \n)\n\nexport default NoResultForRequest\n","/* eslint-disable no-unused-vars */\nimport React from 'react'\nimport { connectStateResults, connectStats } from 'react-instantsearch-dom'\n\n// import { DocumentMedium, Picture } from 'components/icons'\nimport Box from 'components/Box'\nimport Stats from 'components/Stats'\n// import Toggle from 'components/Toggle'\n// import useLocalStorage from 'hooks/useLocalStorage'\nimport InfiniteHits from './InfiniteHits'\nimport NoResultForRequest from './NoResultForRequest'\n\n// const Label1 = () => (\n// <>\n// \n// Fancy\n// \n// )\n\n// const Label2 = () => (\n// <>\n// \n// Json\n// \n// )\n\nconst ConnectedStats = connectStats((props) => )\n\nconst Results = connectStateResults(({ searchResults }) => {\n // const [mode, setMode] = useLocalStorage('mode', 'fancy')\n const hasResults = searchResults?.nbHits !== 0\n\n return (\n <>\n \n \n \n
\n {/* }\n offLabel={}\n ariaLabel=\"toggleMode\"\n initialValue={mode === 'fancy'}\n onChange={(e) => setMode(e.target.checked ? 'fancy' : 'json')}\n /> */}\n \n {/* {hasResults ? : } */}\n {hasResults ? : }\n \n )\n})\n\nexport default Results\n","/* eslint-disable no-console */\nimport React from 'react'\nimport styled from 'styled-components'\nimport { InstantSearch } from 'react-instantsearch-dom'\nimport { instantMeiliSearch } from '@meilisearch/instant-meilisearch'\nimport { useDialogState } from 'reakit/Dialog'\n\nimport useLocalStorage from 'hooks/useLocalStorage'\nimport ApiKeyModalContent from 'components/ApiKeyModalContent'\nimport Box from 'components/Box'\nimport EmptyView from 'components/EmptyView'\nimport Header from 'components/Header/index'\n// import Sidebar from 'components/Sidebar'\nimport Modal from 'components/Modal'\nimport OnBoarding from 'components/OnBoarding'\nimport Results from 'components/Results'\nimport ApiKeyContext from 'context/ApiKeyContext'\nimport ClientContext from 'context/ClientContext'\nimport Typography from 'components/Typography'\n\nexport const baseUrl =\n process.env.REACT_APP_MEILI_SERVER_ADDRESS ||\n (process.env.NODE_ENV === 'development'\n ? 'http://127.0.0.1:7700'\n : window.location.origin)\n\nconst Wrapper = styled.div`\n background-color: ${(p) => p.theme.colors.gray[11]};\n min-height: 100vh;\n`\n\nconst Body = styled.div`\n display: flex;\n flex: 1;\n width: 100%;\n min-height: calc(100vh - 120px);\n`\n\nconst Content = ({ currentIndex }) => {\n if (!currentIndex) return \n if (currentIndex?.stats?.numberOfDocuments > 0) return \n return (\n \n \n There’s no document in the selected index\n \n \n )\n}\n\nconst NoMeiliSearchRunning = () => (\n \n \n It seems like MeiliSearch isn’t running, did you forget to start it?\n \n \n (Don’t forget to set an API Key if you want one)\n \n \n \n 🧐\n \n \n \n)\n\nconst App = () => {\n const [apiKey, setApiKey] = useLocalStorage('apiKey')\n // eslint-disable-next-line no-unused-vars\n const [indexes, setIndexes] = React.useState()\n const [isMeiliSearchRunning, setIsMeiliSearchRunning] = React.useState(true)\n const [requireApiKeyToWork, setRequireApiKeyToWork] = React.useState(false)\n const [currentIndex, setCurrentIndex] = useLocalStorage('currentIndex')\n const [client, setClient] = React.useState(\n instantMeiliSearch(baseUrl, apiKey, { primaryKey: 'id' })\n )\n const dialog = useDialogState({ animated: true, visible: false })\n\n const getIndexesList = async () => {\n try {\n const res = await client.MeiliSearchClient.stats()\n const array = Object.entries(res.indexes)\n const options = array.reduce((prev, curr) => {\n const currentOption = { uid: curr[0], stats: curr[1] }\n return [...prev, currentOption]\n }, [])\n\n setIndexes(options)\n if (options.length) {\n if (currentIndex) {\n setCurrentIndex(\n options.find((option) => option.uid === currentIndex.uid)\n )\n } else {\n setCurrentIndex(options[0])\n }\n } else {\n setCurrentIndex(null)\n }\n } catch (error) {\n setCurrentIndex(null)\n console.log(error)\n }\n }\n\n React.useEffect(() => {\n // Check if an API key is required / a masterKey was set\n const fetchWithoutApiKey = async () => {\n try {\n const cl = instantMeiliSearch(baseUrl)\n await cl.MeiliSearchClient.listIndexes()\n } catch (err) {\n if (err.errorCode === 'missing_authorization_header') {\n setRequireApiKeyToWork(true)\n } else {\n try {\n await client.MeiliSearchClient.isHealthy()\n } catch (e) {\n setIsMeiliSearchRunning(false)\n }\n }\n }\n }\n\n fetchWithoutApiKey()\n getIndexesList()\n }, [])\n\n // Check if a modal asking for API Key should be displayed\n React.useEffect(() => {\n const shouldDisplayModal = async () => {\n try {\n const cl = instantMeiliSearch(baseUrl, apiKey)\n await cl.MeiliSearchClient.listIndexes()\n } catch (err) {\n console.log(err)\n dialog.show()\n }\n }\n if (requireApiKeyToWork) shouldDisplayModal()\n }, [requireApiKeyToWork])\n\n // Get the list of indexes\n React.useEffect(() => {\n getIndexesList()\n }, [client])\n\n return (\n \n \n \n \n \n \n {/* */}\n \n {isMeiliSearchRunning ? (\n \n ) : (\n \n )}\n \n \n \n {dialog.visible && (\n \n dialog.hide()} />\n \n )}\n \n \n \n )\n}\n\nexport default App\n","import { createGlobalStyle } from 'styled-components'\n\nconst GlobalStyle = createGlobalStyle`\n html, body {\n margin: 0;\n }\n * {\n font-family: 'Work Sans';\n box-sizing: border-box;\n }\n\n mark, ::selection {\n background-color: ${(p) => p.theme.colors.main.light};\n }\n\n @font-face {\n font-family: 'Work Sans';\n src: url(\"fonts/Work_Sans/light.woff2\") format(\"woff2\");\n font-weight: 300;\n font-style: normal;\n }\n\n @font-face {\n font-family: 'Work Sans';\n src: url(\"fonts/Work_Sans/regular.woff2\") format(\"woff2\");\n font-weight: 400;\n font-style: normal;\n }\n\n @font-face {\n font-family: 'Work Sans';\n src: url(\"fonts/Work_Sans/medium.woff2\") format(\"woff2\");\n font-weight: 500;\n font-style: normal;\n }\n\n @font-face {\n font-family: 'Work Sans';\n src: url(\"fonts/Work_Sans/bold.woff2\") format(\"woff2\");\n font-weight: 700;\n font-style: normal;\n }\n\n @font-face {\n font-family: 'Barlow';\n src: url(\"fonts/Barlow/regular.woff2\") format(\"woff2\");\n font-weight: 400;\n font-style: normal;\n }\n\n`\n\nexport default GlobalStyle\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport { ThemeProvider } from 'styled-components'\n\nimport theme from 'theme'\nimport App from 'App'\nimport GlobalStyle from 'GlobalStyle'\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root')\n)\n"],"sourceRoot":""}