feat(crud): add update page

crud/src/app.js

@@ -4,6 +4,7 @@ import { BrowserRouter as Router,Route, Routes }
 import Create from './components/create';
 import Edit from './components/edit';
 import Home from './components/home';
+import Update from './components/update';
   
 function App() {
     return (
@@ -13,6 +14,7 @@ function App() {
 		    <Route path='/' element={<Home/>}/>
 		    <Route path='/create' element={<Create/>}/>
 		    <Route path='/edit' element={<Edit/>}/>
+		    <Route path='/update' element={<Update/>}/>
 		</Routes>
 	    </Router>
 	</div>

crud/src/components/home.js

@@ -36,13 +36,18 @@ export default function Home(){
     localStorage.setItem('Age', age);
   }
 
+    function setRgnCycle(id,name){
+	console.log('Home:setRgnCycle() id: ' + id);
+	console.log('Home:setRgnCycle() name: ' + name);
+    }
+
     //del
-    const delRgncycle=()=>{
+    const delRgnCycle=(id)=>{
 	console.log('Home:delRgnCycle() Start...');
 	let config = {
-	    method: 'delete',
+	    method: 'post',
 	    maxBodyLength: Infinity,
-	    url: 'http://83.223.94.182:65535/entities/5/delete',
+	    url: 'http://83.223.94.182:65535/entities/31/delete',
 	    headers: { }
 	};
 	axios.request(config)
@@ -56,16 +61,21 @@ export default function Home(){
     };
 
     //delete record using api
-    const deleteRgncycle=()=>{
+    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';
 	axios
-            .delete('http://83.223.94.182:65535/entities/2/delete')
+            .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.');
     };
   // Deleted function - functionality 
@@ -151,7 +161,8 @@ export default function Home(){
 				    >
 					<button
 					    onClick={(e) =>
-						setID(item.id,item.Name,item.Age)}
+						setRgnCycle(item[0],item[1])
+					    }
 					>
 					    Update
 					</button>
@@ -159,7 +170,8 @@ export default function Home(){
 				</td>
 				<td>
 				    <button
-					onClick={e => delRgncycle(item.id)}
+					onClick={e => deleteRgnCycle(item[0])
+						}
 				    >
 					Delete
 				    </button>

crud/src/components/update.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react'
+import array from './array';
+import { Link} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
+  
+export default function Update() {
+  
+    // Here usestate has been used in order
+    // to set and get values from the jsx
+    const [name, setname] = useState('');
+    const [age, setage] = useState('');
+    const[id,setid] = useState('');
+  
+    // used for navigation with logic in javascript
+    let history = useNavigate()
+      
+    // getting an index of an entry with an id
+    var index = array.map(function(e) { return e.id; }).indexOf(id);
+  
+    // function for handling the edit and 
+    // pushing changes of editing/updating
+    const handelSubmit = (e) =>{
+        e.preventDefault(); // preventing from reload
+          
+        let a = array[index] // getting an index of an array
+  
+        // putting the value from the input textfield and
+        // replacing it from existing for updation
+        a.Name = name
+        a.Age = age
+  
+        // redirecting to main page
+        history('/')
+    }
+  
+  
+    // Useeffect take care that page will be rendered only once
+    useEffect(() => {
+        setname(localStorage.getItem('Name'))
+        setage(localStorage.getItem('Age'))
+        setid(localStorage.getItem('id'))
+    }, [])
+    return(
+	<div>
+	    <h1>Update</h1>
+	    <form
+		onSubmit={e => handelSubmit(e)}
+	    >
+		<label>
+		    Enter name (input:{name}):
+		    <input
+			onChange={e => setname(e.target.value)}
+			type="text"
+			placeholder="Enter Name"
+		    />
+		</label>
+		<label>
+		    Enter name (input:{age}):
+		    <input
+			value={age}
+			onChange={e => setage(e.target.value)}
+			type="text"
+			placeholder="Enter Age"
+		    />
+		</label>
+		<button
+		    onClick={e => handelSubmit(e)}
+		    type="submit"
+		>
+		    Update
+		</button>
+		<Link
+		    to='/'
+		>
+		    <button>
+			Home
+		    </button>
+		</Link>
+	    </form>
+	</div>
+    );
+};