sandbox-react/crud/src/components/home.js

import React, {useEffect,useState} from 'react'
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
  
export default function Home(){

    //get data
    const getData=()=>{
	axios
            .get('http://83.223.94.182:65535/entities/info')
            .then((response) => {
		setData(response.data);
            })
            .catch((err) => {
		console.error('Home:getData(): error: ' + err);
            });
    };

    //store data
    const [data,setData]=useState([]);

    //get data when app loads
    useEffect(()=>{
	getData();
    },[]);

    let history = useNavigate()
    // You may skip this part if you're
    // using react-context api or redux
    function setID(id,name,age){
	localStorage.setItem('id', id);
	localStorage.setItem('Name', name);
	localStorage.setItem('Age', age);
    }
    function setRgnCycle(id,name){
	//console.log('Home:setRgnCycle() id: ' + id);
	//console.log('Home:setRgnCycle() name: ' + name);
	//TODO Study localStorage!
	localStorage.setItem('rgnCycleId', id);
	localStorage.setItem('rgnCycleName', name);
    }


    async function deleteItem(id){
	//console.log("Home:deleteItem():");
	//console.log("Home:deleteItem() id: " + id);
	let url = 'http://83.223.94.182:65535/entities/' + id + '/delete';
	//console.log('Home:deleteItem() url: ' + url);
	return fetch(url, {
	    method: "POST",
	    mode: "cors"
	})
	    .then(response => {
		if (!response.ok) {
		    console.error('Home:deleteItem() rsp error: ' + error);
		}else{
		    //TODO Why is data not updated automatically?
		    getData();
		    // We need to re-render the page for getting
		    // the results so redirect to same page.
		    history('/')
		    //console.log('Home:deleteItem() Done.');
		}
	    })
	    .catch((error) => {
		console.error('Home:deleteItem() error: ' + error);
		// We need to re-render the page for getting
		// the results so redirect to same page.
		history('/')
	    });
    };

    //TODO Why is this function not working?
    //post
    const postRgnCycle=(id)=>{
	console.log('Home:postRgnCycle() Start...');
	console.log('Home:postRgnCycle() id: ' + id);
	let url = 'http://83.223.94.182:65535/entities/' + id + '/delete';
	console.log('Home:postRgnCycle() url: ' + url);
	let config = {
	    method: 'post',
	    maxBodyLength: Infinity,
	    url: url,
	    headers: { }
	};
	axios.request(config)
	    .then((response) => {
		console.log('Home:postRgnCycle() Deleted...');
	    })
	    .catch((error) => {
		console.error('Home:postRgnCycle() error: ' + error);
	    });
	// We need to re-render the page for getting
	// the results so redirect to same page.
	history('/')
	console.log('Home:postRgnCycle() Done.');
    };

    //TODO Why is this function not working?
    //delete record using api
    const deleteRgnCycle=(id)=>{
	console.log('Home:deleteRgnCycle() Start...');
	console.log('Home:deleteRgnCycle() id: ' + id);
	let url = 'http://83.223.94.182:65535/entities/' + id + '/delete';
	console.log('Home:deleteRgnCycle() url: ' + url);
	axios
            .post(url)
            .then((response) => {
		console.log('Home:deleteRgnCycle() Deleted...');
            })
            .catch((err) => {
		console.log('Home:deleteRgnCycle() error: ' + err);
            });
	// We need to re-render the page for getting
	// the results so redirect to same page.
	history('/')
	console.log('Home:deleteRgnCycle() Done.');
    };
  
    return (
	<div>
	    <h1>RgnCycle</h1>
            <table>
		<thead>
		    <tr>
			<th>id</th>
			<th>name</th>
			<th>lat</th>
			<th>lon</th>
		    </tr>
		</thead>
		<tbody>
		    {data.map((item,key) => {
			return(
			    <tr
				key={key}
			    >
				<td>{item[0]}</td>
				<td>{item[1]}</td>
				<td>{item[2]}</td>
				<td>{item[3]}</td>
				<td>
				    <Link
					to={`/update`}
				    >
					<button
					    onClick={(e) =>
						setRgnCycle(item[0],item[1])
					    }
					>
					    Update
					</button>
				    </Link>
				</td>
				<td>
				    <button
					onClick={e => deleteItem(item[0])
						}
				    >
					Delete
				    </button>
				</td>
			    </tr>
			)})}
		</tbody>
	    </table>
	    <Link
		to='/create-rgncycle'
	    >
		<button
		>
		    Create
		</button>
	    </Link>
	</div>
    );
};