mvfront-react/src/components/views/Vote.jsx

import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import { Button, Col, Container, Row } from "reactstrap";
import { toast, ToastContainer } from "react-toastify";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons";
import { resolve } from "url";
import { grades } from "../../Util";

class Vote extends Component {
  constructor(props) {
    super(props);
    this.state = {
      candidates: [],
      title: null,
      numGrades: 0,
      ratedCandidates: [],
      colSizeCandidateLg: 4,
      colSizeCandidateMd: 6,
      colSizeCandidateXs: 12,
      colSizeGradeLg: 1,
      colSizeGradeMd: 1,
      colSizeGradeXs: 1,
      redirectTo: null,
      electionGrades: grades
    };
  }

  handleErrors = response => {
    if (!response.ok) {
      response.json().then(response => {
        console.log(response);
        this.setState(state => ({
          redirectTo: "/unknown-election/" + encodeURIComponent(response)
        }));
      });
      throw Error(response);
    }
    return response;
  };

  detailsToState = response => {
    const numGrades = response.num_grades;
    const candidates = response.candidates.map((c, i) => ({
      id: i,
      label: c
    }));
    //shuffle candidates
    let i, j, temp;
    for (i = candidates.length - 1; i > 0; i--) {
      j = Math.floor(Math.random() * (i + 1));
      temp = candidates[i];
      candidates[i] = candidates[j];
      candidates[j] = temp;
    }
    const colSizeGradeLg = Math.floor(
      (12 - this.state.colSizeCandidateLg) / numGrades
    );
    const colSizeGradeMd = Math.floor(
      (12 - this.state.colSizeCandidateMd) / numGrades
    );
    const colSizeGradeXs = Math.floor(
      (12 - this.state.colSizeCandidateXs) / numGrades
    );

    this.setState(state => ({
      title: response.title,
      candidates: candidates,
      numGrades: numGrades,
      colSizeGradeLg: colSizeGradeLg,
      colSizeGradeMd: colSizeGradeMd,
      colSizeGradeXs: colSizeGradeXs,
      colSizeCandidateLg:
        12 - colSizeGradeLg * numGrades > 0
          ? 12 - colSizeGradeLg * numGrades
          : 12,
      colSizeCandidateMd:
        12 - colSizeGradeMd * numGrades > 0
          ? 12 - colSizeGradeMd * numGrades
          : 12,
      colSizeCandidateXs:
        12 - colSizeGradeXs * numGrades > 0
          ? 12 - colSizeGradeXs * numGrades
          : 12,
      electionGrades: grades.slice(0, numGrades)
    }));
    return response;
  };

  componentDidMount() {
    // FIXME we should better handling logs

    const electionSlug = this.props.match.params.handle;
    const detailsEndpoint = resolve(
      process.env.REACT_APP_SERVER_URL,
      "election/get/".concat(electionSlug)
    );

    fetch(detailsEndpoint)
      .then(this.handleErrors)
      .then(response => response.json())
      .then(this.detailsToState)
      .catch(error => console.log(error));
  }

  handleGradeClick = event => {
    let data = {
      id: parseInt(event.currentTarget.getAttribute("data-id")),
      value: parseInt(event.currentTarget.value)
    };
    //remove candidate
    let ratedCandidates = this.state.ratedCandidates.filter(
      ratedCandidate => ratedCandidate.id !== data.id
    );
    ratedCandidates.push(data);
    this.setState({ ratedCandidates: ratedCandidates });
  };

  handleSubmitWithoutAllRate = () => {
    toast.error("Vous devez évaluer l'ensemble des propositions/candidats !", {
      position: toast.POSITION.TOP_CENTER
    });
  };

