Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import withAuthorization from './withAuthorization';
- import * as firebase from 'firebase';
- import {database, } from '../firebase/firebase';
- import Image from 'react-image-resizer';
- import{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";
- import { orderBy } from "lodash";
- function addToCollection({hit}) {
- console.log('-----');
- console.log('The selected item is:', hit);
- console.log('------');
- }
- const Hit = ({hit}) =>
- <div className="hit">
- <div className="hit-image">
- <img src={hit.avatarURL} height={150} width={150}/>
- </div>
- <div className="hit-content">
- <div className="hit-marque">
- {hit.marque}
- </div>
- <div className="hit-numero">
- {hit.numero}
- </div>
- <div className="hit-marquesuite">
- {hit.marquesuite}
- </div>
- <div className="hit-reference">
- {hit.reference}
- </div>
- <div className="hit-cote">
- {hit.cote}
- </div>
- <button className="btn btn-success" onClick={addToCollection}>Ajouter à ma collection</button>
- </div>
- </div>
- const Content = () =>
- <div className="content container-fluid text-center">
- <div className="row">
- <div className="col-lg">
- <Hits hitComponent={Hit} key ={Hit}/>
- </div>
- </div>
- </div>
- class Catalogue extends React.Component {
- constructor(){
- super();
- this.state = {
- catalogue: {},
- };
- }
- render(){
- if(this.state.catalogue === null) {
- return <p>Le catalogue est vide</p>
- }
- return (
- <div class="container-fluid">
- <h1 className="text-center">Catalogue de capsule</h1>
- <h4 className="text-center">Rechercher une capsule</h4>
- <InstantSearch
- apiKey="a8de2c61b98e1ca62a5df03f1970f46a"
- appId="7H3CTF406R"
- indexName="catalogue">
- <SearchBox translation={{placeholder:'Rechercher une capsule'}} width="500 px"/>
- <Content />
- </InstantSearch>
- </div>
- );
- }
- }
- const authCondition = (authUser) => !!authUser;
- export default withAuthorization(authCondition)(Catalogue);
Add Comment
Please, Sign In to add comment