File.txt

import React, { Component, useEffect, useState} from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';
import patientService from '../service/patientService';
import './FormStyle.css';



function EditDetails(){
  const {id}= useParams();
  const URL=`http://localhost:8080/api/v1/patients/${id}`;
  var patientsInfo;

  useEffect(()=>{
    getPatientById();
  },[])


  const getPatientById= async e =>{
    patientsInfo = await axios.get(URL);
    //const patientsInfo = await patientService.getPatientById({id});
    console.log("info: ",patientsInfo.data);

    patient.name=patientsInfo.data.name;
    patient.gen=patientsInfo.data.gen;
    patient.address=patientsInfo.data.address;
    patient.email=patientsInfo.data.email;
    patient.phone=patientsInfo.data.phone;
    //setPatient(patientsInfo.data);  
    
}


  const [patient, setPatient] = useState({
    name:"",
    phone:"",
    gen:"select",
    address:"",
    email:"",
  
});

const { name ,phone, gen, address, email} = patient;
  const onInputChange = e =>{
      //console.log("oninput:"+name+" "+phone+" "+gender+" "+address+" "+email);
      setPatient({...patient,[e.target.name]:e.target.value})
      
  }

  const FormHandle = e =>{
      //console.log("patients data in the form func:"+JSON.stringify(patientsInfo.data));

    /*
    
    console.log(e);
    updateDataToServer(patient)  
    "http://localhost:8080/api/v1/patients"
    

    if(patient)
    {
        fetch(URL,{
            method:"PUT",
            headers:{"Content-type":"application/json"},
             body:JSON.stringify(patient)
             }).then(()=>{}) 
              window.alert("Patient Data modified!");  
    }
     patientService.updatePatient(patient,id);
    
     e.preventDefault();
   try {
        const { data } = axios({
            method: 'PUT',
            url: URL,
            data: {
                
                body : patient
            },
        });
    
        console.log(JSON.stringify(data));
*/
/*
 setPatient({name:patientsInfo.data.name,
    address:patientsInfo.data.address,
    phone:patientsInfo.data.phone,
    gen:patientsInfo.data.gen,
    email:patientsInfo.data.email
 });
 */


     //patientsInfo = axios.get(URL);
    //const patientsInfo = await patientService.getPatientById({id});
    console.log("info: ",patientsInfo.data);

    /*
    this.name=patientsInfo.name;
    this.gen=patientsInfo.gen;
    this.address=patientsInfo.address;
    this.email=patientsInfo.email;
    this.phone=patientsInfo.phone;
*/

 console.log("set data: " +patient.name+" "+patient.gen+" "+patient.address+" "+patient.email+" "+patient.phone);

 console.log("Patient: "+JSON.stringify(patient));

try{
    //const res = axios.put(URL, patient);
    const res = axios.put(URL,patient);
    //res.data.headers['Content-Type'];
    console.log("res: ",res);
    } catch (err) {
        if (err.response.status === 404) {
            console.log('Resource could not be found!');
        } else {
            console.log(err.message);
        }
    }
    
    

}

const updateDataToServer=(data) =>{
    /*
    console.log("Data: "+data);
   
    axios.put(URL).then(
        (response)=>{
                alert("Patient Updated Successfully");
                console.log(response.json());
         },(error)=>{
                 alert("Operation failed");
                 console.log("error:"+error);
         }
     );
     
     /*    
     axios.put(URL,+'/'+{id},data,{
        foo: "bar"
    })
        .then(function (response) {
            alert("Book Updated Successfully");
                console.log(response.json());
        }.bind(this))
        .catch(function (error) {
            console.log("Error: "+error)
        });
       */ 
    /*
    patientService.updatePatient(data,{id}).then(
       (response)=>{
           console.log(response);
               alert("Patient Updated Successfully");
        },(error)=>{
            console.log(error);
                alert("Operation failed");
        }
    );
    */

};


const onCancel=(e)=>{
    setPatient("");
}

  return (
    <div>
    <div className="container">
            <h1 className="">Update Patients!</h1>
            <div>
            <form onSubmit={e => FormHandle(e)}>
                <div className=''>
                    <label>Name</label>
                    <input type="text" className="form-control" name="name"   placeholder="Enter Here" value={name} onChange={(e) =>onInputChange(e)} />
                </div>
                <div className="form-group">
                    <label>Phone</label>
                    <input type="number" className="form-control" name="phone"   placeholder="Enter Here" value={phone} onChange={(e) =>onInputChange(e)} />
                </div>
  
                <div className="form-group">
                <label>Gender</label>
                <select value={patient.gen} name="gen" placeholder="Enter Here" onChange={(e) =>onInputChange(e)} className='element-control'>
                        <option value="select">select</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
               </select>
               </div>


                <div className="form-group">
                    <label>Address</label>
                    <input type="textarea" className="form-control" name="address"  placeholder="Enter Here" value={address} onChange={(e) =>onInputChange(e)}  />
                </div>
                <div className="form-group">
                    <label>Email</label>
                    <input type="email" className="form-control" name="email"  placeholder="Enter Here" value={email} onChange={(e) =>onInputChange(e)}  />
                </div>
                <div className="container text-center">
                <button type="button" id="btn-update" onClick={e => FormHandle(e)}>Update Patient</button>
                <button type="reset" id="btn-clear" onClick={(e) =>onCancel(e)}>Clear</button>
                </div>
            </form>
        </div>
    </div>
    </div>
  )
}

export default EditDetails