Step zero base

.env.example

@@ -0,0 +1,7 @@
+# Algolia credentials
+# https://www.algolia.com/doc/guides/security/api-keys/#access-control-list-acl
+REACT_APP_ALGOLIA_APP_ID=
+REACT_APP_ALGOLIA_API_KEY=
+REACT_APP_ALGOLIA_INDEX_NAME=
+# Envs
+REACT_APP_USER_TOKEN=AshKetchum

package.json

@@ -18,10 +18,9 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-instantsearch-hooks-web": "^6.40.1",
+    "react-instantsearch-hooks-web": "^6.43.0",
     "react-router-dom": "^6.8.2",
-    "react-scripts": "^5.0.1",
-    "search-insights": "^2.4.0"
+    "react-scripts": "^5.0.1"
   },
   "browserslist": {
     "production": [

src/components/Hit.jsx

@@ -5,10 +5,10 @@ import {
   Highlight,
 } from 'react-instantsearch-hooks-web';
 
-export default function Hit({hit, sendEvent}) {
+export default function Hit({hit}) {
   return (
     <article>
-      <Link to={`card/${hit.objectID}`} onClick={()=>sendEvent('click', hit, 'Card Clicked')}>
+      <Link to={`card/${hit.objectID}`} >
         <img
           className="card"
           src={hit.images.small}
@@ -28,6 +28,5 @@ export default function Hit({hit, sendEvent}) {
 
 Hit.propTypes = {
   hit: PropTypes.object.isRequired,
-  sendEvent: PropTypes.func.isRequired,
 };
 

src/components/Search.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import algoliasearch from 'algoliasearch/lite';
+import { searchClient, indexName } from '../utilities/algolia';
 import {
   Configure,
   Hits,
@@ -8,26 +8,22 @@ import {
   RefinementList,
   SearchBox
 } from 'react-instantsearch-hooks-web';
-import InsightsMiddleware from './InsightsMiddleware';
 import { Panel } from './Panel';
 import Header from './Header';
 import Hit from './Hit';
 
-const searchClient = algoliasearch('OKF83BFQS4', '2ee1381ed11d3fe70b60605b1e2cd3f4');
-
 export default function Search() {
   return (
     <div>
       <Header />
       <div className="container">
         <InstantSearch
           searchClient={searchClient}
-          indexName="pokemon-cards"
+          indexName={indexName}
           routing={true}
         >
-          <InsightsMiddleware />
           <Configure
-            hitsPerPage={12} 
+            hitsPerPage={12}
           />
           <div className="search-panel">
             <div className="search-panel__filters">

src/effects/usePokemonData.js

@@ -1,11 +1,7 @@
-import algoliasearch from "algoliasearch";
+import { searchClient, indexName } from '../utilities/algolia';
 import { useEffect, useState } from "react";
 
-const searchClient = algoliasearch(
-  "OKF83BFQS4",
-  "2ee1381ed11d3fe70b60605b1e2cd3f4"
-);
-const index = searchClient.initIndex("pokemon-cards");
+const index = searchClient.initIndex(indexName);
 
 export const usePokemonData = (cardId) => {
   const [pokemonData, setPokemonData] = useState({

src/utilities/algolia.js

@@ -0,0 +1,7 @@
+import algoliasearch from 'algoliasearch'
+
+export const appId = process.env.REACT_APP_ALGOLIA_APP_ID || ''
+export const appKey = process.env.REACT_APP_ALGOLIA_API_KEY || ''
+export const indexName = process.env.REACT_APP_ALGOLIA_INDEX_NAME || ''
+export const userToken = process.env.REACT_APP_USER_TOKEN || ''
+export const searchClient = algoliasearch(appId, appKey)