Musicbrainz Demo

package.json

@@ -8,6 +8,7 @@
     "babel-loader": "9.1.3",
     "color": "^4.2.3",
     "eslint-plugin-import": "^2.29.1",
+    "instantsearch.js": "^4.68.0",
     "meilisearch": "^0.38.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
@@ -43,6 +44,7 @@
     "defaults"
   ],
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
     "@storybook/addon-actions": "^8.0.10",
     "@storybook/addon-essentials": "^8.0.10",
     "@storybook/addon-links": "^8.0.10",

src/App.js

@@ -1,24 +1,15 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 /* eslint-disable no-console */
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { instantMeiliSearch as instantMeilisearch } from '@meilisearch/instant-meilisearch'
-import { useDialogState } from 'reakit/Dialog'
 import { MeiliSearch as Meilisearch } from 'meilisearch'
 
 import ApiKeyContext from 'context/ApiKeyContext'
+import { ArtistsProvider } from 'context/ArtistsContext'
 import { useMeilisearchClientContext } from 'context/MeilisearchClientContext'
 import useLocalStorage from 'hooks/useLocalStorage'
-import ApiKeyModalContent from 'components/ApiKeyModalContent'
 import Body from 'components/Body'
-import CloudBanner from 'components/CloudBanner'
-import Modal from 'components/Modal'
-import NoMeilisearchRunning from 'components/NoMeilisearchRunning'
-import ApiKeyAwarenessBanner from 'components/ApiKeyAwarenessBanner'
-import getIndexesListWithStats from 'utils/getIndexesListWithStats'
-import shouldDisplayCloudBanner from 'utils/shouldDisplayCloudBanner'
-import shouldDisplayApiKeyModal from 'utils/shouldDisplayApiKeyModal'
-import hasAnApiKeySet from 'utils/hasAnApiKeySet'
 import clientAgents from './version/client-agents'
 
 export const baseUrl =
@@ -27,63 +18,18 @@ export const baseUrl =
     ? 'http://0.0.0.0:7700'
     : window.location.origin)
 
+export const apiKey = process.env.REACT_APP_MEILI_API_KEY
+
 const Wrapper = styled.div`
   background-color: ${(p) => p.theme.colors.gray[11]};
   min-height: 100vh;
 `
 
 const App = () => {
-  const [apiKey, setApiKey] = useLocalStorage('apiKey')
-  const [indexes, setIndexes] = useState()
-  const [isMeilisearchRunning, setIsMeilisearchRunning] = useState(false)
-  const [requireApiKeyToWork, setRequireApiKeyToWork] = useState(false)
   const [currentIndex, setCurrentIndex] = useLocalStorage('currentIndex')
-  const [showCloudBanner, setShowCloudBanner] = useState(false)
-  const [isApiKeyBannerVisible, setIsApiKeyBannerVisible] = useState(false)
-  const dialog = useDialogState({ animated: true, visible: false })
-
-  const {
-    meilisearchJsClient,
-    setMeilisearchJsClient,
-    setInstantMeilisearchClient,
-  } = useMeilisearchClientContext()
 
-  const getIndexesList = useCallback(async () => {
-    try {
-      const indexesList = await getIndexesListWithStats(meilisearchJsClient)
-      setIndexes(indexesList)
-      if (indexesList && indexesList?.length > 0) {
-        setCurrentIndex(
-          currentIndex
-            ? indexesList.find((option) => option.uid === currentIndex.uid)
-            : indexesList[0]
-        )
-      } else {
-        setCurrentIndex(null)
-      }
-    } catch (error) {
-      setCurrentIndex(null)
-      console.log(error)
-    }
-  }, [meilisearchJsClient, currentIndex])
-
-  // Check if the API key is present on the url then put it in the local storage
-  const getApiKeyFromUrl = useCallback(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const apiKeyParam = urlParams.get('api_key')
-    if (apiKeyParam) {
-      setApiKey(apiKeyParam)
-      setIsApiKeyBannerVisible(true)
-    }
-  }, [])
-
-  useEffect(() => {
-    const shouldCloudBannerBeDisplayed = shouldDisplayCloudBanner()
-    if (shouldCloudBannerBeDisplayed) {
-      setShowCloudBanner(shouldCloudBannerBeDisplayed)
-    }
-    getApiKeyFromUrl()
-  }, [])
+  const { setMeilisearchJsClient, setInstantMeilisearchClient } =
+    useMeilisearchClientContext()
 
   useEffect(() => {
     setInstantMeilisearchClient(
@@ -102,51 +48,14 @@ const App = () => {
     )
   }, [apiKey])
 
-  useEffect(() => {
-    const onClientUpdate = async () => {
-      const isInstanceRunning = await meilisearchJsClient.isHealthy()
-      setIsMeilisearchRunning(isInstanceRunning)
-      if (isInstanceRunning) {
-        setRequireApiKeyToWork(await hasAnApiKeySet())
-        dialog.setVisible(await shouldDisplayApiKeyModal(meilisearchJsClient))
-        getIndexesList()
-      }
-    }
-    onClientUpdate()
-  }, [meilisearchJsClient])
-
   return (
-    <ApiKeyContext.Provider value={{ apiKey, setApiKey }}>
-      <Wrapper>
-        {isApiKeyBannerVisible && (
-          <ApiKeyAwarenessBanner
-            onClose={() => setIsApiKeyBannerVisible(false)}
-          />
-        )}
-        {showCloudBanner && <CloudBanner />}
-        {isMeilisearchRunning ? (
-          <Body
-            currentIndex={currentIndex}
-            indexes={indexes}
-            setCurrentIndex={setCurrentIndex}
-            requireApiKeyToWork={requireApiKeyToWork}
-            getIndexesList={getIndexesList}
-            isApiKeyBannerVisible={isApiKeyBannerVisible}
-          />
-        ) : (
-          <NoMeilisearchRunning />
-        )}
-        <Modal
-          title={`Enter your admin API key${
-            requireApiKeyToWork ? '' : ' (optional)'
-          }`}
-          dialog={dialog}
-          ariaLabel="ask-for-api-key"
-        >
-          <ApiKeyModalContent closeModal={() => dialog.hide()} />
-        </Modal>
-      </Wrapper>
-    </ApiKeyContext.Provider>
+    <ArtistsProvider>
+      <ApiKeyContext.Provider value={{ apiKey }}>
+        <Wrapper>
+          <Body currentIndex={currentIndex} setCurrentIndex={setCurrentIndex} />
+        </Wrapper>
+      </ApiKeyContext.Provider>
+    </ArtistsProvider>
   )
 }
 

