GoogleAutoComplete.jsx

const InitialItem = ({ pickUp, dropOff, Icon, onClick, rating }) =>
  <div className="Initial__item" onClick={onClick}>
    <div className={'Initial__cont'}>
      {Icon}
      <div className={'Initial__adress'}>
        {dropOff && <div className={'Initial__marker'}>
          <div className={'marker__typeBorder'}/>
          <div className={'marker__typeDot'}/>
          <div className={'marker__typeDot'}/>
          <div className={'marker__typeCircle'}/>
        </div>}
        <div className="initial__row">
          {dropOff && <p className={'Initial__date'}> date </p>}
          {rating &&
          <div className="initial__rating">{Rating(rating, 'initial__ratingStar')}</div>}
        </div>
        <p className={'Initial__pickUp'}>{pickUp}</p>
        {dropOff && <p className={'Initial__pickUp'}>{dropOff}</p>}
      </div>
    </div>
  </div>;

class GoogleAutoComplete extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      startPosition: true,
      destination: '',
      origin: ''
    };
  }

  setPosition = (coordinates) => {
    const isPickupDropOffPresent = coordinates.pickUp && coordinates.pickUp.coordinates && coordinates.dropOff && coordinates.dropOff.coordinates;
    if (!isPickupDropOffPresent) {
      return;
    }
    store.dispatch({
      type: 'setMapProps',
      props: {
        origin: {
          lat: coordinates.pickUp.coordinates.latitude,
          lng: coordinates.pickUp.coordinates.longitude
        },
        destination: {
          lat: coordinates.dropOff.coordinates.latitude,
          lng: coordinates.dropOff.coordinates.longitude
        }
      }
    });
    this.paveRoad();
  };

  handleClick = (location) => {
    const pointType = this.state.startPosition ? 'destination' : 'origin';
    this.setState({
      [pointType]: location.id
    });
    this.handleLocationChange(pointType)({
      lat: location.geometry.coordinates[1],
      lng: location.geometry.coordinates[0]
    });
    this.paveRoad();
  };

  handleLocationChange = property => (coordinates) => {
    this.setState({
      [property]: coordinates.id
    });
    const isCoordinatesPresent = coordinates.lat && coordinates.lng;
    if (!isCoordinatesPresent) {
      return null;
    }
    store.dispatch({
      type: 'setMapProps',
      props: { [property]: { lat: coordinates.lat, lng: coordinates.lng } }
    });
    this.paveRoad();
  };

  handlePosition = (startPosition) => () => {
    this.setState({
      startPosition
    });
    this.paveRoad();
  };

  recentTrips = () => {
    if (!this.props.recentTrips) {
      return null;
    }
    return (
      this.props.recentTrips
        .filter((recentTrip, key) => key < 2)
        .map((recentTrip) => {
          return (
            <InitialItem
              key={recentTrip._id}
              pickUp={recentTrip.pickUpLocation.fullAddress}
              dropOff={recentTrip.dropOffLocation.fullAddress}
              Icon={() => (<RecentTrips className={'Initial__icon'}/>)}
              onClick={() => this.setPosition({
                pickUp: recentTrip.pickUpLocation.geometry,
                dropOff: recentTrip.dropOffLocation.geometry
              })}
              rating={4}
            />
          );
        })
    );
  };

  paveRoad = () => {
    this.props.onPavedRoad();
  };

  favoritesPositions = () => {
    if (!this.props.locationDetails) {
      return null;
    }
    return (
      this.props.locationDetails.map((favoriteLocation) =>
        <InitialItem
          key={favoriteLocation.id}
          pickUp={favoriteLocation.fullAddress}
          Icon={<FavoritePositionIcon className={'Initial__icon'}/>}
          onClick={() => this.handleClick(favoriteLocation)}
        />)
    );
  };

  render() {
    return (
      <div className={'locationContainer'}>
        <PlacePredictionsAutoComplete
          value={this.state.pickup}
          handleChange={this.handleLocationChange('destination')}
          favoriteLocations={this.props.locationDetails}
          recentTrips={this.props.recentTrips}
          iconClass={'greenFill autoComplete__marker'}
          placeholder={'Choose starting point'}
          onHandlePosition={this.handlePosition(true)}
        />

        <div className={'divider'}>
          <div className={'divider__item'}/>
          <div className={'divider__item'}/>
          <div className={'divider__item'}/>
        </div>

        <PlacePredictionsAutoComplete
          value={this.state.pickup}
          handleChange={this.handleLocationChange('origin')}
          favoriteLocations={this.props.locationDetails}
          recentTrips={this.props.recentTrips}
          iconClass={'redFill autoComplete__marker'}
          placeholder={'Choose destination'}
          onHandlePosition={this.handlePosition(false)}
        />

        <div className={'tripsList__container'}>
          <section className={'tripsList'}>
            <p className={'tripsList__title'}>Recent Trips</p>
            {this.recentTrips()}
          </section>

          <section className={'tripsList'}>
            <p className={'tripsList__title'}>Favorites</p>
            {this.favoritesPositions()}
          </section>
        </div>
      </div>
    );
  }
}

export default GoogleAutoComplete;

MainMenu.jsx

import * as classNames from 'classnames'
import * as React from 'react'
import * as icons from '../icons/main-menu'
// import { Route } from 'react-router-dom'

