import { useRef, useState } from "react";
import axios from "axios";

const GetOneRecord = () => {
const [record, setRecord] = useState(null);
const [error, setError] = useState(null);
const ref1 = useRef(null);

const getRecord = async () => {
try {
const res = await axios.get(`http://localhost:9000/getOne/${ref1.current.value}`);
const { data } = res;
setRecord(data);
setError(null);
} catch (error) {
console.error("Error fetching record:", error);
setError("Error fetching record. Please try again.");
setRecord(null);
}
};

const get_data = () => {
getRecord();
};

return (
<>
<div style={{textAlign:"center", border:"double", borderColor:"purple"}}>

<input type="text" ref={ref1} />
<br />
<br />
<button onClick={get_data}>Get Single Record</button>
<p></p>
<p></p>
<hr></hr>
{error && <p>{error}</p>}
{record && (
<table border={1}>
<thead>
<tr>
<th>CID</th>
<th>NAME</th>
<th>CURRENT_READING</th>
<th>PREVIOUS_READING</th>
<th>UNITS</th>
<th>SERVICE_CHARGES</th>
<th>TOTAL_BILL</th>

</tr>
</thead>
<tbody>
<tr>
<td>{record.cid}</td>
<td>{record.name}</td>
<td>{record.current_reading}</td>
<td>{record.previous_reading}</td>
<td>{record.units}</td>
<td>{record.service_charges}</td>
<td>{record.total_bill}</td>
</tr>
</tbody>
</table>
)}
</div>
</>
);
};

export default GetOneRecord;

import axios from "axios";
import { useRef,useState } from "react";
const UpdateEmployee = ()=>{
const [res,setRes] = useState({});
const ref1 = useRef(null);
const ref2 = useRef(null);
const ref3 = useRef(null);
const ref4 = useRef(null);
const update_data=()=>{
updateEx();
}
const updateEx = async ()=>{
const res = await axios.put(`http://localhost:9000/update/${ref1.current.value}`,{
"name":ref2.current.value,
"current_reading":ref3.current.value,
"previous_reading":ref4.current.value,});
const {data} = res;
setRes(data);
}
return(<>
<div style={{textAlign:"center", border:"double", borderColor:"red", marginLeft:400, marginRight:400, marginTop:50}}>
Consumer Id : <input type="text" ref={ref1}></input><br></br><br></br>
Consumer Name : <input type="text" ref={ref2}></input><br></br><br></br>
Current Reading : <input type="text" ref={ref3}></input><br></br><br></br>
Previous Reading : <input type="text" ref={ref4}></input><br></br><br></br>
<button onClick={update_data}>update</button>
<p>{JSON.stringify(res)}</p>
</div>
</>)



}
export default UpdateEmployee;