src/components/Body.js

@@ -2,16 +2,15 @@ import React from 'react'
 import { InstantSearch } from 'react-instantsearch-dom'
 
 import { useMeilisearchClientContext } from 'context/MeilisearchClientContext'
+import { useArtists } from 'context/ArtistsContext'
 import Box from 'components/Box'
 import Header from 'components/Header/index'
 import BodyWrapper from 'components/BodyWrapper'
 import EmptyView from 'components/EmptyView'
-import OnBoarding from 'components/OnBoarding'
 import Results from 'components/Results'
 import Typography from 'components/Typography'
 
 const IndexContent = ({ currentIndex }) => {
-  if (!currentIndex) return <OnBoarding />
   if (currentIndex?.stats?.numberOfDocuments > 0) return <Results />
   return (
     <EmptyView buttonLink="https://docs.meilisearch.com/reference/api/documents.html">
@@ -27,42 +26,40 @@ const IndexContent = ({ currentIndex }) => {
   )
 }
 
-const Body = ({
-  currentIndex,
-  indexes,
-  getIndexesList,
-  setCurrentIndex,
-  requireApiKeyToWork,
-  isApiKeyBannerVisible,
-}) => {
+const Body = ({ currentIndex, getIndexesList, setCurrentIndex }) => {
   const { meilisearchJsClient, instantMeilisearchClient } =
     useMeilisearchClientContext()
+  const { setArtists } = useArtists()
 
   return (
     <InstantSearch
-      indexName={currentIndex ? currentIndex.uid : ''}
+      indexName={currentIndex.uid}
       searchClient={instantMeilisearchClient}
+      onSearchStateChange={(searchState) => {
+        const index = meilisearchJsClient.index('artists')
+        const search = index.search(searchState.query, {
+          attributesToHighlight: ['artist'],
+        })
+        search.then((s) => setArtists(s.hits))
+      }}
     >
       <Header
-        indexes={indexes}
-        currentIndex={currentIndex}
         setCurrentIndex={setCurrentIndex}
-        requireApiKeyToWork={requireApiKeyToWork}
         client={meilisearchJsClient}
         refreshIndexes={getIndexesList}
-        isBannerVisible={isApiKeyBannerVisible}
       />
       <BodyWrapper>
-        {/* <Sidebar /> */}
-        <Box
-          width={928}
-          m="0 auto"
-          py={4}
-          display="flex"
-          flexDirection="column"
-        >
-          <IndexContent currentIndex={currentIndex} />
-        </Box>
+        <>
+          <Box
+            width={928}
+            m="0 auto"
+            py={4}
+            display="flex"
+            flexDirection="column"
+          >
+            <IndexContent currentIndex={currentIndex} />
+          </Box>
+        </>
       </BodyWrapper>
     </InstantSearch>
   )