const MenuItem = ({IconComponent, text, activeRoute}: {IconComponent: (props: {className: 'string'}) => any, text: string, activeRoute: string}) => {
  const active = false;
  const iconClasses = classNames({'svg-green': active, 'svg-dark-grey': !active})
  const textClasses = classNames({'font-green': active, 'font-dark-grey': !active})
  return (
    <div className='MainMenu__MenuItem pl2 pt1 flex items-center'>
      <div className='mr2'>
        <IconComponent className={iconClasses}/>
      </div>
      <div className='flex-auto'>
        <p className={textClasses}>{text}</p>
      </div>
    </div>
  )
}

const MainMenu = () => {
  return (
    <section className='MainMenu border-light-grey'>
      <div className='MainMenu__Header bg-green pl2 pt1 pb1'>
        <icons.Logo />
      </div>
      <div className='bb-grey'>
        <MenuItem IconComponent={icons.Trips} text={'Trips'} activeRoute={'/trips'}/>
      </div>
      <div className='bb-grey'>
        <MenuItem IconComponent={icons.Dashboard} text={'Dashboard'} activeRoute={'/dashboard'}/>
        <MenuItem IconComponent={icons.TripHistory} text={'Trip history'} activeRoute={'/trip-history'}/>
        <MenuItem IconComponent={icons.BillingActivity} text={'Billing activity'} activeRoute={'/billing-activity'}/>
        <MenuItem IconComponent={icons.Feedback} text={'Feedback'} activeRoute={'/feedback'}/>
        <MenuItem IconComponent={icons.GoinZones} text={'Goin zones'} activeRoute={'/goin-zones'}/>
      </div>
      <div className='bb-grey'>
        <MenuItem IconComponent={icons.Riders} text={'Riders'} activeRoute={'/riders'}/>
        <MenuItem IconComponent={icons.Membership} text={'Membership Requests'} activeRoute={'/membership-requests'}/>
      </div>
      <div className='bb-grey'>
        <MenuItem IconComponent={icons.Organizations} text={'Organizations'} activeRoute={'/organizations'}/>
        <MenuItem IconComponent={icons.Services} text={'Services'} activeRoute={'/services'}/>
        <MenuItem IconComponent={icons.TeamMembers} text={'Team Members'} activeRoute={'/team-members'}/>
      </div>
      <div className='bb-grey'>
        <MenuItem IconComponent={icons.Providers} text={'Providers'} activeRoute={'/providers'}/>
        <MenuItem IconComponent={icons.Drivers} text={'Drivers'} activeRoute={'/drivers'}/>
        <MenuItem IconComponent={icons.Vehicles} text={'Vehicles'} activeRoute={'/vehicles'}/>
      </div>
    </section>
  )
}

export default MainMenu



import * as React from 'react';
import {IRiderObject, IRiderListProps, IRiderListItemProps} from '../types'
import {BeatLoader} from 'react-spinners'

const RiderListItem = ({rider}: IRiderListItemProps) => {
  return (
    <div className='pl1 border-bottom border-silver flex'>
      <p>
        {rider.firstName} {rider.lastName}
      </p>
    </div>
  )
}

const RiderList = ({isFetching, riders, onClick, onClickWithError}: IRiderListProps) => {
  const riderMarkup: JSX.Element[] = riders.map(
    (rider: IRiderObject) => <RiderListItem rider={rider} key={`rider-item-${rider.id}`} />)


  if (!riders.length) {
    riderMarkup.push(<p className='p2' key='no-riders'>No riders</p>)
  }

  return (
    <div className='RiderList'>
      <div className='overflow-hidden border rounded border-silver mb2'>
        <div className='p2 bold white bg-blue'>
          Riders
        </div>
        {riderMarkup}
      </div>
      {isFetching ?
       <BeatLoader color={'#8C36D7'} loading={isFetching} />
       :
        <div>
          <button className='btn btn-primary mr2' onClick={onClick}>Fetch Riders</button>
          <button className='btn btn-primary' onClick={onClickWithError}>Simulate Fetch Error</button>
        </div>
      }
    </div>
  )
}
export default RiderList;


	

MaterialCheckboxGroup.jsx

import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox, FormControlLabel, FormGroup, FormHelperText, FormLabel } from 'material-ui';
+
+export default function MaterialCheckboxGroup(props) {
+  const { label, error, helperText, options, values, onChange, isChecked, containerClassName } = props;
+  return (
+    <FormGroup className={containerClassName}>
+      <FormLabel component="legend">{label}</FormLabel>
+      <FormHelperText error={error}>{helperText}</FormHelperText>
+      {
+        options.map(it => {
+          return (
+            <FormControlLabel
+              key={it.value}
+              control={
+                <Checkbox
+                  checked={isChecked(values, it.value)}
+                  onChange={onChange}
+                  value={it.value}
+                />
+              }
+              label={it.label}
+            />
+          );
+        })
+      }
+    </FormGroup>
+  );
+}
+
+MaterialCheckboxGroup.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })).isRequired,
+  values: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onChange: PropTypes.func.isRequired,
+  isChecked: PropTypes.func,
+  label: PropTypes.string,
+  containerClassName: PropTypes.string,
+  helperText: PropTypes.string,
+  error: PropTypes.bool
+};
+
+MaterialCheckboxGroup.defaultProps = {
+  options: [],
+  isChecked: (values, value) => values.includes(value)
+};