import { useRef,useState } from "react";
import axios from "axios";
const GetExp1=()=>{
const [arr,setArr]=useState([]);
const ref1=useRef(null);
const fetch_data=()=>{
getData();
}

const getData=async ()=>{
const res=await axios.get(`https://reqres.in/api/users?page=${ref1.current.value}`);
const {data:x}=res;
const {data}=x;
setArr(data);
}
return(
<>
<input type="number" ref={ref1}></input>
<button onClick={fetch_data}>GetData</button>
<br></br>
{
arr.length!=0?(<table border={1}
align="center"
cellSpacing={10}
cellPadding={10}>
<tr>
<th>id</th>
<th>first_name</th>
<th>last_name</th>
<th>email</th>
<th>avatar</th>
</tr>
{
arr.map((element,index)=>{
return(
<tr key={index}>
<td>{element.id}</td>
<td>{element.first_name}</td>
<td>{element.last_name}</td>
<td>{element.email}</td>
<td><img src={element.avatar}></img></td>
</tr>
)
})
}
</table>):(<i className="fa fa-spin fa-spinner"></i>)
}
</>
)
}
export default GetExp1;

import { useEffect,useState } from "react"
import axios from "axios";
const GetExp2=()=>{
const [arr,setArr]=useState([]);

const getData=async ()=>{
const res=await axios.get(`http://localhost:9000/getAll`);
const {data}=res;
setArr(data);
}
useEffect(()=>{
getData();
},[]);
return(
<>
<h1>DISPLAY ELECTRICITY BILL CONSUMER DETAILS</h1>
<div className="container mt-5">
<table border={1}>
<thead>
<tr>
<th>CID</th>
<th>CNAME</th>
<th>CURRENT_READING</th>
<th>PRIVIOUS_READING</th>
<th>UNITS</th>
<th>SERVICE_CHARGES</th>
<th>TOTAL_BILL</th>
</tr>
</thead>
<tbody>
{
arr.map((element,index)=>{
return(
<tr key={index}>
<td>{element.cid}</td>
<td>{element.name}</td>
<td>{element.current_reading}</td>
<td>{element.previous_reading}</td>
<td>{element.units}</td>
<td>{element.service_charges}</td>
<td>{element.total_bill}</td>

</tr>
)
})
}
</tbody>
<tfoot></tfoot>
</table>
</div>
</>
)
}
export default GetExp2;

import axios from "axios";
import {useRef,useState} from "react";
const PostExp1=()=>{
const [res,setRes]=useState({});
const ref1=useRef(null);
const ref2=useRef(null);
const ref3=useRef(null);

const post_data=()=>{
postEx();
}
const postEx=async ()=>{
const res=await axios.post("http://localhost:9000/save",{"name":ref1.current.value,
"current_reading":ref2.current.value,
"previous_reading":ref3.current.value});
const {data}=res;
setRes(data);
}
return(
<>
Consumer Name: <input type="text" ref={ref1}></input> <br></br><br></br>
Current_Reading: <input type="text" ref={ref2}></input> <br></br><br></br>
Previous_Reading: <input type="text" ref={ref3}></input> <br></br><br></br>
<button onClick={post_data}>Post</button>
<p>{JSON.stringify(res)}</p>
</>
)
}
export default PostExp1;

DeleteExp.jsx
-----------
import axios from "axios";
import { useEffect, useRef, useState } from "react";
const DeleteExp=()=>{
const [num,setNum]=useState(null);
const ref1=useRef(null);
const deleteData=async ()=>{
const res=await axios.delete("http://localhost:7000/delete",{"empId":ref1.current.value});
const {status}=res;
setNum(status);
}
const delete_data=()=>{
deleteData();
}
return(
<>
<input type="text" ref={ref1}></input> <br></br><br></br>
<button onClick={delete_data}>DeleteRecord</button>
<h1>{num}</h1>
</>
)
}
export default DeleteExp;

import axios from "axios";
import { useRef,useState } from "react";
const DeleteExp = ()=>{
const [num,setNum] = useState({});
const ref1 = useRef(null);
const deleteData = async ()=>{
const res = await axios.delete(`http://localhost:9000/delete/${ref1.current.value}`);
const {status} = res;
setNum(status);
}
const delete_data = ()=>{
deleteData();
}
return(<>
<div style={{textAlign:"center", border:"double", borderColor:"red", marginLeft:400, marginRight:400, marginTop:50}}>
<input type="text" ref={ref1}></input><br></br><br></br>
<button onClick={delete_data}>Delete Record</button>
<p>{JSON.stringify(num)}</p>

</div>
</>)
}
export default DeleteExp;

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:8000/get/${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", marginLeft:400, marginRight:400, marginTop:50}}>

<input type="text" ref={ref1} />
<br />
<br />
<button onClick={get_data}>Get Single Record</button>
{error && <p>{error}</p>}
{record && (
<table border={1}>
<thead>
<tr>
<th>EMPLOYEE ID</th>
<th>EMPLOYEE NAME</th>
<th>EMPLOYEE SALARY</th>
<th>EMPLOYEE DESIGNATION</th>
</tr>
</thead>
<tbody>
<tr>
<td>{record.empId}</td>
<td>{record.empName}</td>
<td>{record.empSalary}</td>
<td>{record.empDesignation}</td>
</tr>
</tbody>
</table>
)}
</div>
</>
);
};

export default GetOneRecord;