Upgrading react-instantsearch to v5 and updating class and prop names (codesandbox#1273)

vivek12345 · CompuIves · commit 549684390604 · 2018-11-06T13:54:47.000+01:00
* Add @vivek12345 as a contributor * ⬆️ react instantsearch upgraded and css class names and prop names updated
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -652,6 +652,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "vivek12345",
+      "name": "Vivek Nayyar",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/4931048?v=4",
+      "profile": "https://www.viveknayyar.in/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github"
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-67-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-68-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+
 [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors)
 
 ![Banner](https://codesandbox.io/static/img/banner.png)
@@ -50,7 +51,8 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars0.githubusercontent.com/u/1820292?v=4" width="100px;"/><br /><sub><b>Michel Weststrate</b></sub>](https://twitter.com/mweststrate)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mweststrate "Code") | [<img src="https://avatars0.githubusercontent.com/u/52824?v=4" width="100px;"/><br /><sub><b>Oleg</b></sub>](https://kof.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kof "Code") | [<img src="https://avatars0.githubusercontent.com/u/1127037?v=4" width="100px;"/><br /><sub><b>Paul Sherman</b></sub>](https://www.pshrmn.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Apshrmn "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=pshrmn "Code") | [<img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;"/><br /><sub><b>Ro Savage</b></sub>](https://github.com/ro-savage)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ro-savage "Code") | [<img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;"/><br /><sub><b>Sam Denty</b></sub>](https://samdd.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samdenty99 "Code") | [<img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;"/><br /><sub><b>Zephraph</b></sub>](https://github.com/zephraph)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=zephraph "Code") | [<img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;"/><br /><sub><b>Josh Waller</b></sub>](https://www.joshwaller.me)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdxprograms "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Documentation") |
 | [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") | [<img src="https://avatars2.githubusercontent.com/u/3144549?v=4" width="100px;"/><br /><sub><b>Drake Costa</b></sub>](http://www.saeris.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Saeris "Code") | [<img src="https://avatars2.githubusercontent.com/u/433394?v=4" width="100px;"/><br /><sub><b>Marko Stijak</b></sub>](https://cxjs.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mstijak "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/180963?v=4" width="100px;"/><br /><sub><b>Aaron Reisman</b></sub>](https://github.com/lifeiscontent)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Alifeiscontent "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lifeiscontent "Code") [📦](#platform-lifeiscontent "Packaging/porting to new platform") | [<img src="https://avatars2.githubusercontent.com/u/19484365?v=4" width="100px;"/><br /><sub><b>Colton Colcleasure</b></sub>](https://github.com/colshacol)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=colshacol "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Acolshacol "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/497242?v=4" width="100px;"/><br /><sub><b>PJ Walker</b></sub>](https://github.com/PJWalker)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3APJWalker "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=PJWalker "Code") | [<img src="https://avatars2.githubusercontent.com/u/29819102?v=4" width="100px;"/><br /><sub><b>Satya Rohith</b></sub>](https://satya.tech)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/17421347?v=4" width="100px;"/><br /><sub><b>Melanie Seltzer</b></sub>](https://www.melanieseltzer.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=melanieseltzer "Code") |
-| [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;"/><br /><sub><b>Sara Vieira</b></sub>](http://iamsaravieira.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/6137112?v=4" width="100px;"/><br /><sub><b>François Chalifour</b></sub>](https://francoischalifour.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afrancoischalifour "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=francoischalifour "Code") | [<img src="https://avatars2.githubusercontent.com/u/5365325?v=4" width="100px;"/><br /><sub><b>Daniel Vu</b></sub>](https://twitter.com/dvv297)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=dv297 "Code") |
+| [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;"/><br /><sub><b>Sara Vieira</b></sub>](http://iamsaravieira.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/6137112?v=4" width="100px;"/><br /><sub><b>François Chalifour</b></sub>](https://francoischalifour.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afrancoischalifour "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=francoischalifour "Code") | [<img src="https://avatars2.githubusercontent.com/u/5365325?v=4" width="100px;"/><br /><sub><b>Daniel Vu</b></sub>](https://twitter.com/dvv297)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=dv297 "Code") | [<img src="https://avatars3.githubusercontent.com/u/4931048?v=4" width="100px;"/><br /><sub><b>Vivek Nayyar</b></sub>](https://www.viveknayyar.in/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vivek12345 "Code") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Backers
@@ -59,7 +61,6 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 
 <a href="https://opencollective.com/codesandbox#backers" target="_blank"><img src="https://opencollective.com/codesandbox/backers.svg?width=890"></a>
 
-
 ## Sponsors
 
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/codesandbox#sponsor)]
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -171,6 +171,7 @@
     "humps": "CompuIves/humps",
     "immer": "^0.8.5",
     "immutability-helper": "^2.6.6",
+    "instantsearch.css": "^7.1.0",
     "is-url": "^1.2.2",
     "jest-circus": "^22.1.4",
     "jest-snapshot": "^22.1.2",
@@ -213,7 +214,7 @@
     "react-error-overlay": "^1.0.10",
     "react-icons": "^2.2.7",
     "react-inspector": "^2.2.0",
-    "react-instantsearch": "^4.0.6",
+    "react-instantsearch": "^5.3.2",
     "react-loadable": "^3.3.1",
     "react-modal": "^3.3.2",
     "react-motion": "^0.5.0",
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/dependencies.css b/packages/app/src/app/pages/Sandbox/SearchDependencies/dependencies.css
@@ -6,7 +6,7 @@
   background: transparent;
 }
 
-.ais-Pagination__root {
+.ais-Pagination {
   border-radius: 0;
   display: flex;
   justify-content: center;
diff --git a/packages/app/src/app/pages/Search/Filters/Filter/elements.js b/packages/app/src/app/pages/Search/Filters/Filter/elements.js
@@ -7,15 +7,15 @@ export const Container = styled.div`
   border-radius: 2px;
   margin-bottom: 1rem;
 
-  .ais-SearchBox__wrapper {
+  .ais-SearchBox-form {
     margin-bottom: 0.5rem;
   }
 
-  .ais-SearchBox__reset {
+  .ais-SearchBox-reset {
     top: 0.25rem;
   }
 
-  .ais-SearchBox__input {
+  .ais-SearchBox-input {
     font-size: 0.875rem;
     padding-left: 2.5em;
   }
diff --git a/packages/app/src/app/pages/Search/Filters/Filter/index.js b/packages/app/src/app/pages/Search/Filters/Filter/index.js
@@ -19,10 +19,10 @@ class Filter extends Component {
           <Button onClick={this.toggle}>{open ? <Up /> : <Down />}</Button>
         </Title>
         <RefinementList
-          withSearchBox={!noSearch}
+          searchable={!noSearch}
           showMore={!noSearch}
           operator={operator}
-          attributeName={attributeName}
+          attribute={attributeName}
         />
       </Container>
     );
diff --git a/packages/app/src/app/pages/Search/ResultInfo/index.js b/packages/app/src/app/pages/Search/ResultInfo/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stats, ClearAll } from 'react-instantsearch/dom';
+import { Stats, ClearRefinements } from 'react-instantsearch/dom';
 
 import { ClearAllContainer } from './elements';
 
@@ -8,7 +8,7 @@ function ResultInfo() {
     <div style={{ marginBottom: '1rem', fontSize: '.875rem' }}>
       <Stats />
       <ClearAllContainer>
-        <ClearAll />
+        <ClearRefinements />
       </ClearAllContainer>
     </div>
   );
diff --git a/packages/app/src/app/pages/Search/SandboxCard/index.js b/packages/app/src/app/pages/Search/SandboxCard/index.js
@@ -23,7 +23,7 @@ function SandboxCard({ hit }) {
         <Header alignItems="flex-start">
           <Title>
             {hit.title ? (
-              <Highlight attributeName="title" hit={hit} />
+              <Highlight attribute="title" hit={hit} />
             ) : (
               hit.objectID
             )}
@@ -37,7 +37,7 @@ function SandboxCard({ hit }) {
           </TagContainer>
         </Header>
         <Description>
-          <Highlight attributeName="description" hit={hit} />
+          <Highlight attribute="description" hit={hit} />
         </Description>
 
         <SandboxInfo
diff --git a/packages/app/src/app/pages/Search/index.js b/packages/app/src/app/pages/Search/index.js
@@ -13,7 +13,9 @@ import {
   ALGOLIA_DEFAULT_INDEX,
 } from 'common/utils/config';
 
+import 'instantsearch.css/themes/reset.css';
 import './search.css';
+
 import Results from './Results';
 import Filters from './Filters';
 import { Content, StyledTitle, Main } from './elements';
diff --git a/packages/app/src/app/pages/Search/search.css b/packages/app/src/app/pages/Search/search.css
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`background: transparent;`
`7`	`7`	`}`
`8`	`8`
`9`		`-.ais-Pagination__root {`
	`9`	`+.ais-Pagination {`
`10`	`10`	`border-radius: 0;`
`11`	`11`	`display: flex;`
`12`	`12`	`justify-content: center;`
Original file line number	Diff line number	Diff line change
@@ -7,15 +7,15 @@ export const Container = styled.div`
`7`	`7`	`border-radius: 2px;`
`8`	`8`	`margin-bottom: 1rem;`
`9`	`9`
`10`		`- .ais-SearchBox__wrapper {`
	`10`	`+ .ais-SearchBox-form {`
`11`	`11`	`margin-bottom: 0.5rem;`
`12`	`12`	`}`
`13`	`13`
`14`		`- .ais-SearchBox__reset {`
	`14`	`+ .ais-SearchBox-reset {`
`15`	`15`	`top: 0.25rem;`
`16`	`16`	`}`
`17`	`17`
`18`		`- .ais-SearchBox__input {`
	`18`	`+ .ais-SearchBox-input {`
`19`	`19`	`font-size: 0.875rem;`
`20`	`20`	`padding-left: 2.5em;`
`21`	`21`	`}`