feat(crud): adjust home page

crud/src/components/home.js

@@ -1,10 +1,32 @@
-import React from 'react'
-import array from './array'; 
+import React, {useEffect,useState} from 'react'
 import { Link, useNavigate } from 'react-router-dom';
+import axios from 'axios';
   
-export default function Home() {
-  
-  let history = useNavigate()
+import array from './array';
+
+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
@@ -13,7 +35,39 @@ export default function Home() {
     localStorage.setItem('Name', name);
     localStorage.setItem('Age', age);
   }
-  
+
+    //del
+    const delRgncycle=()=>{
+	console.log('Home:delRgnCycle() Start...');
+	let config = {
+	    method: 'delete',
+	    maxBodyLength: Infinity,
+	    url: 'http://83.223.94.182:65535/entities/5/delete',
+	    headers: { }
+	};
+	axios.request(config)
+	    .then((response) => {
+		console.log('Home:delRgnCycle() Deleted...');
+	    })
+	    .catch((error) => {
+		console.log(error);
+	    });
+	console.log('Home:delRgnCycle() Done.');
+    };
+
+    //delete record using api
+    const deleteRgncycle=()=>{
+	console.log('Home:deleteRgnCycle() Start...');
+	axios
+            .delete('http://83.223.94.182:65535/entities/2/delete')
+            .then((response) => {
+		console.log('Home:deleteRgnCycle() Deleted...');
+            })
+            .catch((err) => {
+		console.log('Home:deleteRgnCycle() error: ' + err);
+            });
+	console.log('Home:deleteRgnCycle() Done.');
+    };
   // Deleted function - functionality 
   // for deleting the entry
   function deleted(id){
@@ -30,6 +84,7 @@ export default function Home() {
   
     return (
 	<div>
+	    <h1>Array</h1>
             <table>
 		<thead>
 		    <tr>
@@ -38,8 +93,6 @@ export default function Home() {
 		    </tr>
 		</thead>
 		<tbody>
-		    {/* Mapping though every element in the array
-			and showing the data in the form of table */}
 		    {array.map((item,key) => {
 			return(
 			    <tr
@@ -47,8 +100,6 @@ export default function Home() {
 			    >
 				<td>{item.Name}</td>
 				<td>{item.Age}</td>
-				{/* getting theid,name, and age for storing these
-				    value in the jsx with onclick event */}
 				<td><Link
 					to={`/edit`}
 				    >
@@ -60,8 +111,6 @@ export default function Home() {
 					</button>
 				    </Link>
 				</td>
-				{/* Using thr deleted function passing
-				    the id of an entry */}
 				<td>
 				    <button
 					onClick={e => deleted(item.id)}
@@ -73,8 +122,6 @@ export default function Home() {
 			)})}
 		</tbody>
 	    </table>
-	    {/* button for redirecting to create page for
-		insertion of values */}
 	    <Link
 		to='/create'
 	    >
@@ -83,6 +130,52 @@ export default function Home() {
 		    Create
 		</button>
 	    </Link>
+	    <h1>RgnCycle</h1>
+            <table>
+		<thead>
+		    <tr>
+			<th>Id</th>
+			<th>Name</th>
+		    </tr>
+		</thead>
+		<tbody>
+		    {data.map((item,key) => {
+			return(
+			    <tr
+				key={key}
+			    >
+				<td>{item[0]}</td>
+				<td>{item[1]}</td>
+				<td><Link
+					to={`/update`}
+				    >
+					<button
+					    onClick={(e) =>
+						setID(item.id,item.Name,item.Age)}
+					>
+					    Update
+					</button>
+				    </Link>
+				</td>
+				<td>
+				    <button
+					onClick={e => delRgncycle(item.id)}
+				    >
+					Delete
+				    </button>
+				</td>
+			    </tr>
+			)})}
+		</tbody>
+	    </table>
+	    <Link
+		to='/create-rgncycle'
+	    >
+		<button
+		>
+		    Create
+		</button>
+	    </Link>
 	</div>
     );
 };