daily pastebin goal
4%
SHARE
TWEET

Untitled

a guest Oct 12th, 2017 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import styled from 'styled-components';
  3. import { Grid } from 'react-flexbox-grid';
  4. import BodyClassName from 'react-body-classname';
  5.  
  6. import CompassDevelopmentLogo from './CompassDevelopmentLogo';
  7. import Discover from './Discover';
  8. import Card from './Card';
  9. import { get } from '../../api';
  10.  
  11. const Cards = styled.div`
  12.   margin: 4rem;
  13. `;
  14.  
  15. function formatLocation(location) {
  16.   return [location.subLocalityName, location.street, location.house]
  17.     .filter(item => !!item)
  18.     .join(', ');
  19. }
  20.  
  21. class List extends Component {
  22.   constructor(props) {
  23.     super(props);
  24.     this.state = {};
  25.   }
  26.  
  27.   componentDidMount() {
  28.     get('/complexes?filter[state]=public').then(({ items: complexes }) => {
  29.       this.setState({ complexes });
  30.     });
  31.   }
  32.  
  33.   render() {
  34.     const { complexes = [] } = this.state;
  35.  
  36.     return (
  37.       <BodyClassName className="complexes">
  38.         <div>
  39.           <CompassDevelopmentLogo />
  40.           <Discover />
  41.           <Cards>
  42.             <Grid>
  43.               {complexes.map(complex =>
  44.                 (<Card
  45.                   key={complex.id}
  46.                   id={complex.id}
  47.                   location={formatLocation(complex.location)}
  48.                   title={`${complex.name}`}
  49.                   image={`https://images.site.com/${complex.images[0].id}-site-512`}
  50.                 />),
  51.               )}
  52.             </Grid>
  53.           </Cards>
  54.         </div>
  55.       </BodyClassName>
  56.     );
  57.   }
  58. }
  59.  
  60. export default List;
RAW Paste Data
Top