From f2d1ec9c01225477e064cf5b0caa1e01581b5283 Mon Sep 17 00:00:00 2001
From: Chuck Meyer <chuck.meyer@algolia.com>
Date: Sun, 26 Mar 2023 22:56:37 -0400
Subject: [PATCH] Move search to utility func + env config

---
 src/components/Search.jsx     | 8 +++-----
 src/effects/usePokemonData.js | 8 ++------
 src/utilities/algolia.js      | 7 +++++++
 3 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 src/utilities/algolia.js

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index a6ef95e..317ae5f 100644
--- a/src/components/Search.jsx
+++ b/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,
@@ -13,8 +13,6 @@ import { Panel } from './Panel';
 import Header from './Header';
 import Hit from './Hit';
 
-const searchClient = algoliasearch('OKF83BFQS4', '2ee1381ed11d3fe70b60605b1e2cd3f4');
-
 export default function Search() {
   return (
     <div>
@@ -22,12 +20,12 @@ export default function Search() {
       <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">
diff --git a/src/effects/usePokemonData.js b/src/effects/usePokemonData.js
index 8136f51..cbf761a 100644
--- a/src/effects/usePokemonData.js
+++ b/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({
diff --git a/src/utilities/algolia.js b/src/utilities/algolia.js
new file mode 100644
index 0000000..7e3cc6f
--- /dev/null
+++ b/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)