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

import React, { Component } from "react";
import { Button, Col, Container, Row } from "reactstrap";
import { Link } from "react-router-dom";
import { faCopy, faUsers } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import logoLine from "../../logos/logo-line-white.svg";
import { AppContext } from "../../AppContext";

class CreateSuccess extends Component {
  static contextType = AppContext;
  constructor(props) {
    super(props);
    const electionSlug = this.props.match.params.slug;
    this.state = {
      urlOfVote:
        "https://" + window.location.hostname + "/vote/" + electionSlug,
      urlOfResult:
        "https://" + window.location.hostname + "/result/" + electionSlug
    };
    this.urlVoteField = React.createRef();
    this.urlResultField = React.createRef();
  }

  handleClickOnField = event => {
    event.target.focus();
    event.target.select();
  };

  handleClickOnCopyVote = event => {
    const input = this.urlVoteField.current;
    input.focus();
    input.select();
    document.execCommand("copy");
  };

  handleClickOnCopyResult = event => {
    const input = this.urlResultField.current;
    input.focus();
    input.select();
    document.execCommand("copy");
  };

  render() {
    return (
      <Container>
        <Row>
          <Link to="/" className="d-block ml-auto mr-auto mb-4">
            <img src={logoLine} alt="logo" height="128" />
          </Link>
        </Row>
        <Row className="mt-4">
          <Col className="text-center offset-lg-3" lg="6">
            <h2>Vote créé avec succès !</h2>
            <p className="mt-4 mb-1">
              Vous pouvez maintenant partager le lien du vote aux participants :
            </p>

            <div className="input-group  ">
              <input
                type="text"
                className="form-control"
                ref={this.urlVoteField}
                value={this.state.urlOfVote}
                readOnly
                onClick={this.handleClickOnField}
              />

              <div className="input-group-append">
                <Button
                  className="btn btn-outline-light"
                  onClick={this.handleClickOnCopyVote}
                  type="button"
                >
                  <FontAwesomeIcon icon={faCopy} className="mr-2" />
                  Copier
                </Button>
              </div>
            </div>

            <p className="mt-4 mb-1">
              Voici le lien vers les résultats du vote en temps réel :
            </p>
            <div className="input-group ">
              <input
                type="text"
                className="form-control"
                ref={this.urlResultField}
                value={this.state.urlOfResult}
                readOnly
                onClick={this.handleClickOnField}
              />

              <div className="input-group-append">
                <Button
                  className="btn btn-outline-light"
                  onClick={this.handleClickOnCopyResult}
                  type="button"
                >
                  <FontAwesomeIcon icon={faCopy} className="mr-2" />
                  Copier
                </Button>
              </div>
            </div>
          </Col>
        </Row>
        <Row className="mt-4 mb-4">
          <Col>
            <div className=" bg-warning text-white p-2 ">
              <p className="m-0 p-0 text-center">
                Conservez ces liens précieusement !
              </p>
              <p className="small m-2 p-0">
                <b>ATTENTION</b> : Vous ne les retrouverez pas ailleurs et nous
                ne serons pas capable de vous les communiquer. Vous pouvez par
                exemple les enregistrer dans les favoris de votre navigateur.
              </p>
            </div>
          </Col>
        </Row>

        <Row className="mt-4 mb-4">
          <Col className="text-center">
            <Link to={"/vote/" + this.props.match.params.slug} className="btn btn-success">
              <FontAwesomeIcon icon={faUsers} className="mr-2" />
              Participer maintenant !
            </Link>
          </Col>
        </Row>
      </Container>
    );
  }
}
export default CreateSuccess;