Untitled
unknown
plain_text
4 years ago
2.9 kB
4
Indexable
import React, { useEffect, useState } from "react"; import "./NewBoxer.css"; import axios from "axios"; import { useHistory } from "react-router"; import { API_URL } from "../api/auth"; function NewBoxer() { const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [height, setHeight] = useState(""); const [weight, setWeight] = useState(""); const [reach, setReach] = useState(""); const [stance, setStance] = useState(""); const [gym, setGym] = useState(""); const [gyms, setGyms] = useState([]); const [avatar, setAvatar] = useState(null); const [loading, setLoading] = useState(false); const [isError, setIsError] = useState(false); const [data, setData] = useState(null); const [formData, setFormData] = useState(""); const history = useHistory(); const handleSubmit = () => { setLoading(true); setIsError(false); const formData = new FormData(); formData.append('file',avatar); const data = { first_name: firstName, last_name: lastName, height: height, weight: weight, reach: reach, stance: stance, gym_id: gym, avatar: avatar, }; const config = { headers: { 'content-type': 'multipart/form-data' } } axios.post(`${API_URL}/boxers`, data, config).then((res) => { setData(res.data); setFirstName(""); setLastName(""); setHeight(""); setWeight(""); setReach(""); setStance(""); setGym(""); setAvatar(avatar); setLoading(false); history.push("/fighters/"); }); }; useEffect(() => { axios .get(`${API_URL}/gyms`) .then((response) => { setGyms(response.data); }) .catch((error) => { console.log(error); }); }, []); return ( <div className="container"> <div style={{ maxWidth: 350 }}> <div className="form-group"> // Other inputs hidden // <label htmlFor="avatar" className="mt-2"> Choose An Avatar </label> <input type="file" className="form-control" id="avatar" placeholder="Avatar" onChange={(e) => setAvatar(e.target.files[0]) } value={avatar} src={avatar} /> </div> {isError && ( <small className="mt-3 d-inline-block text-danger"> Something went wrong. Please try again later. </small> )} <button type="submit" className="btn btn-primary mt-3" onClick={handleSubmit} disabled={loading} > {loading ? "Loading..." : "Submit"} </button> </div> </div> ); } export default NewBoxer;
Editor is loading...