SHARE
TWEET

Untitled

a guest Dec 14th, 2018 45 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React  from 'react';
  2. import withAuthorization from './withAuthorization';
  3. import * as firebase from 'firebase';
  4. import {database, } from '../firebase/firebase';
  5. import Image from 'react-image-resizer';
  6. import{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";
  7. import { orderBy } from "lodash";
  8.  
  9.  
  10. function addToCollection({hit}) {
  11.   console.log('-----');
  12.   console.log('The selected item is:', hit);
  13.   console.log('------');
  14. }
  15.  
  16. const Hit = ({hit}) =>
  17.   <div className="hit">
  18.     <div className="hit-image">
  19.       <img src={hit.avatarURL} height={150} width={150}/>
  20.     </div>
  21.     <div className="hit-content">
  22.       <div className="hit-marque">
  23.         {hit.marque}
  24.       </div>
  25.       <div className="hit-numero">
  26.         {hit.numero}
  27.       </div>
  28.       <div className="hit-marquesuite">
  29.         {hit.marquesuite}
  30.       </div>
  31.       <div className="hit-reference">
  32.         {hit.reference}
  33.       </div>
  34.       <div className="hit-cote">
  35.         {hit.cote}
  36.       </div>
  37.       <button className="btn btn-success" onClick={addToCollection}>Ajouter à ma collection</button>
  38.     </div>
  39.   </div>
  40.  
  41. const Content = () =>
  42.   <div className="content container-fluid text-center">
  43.     <div className="row">
  44.       <div className="col-lg">
  45.         <Hits hitComponent={Hit} key ={Hit}/>
  46.       </div>
  47.     </div>
  48.   </div>
  49.  
  50. class Catalogue extends React.Component {
  51.   constructor(){
  52.     super();
  53.     this.state = {
  54.       catalogue: {},
  55.     };
  56.  
  57.  
  58.   }
  59.  
  60.   render(){
  61.  
  62.     if(this.state.catalogue === null) {
  63.       return  <p>Le catalogue est vide</p>
  64.  
  65.     }
  66.  
  67.       return (
  68.         <div class="container-fluid">
  69.           <h1 className="text-center">Catalogue de capsule</h1>
  70.           <h4 className="text-center">Rechercher une capsule</h4>
  71.           <InstantSearch
  72.             apiKey="a8de2c61b98e1ca62a5df03f1970f46a"
  73.             appId="7H3CTF406R"
  74.             indexName="catalogue">
  75.  
  76.  
  77.             <SearchBox translation={{placeholder:'Rechercher une capsule'}} width="500 px"/>
  78.  
  79.  
  80.  
  81.             <Content />    
  82.  
  83.  
  84.           </InstantSearch>
  85.  
  86.         </div>
  87.       );
  88.   }
  89. }
  90.  
  91. const authCondition = (authUser) => !!authUser;
  92.  
  93. export default withAuthorization(authCondition)(Catalogue);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top