CreateTeam.jsx

import React from 'react';
import axios from 'axios';
import { Container, Row, Button } from 'reactstrap';
import { Link } from 'react-router-dom';

import Header from './Header';
// import Footer from './Footer';
import ErrorPage from './ErrorPage';
import './AuthenticationPage.css';
import './General.css';

class CreateNewTeam extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      logo: '',
      isError: false,
      error: {}
    };

    this.imageRef = React.createRef();
    this.handleName = this.handleName.bind(this);
    this.handleLogo = this.handleLogo.bind(this);
    this.postNewTeam = this.postNewTeam.bind(this);
  }

  handleName(event) {
    const { value } = event.target;
    this.setState({ name: value });
  }

  handleLogo(event) {
    const { value } = event.target;
    this.setState({ logo: value });
  }

  postNewTeam() {
    if (this.imageRef) {
      axios
        .post('https://api.imgur.com/3/image', this.imageRef.current.files[0], {
          headers: {
            Authorization: 'Client-ID 859d204377034e9'
          }
        })
        .then(resFromImgur => {
          const link = resFromImgur.data.data.link;
          return axios.post('https://c-clicker-api.herokuapp.com/teams', {
            name: this.state.name,
            logo: link
          });
        })
        .then(resFromApi => {
          console.log(resFromApi);
          this.props.history.push('/authentication');
        })
        .catch(err => {
          console.log(err);
          this.setState({ isError: true, error: err });
        });
    } else {
      axios
        .post('https://c-clicker-api.herokuapp.com/teams', {
          name: this.state.name,
          logo: this.state.logo
        })
        .then(response => {
          console.log(response);
          this.props.history.push('/authentication');
        })
        .catch(err => {
          console.log(err);
          this.setState({ isError: true, error: err });
        });
    }
  }

  render() {
    const { isError, name, logo, error } = this.state;

    if (isError) {
      return <ErrorPage error={error} />;
    } else {
      return (
        <Container fluid className="flex-column min-vh-100 vw-100 align-items-center">
          <Header />
          <Container className="w-container flex-column justify-content-center border border-white rounded m-perso">
            <Row className="justify-content-center pb-5 pt-5 mx-1">
              <h1 className="text-center">Créer une nouvelle team</h1>
            </Row>

            <Row className="flex-column mx-1 mb-4 p-light">
              <label htmlFor="pseudo" className="font-weight-bold">
                Entre le nom de la team :
              </label>
              <input
                type="text"
                id="nameTeam"
                name="nameTeam"
                value={name}
                placeholder="Team Name"
                onChange={this.handleName}
              />
            </Row>
            <p className="font-weight-bold p-light">
              Insère une image qui définira le logo de la team :
            </p>
            <Row className="flex-column mx-1 mb-4 p-light">
              <label htmlFor="logoTeam">En la récupérant dans tes fichiers :</label>
              <input type="file" id="logoTeamFile" name="logoTeamFile" ref={this.imageRef} />
            </Row>
            <Row className="flex-column mx-1 mb-4 p-light">
              <label htmlFor="logoTeam">Ou via une URL :</label>
              <input
                type="text"
                id="logoTeam"
                name="logoTeam"
                value={logo}
                placeholder="URL"
                onChange={this.handleLogo}
              />
            </Row>
            <Row className="justify-content-around align-items-end mx-1 mb-4 p-light">
              <Link to="/authentication">
                <Button outline color="warning">
                  Annuler
                </Button>
              </Link>
              <Button color="warning" onClick={this.postNewTeam}>
                Valider
              </Button>
            </Row>
          </Container>
          {/* <Row className="row-footer vw-100 justify-content-center align-items-center mt-5">
            <Footer />
          </Row> */}
        </Container>
      );
    }
  }
}

export default CreateNewTeam;