{"size": 3748, "ext": "js", "max_stars_repo_path": "client/src/components/team/UpdateTeam.js", "max_stars_repo_name": "LaithAlwani/project3-group2", "max_stars_repo_stars_event_min_datetime": "2021-04-24T15:46:51.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-24T15:46:51.000Z", "max_issues_repo_path": "client/src/components/team/UpdateTeam.js", "max_issues_repo_name": "LaithAlwani/project3-group2", "max_issues_repo_issues_event_min_datetime": "2021-04-28T17:57:27.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-10T23:43:18.000Z", "max_forks_repo_path": "client/src/components/team/UpdateTeam.js", "max_forks_repo_name": "LaithAlwani/project3-group2", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 29.5118110236, "max_line_length": 71, "alphanum_fraction": 0.4914621131}
import React, { useState } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";
import { Modal } from "react-bootstrap";

const UpdateTeam = () => {
  const url = window.location.pathname;
  const id = url.substring(url.lastIndexOf("/") + 1);

  const history = useHistory();

  const [teamName, setTeamName] = useState("");
  const [sport, setSport] = useState("");
  const [fileName, setFileName] = useState("");
  const [error, setError] = useState("");

  const [showModal, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const submitHandler = (e) => {
    e.preventDefault();

    const config = {
      header: {
        "Content-Type": "application/json",
      },
    };

    const formData = new FormData();
    formData.append("sport", sport)
    formData.append("teamName", teamName);
    formData.append("teamImage", fileName);

    if (!fileName) {
      axios
        .put(`/api/teams/${id}/updatenp`, { teamName, sport }, config)
        .then(() => history.push("/teams"))
        .catch((error) => {
          setError(error);
          if (error)
            setTimeout(() => {
              setError("");
            }, 2000);
        });
    } else {
      axios
        .put(`/api/teams/${id}/update`, formData, config)
        .then(() => history.push("/teams"))
        .catch((error) => {
          setError(`Image Required/ File Unsupported`);
          if (error)
            setTimeout(() => {
              setError("");
            }, 2000);
        });
    }
  };

  return (
    <div>
      <div>
        <button className="btn btn-block" onClick={handleShow}>
          Update Team
        </button>
      </div>
      <Modal show={showModal} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Update Team</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <form onSubmit={submitHandler} encType="multipart/form-data">
            {error && <span className="error-message">{error}</span>}
            <label htmlFor="name">Team Name:</label>
            <div className="input-group">
              <span className="input-group-addon">
                <span className="fas fa-users icon"></span>
              </span>
              <input
                type="text"
                className="form-control"
                required
                id="teamName"
                placeholder="Enter Team Name"
                value={teamName}
                onChange={(e) => setTeamName(e.target.value)}
              />
            </div>

            <label htmlFor="name">Sport:</label>
            <div className="input-group">
              <span className="input-group-addon">
                <span className="fas fa-basketball-ball icon"></span>
              </span>
              <input
                type="text"
                className="form-control"
                required
                id="sport"
                placeholder="Enter Sport"
                value={sport}
                onChange={(e) => setSport(e.target.value)}
              />
            </div>
            <div className="form-group">
              <label htmlFor="file">Choose Image File:</label>
              <input
                type="file"
                filename="teamImage"
                className="form-control-file"
                onChange={(e) => {
                  setFileName(e.target.files[0]);
                }}
              />
            </div>
            <button type="submit" className="btn btn-block">
              Update
            </button>
          </form>
        </Modal.Body>
      </Modal>
    </div>
  );
};

export default UpdateTeam;
