From 1b0ecabd068e12c3e26cdbb8270806c2046f413f Mon Sep 17 00:00:00 2001
From: Samuel Vaillant <samuel.vllnt@gmail.com>
Date: Mon, 9 Jul 2018 17:37:37 +0200
Subject: [PATCH] feat(templates): Use `searchClient` in React
 (algolia/create-instantsearch-app#113)

---
 scripts/__snapshots__/e2e-templates.test.js.snap | 12 +++++++-----
 src/templates/React InstantSearch/package.json   |  1 +
 src/templates/React InstantSearch/src/App.js.hbs | 12 +++++++-----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/scripts/__snapshots__/e2e-templates.test.js.snap b/scripts/__snapshots__/e2e-templates.test.js.snap
index c2722694e3..aec9ce98c5 100644
--- a/scripts/__snapshots__/e2e-templates.test.js.snap
+++ b/scripts/__snapshots__/e2e-templates.test.js.snap
@@ -3761,6 +3761,7 @@ exports[`Templates React InstantSearch File content: src/App.css 1`] = `
 
 exports[`Templates React InstantSearch File content: src/App.js 1`] = `
 "import React, { Component } from 'react';
+import algoliasearch from 'algoliasearch/lite';
 import {
   InstantSearch,
   Hits,
@@ -3772,6 +3773,11 @@ import {
 import PropTypes from 'prop-types';
 import './App.css';
 
+const searchClient = algoliasearch(
+ 'appId',
+ 'apiKey'
+);
+
 class App extends Component {
   render() {
     return (
@@ -3789,11 +3795,7 @@ class App extends Component {
         </header>
 
         <div className=\\"container\\">
-          <InstantSearch
-            appId=\\"appId\\"
-            apiKey=\\"apiKey\\"
-            indexName=\\"indexName\\"
-          >
+          <InstantSearch searchClient={searchClient} indexName=\\"indexName\\">
             <div className=\\"search-panel\\">
               <div className=\\"search-panel__filters\\">
                 <RefinementList attribute=\\"facet1\\" />
diff --git a/src/templates/React InstantSearch/package.json b/src/templates/React InstantSearch/package.json
index 5c57833ae9..82bee331eb 100644
--- a/src/templates/React InstantSearch/package.json	
+++ b/src/templates/React InstantSearch/package.json	
@@ -9,6 +9,7 @@
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
+    "algoliasearch": "3.29.0",
     "react": "16.4.1",
     "react-dom": "16.4.1",
     "react-instantsearch-dom": "{{libraryVersion}}",
diff --git a/src/templates/React InstantSearch/src/App.js.hbs b/src/templates/React InstantSearch/src/App.js.hbs
index c9194317f6..ed936812db 100644
--- a/src/templates/React InstantSearch/src/App.js.hbs	
+++ b/src/templates/React InstantSearch/src/App.js.hbs	
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import algoliasearch from 'algoliasearch/lite';
 import {
   InstantSearch,
   Hits,
@@ -14,6 +15,11 @@ import {
 import PropTypes from 'prop-types';
 import './App.css';
 
+const searchClient = algoliasearch(
+ '{{appId}}',
+ '{{apiKey}}'
+);
+
 class App extends Component {
   render() {
     return (
@@ -31,11 +37,7 @@ class App extends Component {
         </header>
 
         <div className="container">
-          <InstantSearch
-            appId="{{appId}}"
-            apiKey="{{apiKey}}"
-            indexName="{{indexName}}"
-          >
+          <InstantSearch searchClient={searchClient} indexName="{{indexName}}">
             <div className="search-panel">
               {{#if attributesForFaceting}}
               <div className="search-panel__filters">