gistfile1.txt

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { inject, observer } from 'mobx-react';
import isEmpty from 'lodash/isEmpty';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import MoreIcon from '@material-ui/icons/MoreHoriz';
import { withRouter } from 'react-router-dom';
import anime from 'animejs';
import Flipper from 'react-flip-toolkit/es/Flipper';
import Flipped from 'react-flip-toolkit/es/Flipped';
import { LoadInfo } from '../../components/LoadInfo';
import MatchTripLocations from '../../components/MatchesQuickView/MatchTripLocations';
import { FOPagination } from '../../../components/List/FOPagination';
import { FOContentLoader } from '../../../components/FOContentLoader';

import './PostTruckPage.scss';

@inject('driverAppStore')
@observer
class PostTruckPage extends React.Component {
  static propTypes = {
    history: PropTypes.object,
    driverAppStore: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.state = {
      collapsedPostForm: true,
      menuAnchorEl: null,
      truckId: null,
    };
  }

  componentDidMount() {
    this.getMyTrucksHandler();
  }

  onExit = () => (el, index, removeElement) => {
    anime({
      targets: el,
      translateX: '-100%',
      opacity: 0,
      complete: removeElement,
      easing: 'easeOutSine',
    }).pause;
    return () => removeElement();
  };

  onListExit = this.onExit();

  getMyTrucksHandler = async () => {
    const { driverAppStore: { truckStore: { postedTrucks } } } = this.props;
    postedTrucks.downloadResults();
  };

  handleMenuClick = truckId => (event) => {
    this.setState({ menuAnchorEl: event.currentTarget, truckId });
  };

  handleMenuClose = () => {
    this.setState({ menuAnchorEl: null, truckId: null });
  };

  handleMenuItemAction = () => {
    const { driverAppStore: { truckStore: { deletePostedTruck } } } = this.props;
    const { truckId } = this.state;
    deletePostedTruck(truckId);
    this.handleMenuClose();
  };

  handlePopoverClose = () => {
    const { history, driverAppStore: { truckStore } } = this.props;
    truckStore.hidePostDonePopover();
    history.push('/driver/view/active');
  };

  handleMessageClick = () => {
    this.handlePopoverClose();
  };

  fetchPage = (pageNumber) => {
    const { driverAppStore: { truckStore: { postedTrucks: { downloadResults } } } } = this.props;
    downloadResults(pageNumber);
  };

  render() {
    const { driverAppStore: { truckStore: { postedTrucks } } } = this.props;
    const { menuAnchorEl } = this.state;
    return (
      <Flipper flipKey={postedTrucks.results.length}>
        <Menu
          anchorEl={menuAnchorEl}
          open={Boolean(menuAnchorEl)}
          onClose={this.handleMenuClose}
        >
          <MenuItem onClick={this.handleMenuItemAction}>
            Delete
          </MenuItem>
        </Menu>
        <Grid container className='post-truck-page'>
          <Grid item className='post-truck-page__content'>
            {postedTrucks.loading
              ? (<FOContentLoader />)
              : (
                <Grid container spacing={8}>
                  {postedTrucks.results.map(truck => (
                    <Flipped flipId={truck.id} key={truck.id} onExit={this.onListExit}>
                      <Grid item xs={12}>
                        <Paper square>
                          <Grid container>
                            <Grid
                              container
                              justify='space-between'
                              alignItems='center'
                              className='container--timegroup'
                            >
                              <Typography variant='caption'>
                                {`Posted ${moment.unix(truck.timestamp).fromNow()}`}
                              </Typography>
                              <MoreIcon onClick={this.handleMenuClick(truck.id)} />
                            </Grid>
                            <Grid item xs={12}>
                              <Divider />
                            </Grid>
                            <Grid item xs={12} className='container--locations'>
                              <MatchTripLocations
                                pickup={truck.pickup}
                                dropoff={truck.dropoff}
                              />
                            </Grid>
                            <Grid container className='container'>
                              <Grid item xs={12}>
                                <Grid container>
                                  <Grid item xs={6}>
                                    <Typography variant='title'>
                                      Available Date
                                    </Typography>
                                  </Grid>
                                  <Grid item xs={6}>
                                    <Typography variant='title'>
                                      Expires On
                                    </Typography>
                                  </Grid>
                                </Grid>
                              </Grid>
                              <Grid item xs={12}>
                                <Grid container>
                                  <Grid item xs={6}>
                                    <Typography variant='headline'>
                                      {truck.availableDate}
                                    </Typography>
                                  </Grid>
                                  <Grid item xs={6}>
                                    <Typography variant='headline'>
                                      {truck.expiresOn}
                                    </Typography>
                                  </Grid>
                                </Grid>
                              </Grid>
                            </Grid>
                            <Grid item xs={12}>
                              <Divider />
                            </Grid>
                            <Grid item xs={12}>
                              <LoadInfo
                                radius={truck.radius}
                                equipmentTypeList={truck.equipmentTypeList}
                                perMileRate={truck.perMileRate}
                              />
                            </Grid>
                          </Grid>
                        </Paper>
                      </Grid>
                    </Flipped>
                  ))}
                </Grid>
              )}
          </Grid>
          {!isEmpty(postedTrucks.pagination) && !postedTrucks.loading
          && (
            <Flipped flipId='list-pagination'>
              <Grid item xs={12}>
                <FOPagination
                  key='pagination-history-page'
                  pageCount={postedTrucks.pagination.totalPages}
                  onPageChange={this.fetchPage}
                  currentPage={postedTrucks.pagination.page}
                />
              </Grid>
            </Flipped>
          )}
        </Grid>
      </Flipper>
    );
  }
}

export default withRouter(PostTruckPage);