  handleSubmit = event => {
    event.preventDefault();

    const { ratedCandidates } = this.state;
    const electionSlug = this.props.match.params.handle;
    const endpoint = resolve(
      process.env.REACT_APP_SERVER_URL,
      "election/vote/"
    );

    const gradesById = {};
    ratedCandidates.forEach(c => {
      gradesById[c.id] = c.value;
    });
    const gradesByCandidate = [];
    Object.keys(gradesById)
      .sort()
      .forEach(id => {
        gradesByCandidate.push(gradesById[id]);
      });

    fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        election: electionSlug,
        grades_by_candidate: gradesByCandidate
      })
    })
      .then(this.handleErrors)
      .then(result =>
        this.setState({ redirectTo: "/vote-success/" + electionSlug })
      )
      .catch(error => error);
  };

  render() {
    const { redirectTo, candidates, electionGrades } = this.state;

    if (redirectTo) {
      return <Redirect to={redirectTo} />;
    }

    return (
      <Container>
        <ToastContainer />
        <form onSubmit={this.handleSubmit} autoComplete="off">
          <Row>
            <Col>
              <h3>{this.state.title}</h3>
            </Col>
          </Row>
          <Row className="cardVote d-none d-lg-flex">
            <Col
              xs={this.state.colSizeCandidateXs}
              md={this.state.colSizeCandidateMd}
              lg={this.state.colSizeCandidateLg}
            >
              <h5>&nbsp;</h5>
            </Col>
            {electionGrades.map((grade, j) => {
              return j < this.state.numGrades ? (
                <Col
                  xs={this.state.colSizeGradeXs}
                  md={this.state.colSizeGradeMd}
                  lg={this.state.colSizeGradeLg}
                  key={j}
                  className="text-center p-0"
                  style={{ lineHeight: 2 }}
                >
                  <small
                    className="nowrap bold badge"
                    style={{ backgroundColor: grade.color, color: "#fff" }}
                  >
                    {grade.label}
                  </small>
                </Col>
              ) : null;
            })}
          </Row>

          {candidates.map((candidate, i) => {
            return (
              <Row key={i} className="cardVote">
                <Col
                  xs={this.state.colSizeCandidateXs}
                  md={this.state.colSizeCandidateMd}
                  lg={this.state.colSizeCandidateLg}
                >
                  <h5 className="m-0">{candidate.label}</h5>
                  <hr className="d-lg-none" />
                </Col>
                {this.state.electionGrades.map((grade, j) => {
                  return j < this.state.numGrades ? (
                    <Col
                      xs={this.state.colSizeGradeXs}
                      md={this.state.colSizeGradeMd}
                      lg={this.state.colSizeGradeLg}
                      key={j}
                      className="text-lg-center"
                    >
                      <label
                        htmlFor={"candidateGrade" + i + "-" + j}
                        className="check"
                      >
                        <small
                          className="nowrap d-lg-none ml-2 bold badge"
                          style={
                            this.state.ratedCandidates.find(function(
                              ratedCandidat
                            ) {
                              return (
                                JSON.stringify(ratedCandidat) ===
                                JSON.stringify({ id: candidate.id, value: j })
                              );
                            })
                              ? { backgroundColor: grade.color, color: "#fff" }
                              : {
                                  backgroundColor: "transparent",
                                  color: "#000"
                                }
                          }
                        >
                          {grade.label}
                        </small>
                        <input
                          type="radio"
                          name={"candidate" + i}
                          id={"candidateGrade" + i + "-" + j}
                          data-index={i}
                          data-id={candidate.id}
                          value={j}
                          onClick={this.handleGradeClick}
                          defaultChecked={this.state.ratedCandidates.find(
                            function(element) {
                              return (
                                JSON.stringify(element) ===
                                JSON.stringify({ id: candidate.id, value: j })
                              );
                            }
                          )}
                        />
                        <span
                          className="checkmark"
                          style={
                            this.state.ratedCandidates.find(function(
                              ratedCandidat
                            ) {
                              return (
                                JSON.stringify(ratedCandidat) ===
                                JSON.stringify({ id: candidate.id, value: j })
                              );
                            })
                              ? { backgroundColor: grade.color, color: "#fff" }
                              : {
                                  backgroundColor: "transparent",
                                  color: "#000"
                                }
                          }
                        />
                      </label>
                    </Col>
                  ) : null;
                })}
              </Row>
            );
          })}

          <Row>
            <Col className="text-center">
              {this.state.ratedCandidates.length !==
              this.state.candidates.length ? (
                <Button
                  type="button"
                  onClick={this.handleSubmitWithoutAllRate}
                  className="btn btn-dark "
                >
                  <FontAwesomeIcon icon={faCheck} className="mr-2" />
                  Valider
                </Button>
              ) : (
                <Button type="submit" className="btn btn-success ">
                  <FontAwesomeIcon icon={faCheck} className="mr-2" />
                  Valider
                </Button>
              )}
            </Col>
          </Row>
        </form>
      </Container>
    );
  }
}
export default Vote;