gistfile1.txt

import React from 'react';
import ReactDOM from 'react-dom';
import { graphql } from 'react-apollo';
import PropTypes from 'prop-types';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import allLocations from '../queries/all_locations.gql';

@graphql(allLocations)
class Sidebar extends React.Component {

    static propTypes = {
        data: PropTypes.shape({
            loading: PropTypes.bool.isRequired,
            error: PropTypes.object.isRequired,
            allLocations: PropTypes.arrayOf(
                PropTypes.shape({
                    name: PropTypes.string.isRequired,
                    id: PropTypes.number.isRequired,
                }),
            ),
        }),
    }

    render() {
        if (this.props.data.loading) {
            return (<div>Loading</div>)
        }

        if (this.props.data.error) {
            console.log(this.props.data.error)
            return (<div>An unexpected error occurred</div>)
        }
        return (
            <Drawer docked={true} style={{ width: 125 }}>
                {this.props.data.allLocations.map(location =>
                    <MenuItem key={location.id}>{location.name}</MenuItem>
                )}
            </Drawer>
        )
    }


}

export default Sidebar;