index.js

import React from 'react';
import ReactDOM from 'react-dom';

import ListPage from "./pages/List/List.js";
import MapPage from "./pages/Map/Map.js";

import { Router, Route } from 'react-router';
import { history } from 'history';

ReactDOM.render(
  <Router
    forceFetch={true}
    history={history}>
    <Route
        path="/"
        component={ListPage}
    />
    <Route
        path="map"
        component={MapPage}
    />
  </Router>
  ,
  document.getElementById('root')
);

ItemsInList.js

import React, { Component } from 'react';

import Item from '../Item/Item.js';

export default class ItemsInList extends Component {

  shouldComponentUpdate(nextProps, nextState) {
    return (nextProps.items.length !== this.props.items.length);
  }

  render () {
    const items = this.props.items;
    const addressNodes = items ? items.map((edge) => {
      const key = `AddressList-${edge._id}`;
      return (
        <Item
            key={key}
            item={edge}
            />
      )
    }) : '';
    return (
      <div>
        <h2>Addresses</h2>
        <ul className="AddressList" key="AddressList">
          {addressNodes}
        </ul>
      </div>
    );
  }
}

ItemsOnMap.js

import React, { Component } from 'react';

import MapMarker from '../MapMarker/MapMarker.js';
import MapCommon from '../MapCommon/MapCommon.js'
import MarkerInfo from '../MarkerInfo/MarkerInfo.js'

export default class ItemsOnMap extends Component {

  constructor (props) {
    super(props);
    this.state = {
      items: [],
      hasLocation: false,
      position: {
        lat: 51.505,
        lng: -0.09,
      },
      zoom: 1
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    var toUpdate = false;
    toUpdate = toUpdate || (nextProps.items.length !== this.props.items.length);
    toUpdate = toUpdate || (nextState.position !== this.state.position);
    return toUpdate;
  }

  handleLocationFound(e) {
    this.setState({
      hasLocation: true,
      position: e.latlng,
      zoom: 14
    });
  }

  componentDidMount() {
    const map = this.refs.map.refs.map;
    map.leafletElement.locate();
  }

  render () {
    var _map = this;
    const center = [60.1696, 24.9334];
    const items = this.props.items;
    const markers = items ? items.map((edge) => {
      const key = `MapMarker-${edge._id}`;
      return (
        <MapMarker
            key={key}
            item={edge}
            />
      )
    }) : '';

    return (
      <div style={{height: '100%'}}>
        <MapCommon
          center={this.state.position}
          zoom={this.state.zoom}
          onLocationfound={this.handleLocationFound.bind(this)}
          ref="map"
          height="50%"
          >
          {markers}
        </MapCommon>
        <MarkerInfo/>
      </div>
    )
  }
  _onMapCreated (map, L) {
    this.map = map;
  }
};

List.js

import React, { Component } from 'react';

import DocumentTitle from 'react-document-title';

import ItemsInList from "../../modules/ItemsInList/ItemsInList.js";
import Header from '../../modules/Header/Header.js';

import Page, {apiURL, token} from '../../modules/Page/Page.js';

import request from 'superagent';

export default class ListPage extends Component {

  constructor (props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentWillMount () {
    request.get(`${apiURL}/items?token=${token}`)
      .end( (err, res) => {
        this.setState({
          items: JSON.parse(res.text)
        });
      })
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (nextState.items.length !== this.state.items.length);
  }

  render () {
    return (
      <DocumentTitle title="All the addresses">
        <div>
          <Header currentPage={1}/>
          <ItemsInList items={this.state.items}/>
        </div>
      </DocumentTitle>
    )
  }

}

Map.js

import React, { Component } from 'react';

import DocumentTitle from 'react-document-title';
import request from 'superagent';

import Header from '../../modules/Header/Header.js';
import ItemsOnMap from '../../modules/ItemsOnMap/ItemsOnMap.js';

import Page, {apiURL, token} from '../../modules/Page/Page.js';

import styles from './Map.css';

export default class MapPage extends Component {

  constructor (props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentWillMount () {
    request.get(`${apiURL}/items?token=${token}`)
      .end( (err, res) => {
        this.setState({
          items: JSON.parse(res.text)
        });
      })
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (nextState.items.length !== this.state.items.length);
  }

  render() {
    return (
      <DocumentTitle title="All the items on map">
        <div className="MapBox">
          <Header currentPage={0}/>
          <ItemsOnMap items={this.state.items}/>
        </div>
      </DocumentTitle>
    )
  }

};