index.js

import '../lib/hydrate'
import React from 'react'

import Box from '../components/box'
import Input from '../components/input'
import Card from '../components/card'
import LeafletMap from '../components/map'
import theme from '../lib/theme'
import images from '../lib/images'
import data from '../boulder.json'

export default class Index extends React.Component {
  state = {
    mapCenter: [],
    searchTerm: ''
  }

  static getInitialProps () {
    return {
      places: data.map((item, i) =>
        Object.assign({}, item, {
          image: {
            src: `/static/images/${i + 1 % images.length}.jpg`
          }
        })
      )
    }
  }

  createCard = d => {
    return (
      <Card
        data={d}
        key={d.id}
        onAddressClick={() =>
          this.setState({
            mapCenter: [d.coordinates.latitude, d.coordinates.longitude]
          })}
      />
    )
  }

  filterPlaces = term => {
    const { places } = this.props
    const trimmedTerm = term.trim()
    if (!trimmedTerm) {
      return places.slice(0, 10)
    }

    let filterResult = places.filter(place => {
      return (
        place.name.search(new RegExp(trimmedTerm, 'ig')) > -1 ||
        place.tags.some(t => t.search(new RegExp(trimmedTerm, 'ig')) > -1)
      )
    })
    console.log(filterResult)
    return filterResult
  }

  renderNoResults () {
    return (
      <Box color={theme.colors.gray[6]} p={theme.scale[1]}>
        <h2 css='display: block;'>No Results</h2>
        <Box
          css={`
              &:hover {
                cursor: pointer;
              }
            `}
          color={theme.colors.green[5]}
          fontSize={theme.fontSizes[2]}
          onClick={() => this.setState(() => ({ searchTerm: '' }))}
        >
          Clear Search
        </Box>
      </Box>
    )
  }

  render () {
    const { mapCenter, searchTerm } = this.state
    const filteredPlaces = this.filterPlaces(searchTerm)

    const placeList = filteredPlaces.length
      ? filteredPlaces.map(this.createCard)
      : this.renderNoResults()

    return (
      <Box
        css={`max-width: 960px;`}
        display='flex'
        flex={1}
        direction='column'
        mx='auto'
        my={0}
        w={1}
      >
        <Box flex={'none'} w={1} mt={[0, theme.scale[1]]} mb={theme.scale[1]}>
          <Input
            type='text'
            placeholder='Search'
            p={[2, 2, 2, 2]}
            fontSize={[3, 3, 4, 4]}
            value={searchTerm}
            onChange={({ target: { value = '' } }) =>
              this.setState(() => ({ searchTerm: value }))}
          />
        </Box>
        <Box
          display='flex'
          flex={1}
          direction={['column', 'column', 'row', 'row']}
        >
          <Box flex={['1', '1', '1 0 33%']} order={[1, 1, -1, -1]}>
            {placeList}
          </Box>
          <Box
            display='flex'
            flex={['1 0 420px', '1 0 420px', '1 0 33%']}
            order={[-1, -1, 1, 1]}
            p={theme.scale[1]}
          >
            <LeafletMap data={filteredPlaces} center={mapCenter} />
          </Box>
        </Box>
      </Box>
    )
  }
}