UniversityOffers.jsx

/* eslint-disable indent */
import React from "react";
import PropTypes from "prop-types";
import compose from "recompose/compose";
import { connect } from "react-redux";
import Close from "@material-ui/icons/Close";
import DoneAll from "@material-ui/icons/DoneAll";

import Paper from "@material-ui/core/Paper";
import { makeStyles, withStyles } from "@material-ui/styles";
import Typography from "@material-ui/core/Typography";
import Chip from "@material-ui/core/Chip";
import getActions from "../../../redux/api/getActions";
import withUnivInfo from "../common/withUnivInfo";
import RequestParams from "../../../redux/api/RequestParams";
import CustomComponentForAPI from "../../common/CustomComponentForAPI";
import PaginatedData from "../../common/PaginatedData";

const style = theme => ({
  paper: {
    padding: theme.spacing(1)
  },
  chip: {
    margin: theme.spacing(0.5)
  },
  inlineIcon: {
    fontSize: "1em",
    position: "relative",
    top: ".125em"
  },
  itemRoot: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(1)
  }
});

const useStyle = makeStyles(style);

function Item(props) {
  const { majors, semester, seats, comment, master, doubleDegree } = props;
  const classes = useStyle();

  return (
    <div className={classes.itemRoot}>
      <div>
        <Chip label={semester} color="primary" className={classes.chip} />
        {majors.map(spe => (
          <Chip
            key={spe}
            label={<b>{spe}</b>}
            className={classes.chip}
            color="secondary"
          />
        ))}
      </div>
      <div>
        {seats ? (
          <>
            <Typography display="inline">Au total,&nbsp;</Typography>
            <Typography color="primary" display="inline">
              {seats}
              &nbsp; place
              {seats > 1 ? "s" : ""}
            </Typography>
            <Typography display="inline">
              &nbsp;
              {seats > 1 ? "étaient/sont disponibles" : "est/disponible"}.
            </Typography>
          </>
        ) : (
          <Typography variant="caption">
            Aucune information n'est disponible concernant le nombre de places
            disponibles.
          </Typography>
        )}
        <div>
          <Typography>
            Master
            {master ? (
              <DoneAll className={classes.inlineIcon} color="primary" />
            ) : (
              <Close className={classes.inlineIcon} color="error" />
            )}
          </Typography>
          <Typography>
            Double diplome
            {doubleDegree ? (
              <DoneAll className={classes.inlineIcon} color="primary" />
            ) : (
              <Close className={classes.inlineIcon} color="error" />
            )}
          </Typography>
        </div>
        <div>
          {comment && (
            <>
              <Typography variant="caption">Commentaire de la DRI:</Typography>
              <Typography>
                <em>{comment}</em>
              </Typography>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Item.propTypes = {
  doubleDegree: PropTypes.bool.isRequired,
  master: PropTypes.bool.isRequired,
  semester: PropTypes.string.isRequired,
  majors: PropTypes.arrayOf(PropTypes.string).isRequired,
  comment: PropTypes.string,
  seats: PropTypes.number
};

Item.defaultProps = {
  comment: "",
  seats: null
};

class UniversityOffers extends CustomComponentForAPI {
  state = { page: 1 };

  apiParams = {
    universityOffers: ({ props, state }) =>
      RequestParams.Builder.withQueryParam("university", props.univId)
        .withQueryParam("page", state.page)
        .withQueryParam("page_size", 3)
        .build()
  };

  goToPage(pageNumber) {
    this.setState({ page: pageNumber });
  }

  renderEl(dataEl) {
    const {
      comment,
      double_degree: doubleDegree,
      is_master_offered: master,
      semester,
      year,
      majors,
      id,
      nb_seats_offered: seats
    } = dataEl;

    const props = {
      seats,
      id,
      doubleDegree,
      comment,
      master,
      majors: typeof majors === "string" ? majors.split(",") : [],
      semester: `${semester}${year}`
    };

    return <Item key={props.id} {...props} />;
  }

  customRender() {
    const { classes } = this.props;
    const universityOffers = this.getLatestReadData("universityOffers");

    return (
      <Paper className={classes.paper}>
        <Typography variant="h4">Possibilité(s) d'échanges</Typography>
        <Typography variant="caption">
          REX-DRI s'efforce d'être à jour avec l'ENT. Toutefois, seul l'ENT fait
          foi à 100% concernant les possibilités passées et actuelles
          d'échanges.
        </Typography>

        <PaginatedData
          data={universityOffers}
          goToPage={pageNumber => this.goToPage(pageNumber)}
          render={dataEl => this.renderEl(dataEl)}
          stepperOnBottom
          stepperOnTop={false}
          EmptyMessageComponent={
            <Typography>
              <em>
                Aucune possibilité (passée ou présente) n'a été enregistrée à ce
                jour.
              </em>
            </Typography>
          }
        />
      </Paper>
    );
  }
}

UniversityOffers.propTypes = {
  univId: PropTypes.number.isRequired,
  classes: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  universityOffers: state.api.offersAll
});

const mapDispatchToProps = dispatch => ({
  api: {
    universityOffers: params => dispatch(getActions("offers").readAll(params))
  }
});

export default compose(
  withStyles(style),
  withUnivInfo(),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(UniversityOffers);