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,
            allLocations: PropTypes.arrayOf(
                PropTypes.shape({
                    name: PropTypes.string.isRequired,
                    id: PropTypes.number.isRequired,
                }),
            ),
        }),
    }

    render() {
        console.log(this.props);
        const { data: { loading, error, todos } } = this.props;
        if (data.loading) {
            return (<div>Loading Cities...</div>)
        } else if (error) {
            return (<div>Unable to load cities!</div>)
        } else {
            return (
                <Drawer docked={true} style={{ width: 125 }}>
                    {data.allLocations.map(location =>
                        <MenuItem key={location.id}>{location.name}</MenuItem>
                    )}
                </Drawer>
            )
        }
    }

}

export default Sidebar;