feat(crud): add create page
This commit is contained in:
parent
2228eb090b
commit
5cf964b74d
|
|
@ -2,6 +2,7 @@ import React from 'react'
|
|||
import { BrowserRouter as Router,Route, Routes }
|
||||
from 'react-router-dom';
|
||||
import Create from './components/create';
|
||||
import CreateRgnCycle from './components/create-rgn-cycle';
|
||||
import Edit from './components/edit';
|
||||
import Home from './components/home';
|
||||
import Update from './components/update';
|
||||
|
|
@ -13,6 +14,7 @@ function App() {
|
|||
<Routes>
|
||||
<Route path='/' element={<Home/>}/>
|
||||
<Route path='/create' element={<Create/>}/>
|
||||
<Route path='/create-rgncycle' element={<CreateRgnCycle/>}/>
|
||||
<Route path='/edit' element={<Edit/>}/>
|
||||
<Route path='/update' element={<Update/>}/>
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
import React, { useState } from 'react'
|
||||
import array from './array';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
export default function Create() {
|
||||
|
||||
// Making usestate for setting and
|
||||
// fetching a value in jsx
|
||||
const [name, setName] = useState('');
|
||||
|
||||
// Using useNavigation for redirecting to pages
|
||||
let history = useNavigate();
|
||||
|
||||
async function createItem(e){
|
||||
e.preventDefault();
|
||||
//console.log("Home:createItem() name: " + name);
|
||||
const url='http://83.223.94.182:65535/entities/create';
|
||||
//console.log('Home:createItem() url: ' + url);
|
||||
let data = new FormData();
|
||||
data.append('name',name);
|
||||
return fetch(url, {
|
||||
method: "POST",
|
||||
mode: "cors",
|
||||
body: data
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
console.error('Home:createItem() rsp error: ' + response);
|
||||
}else{
|
||||
//console.log('Home:createItem() rsp fine');
|
||||
// We need to re-render the page for getting
|
||||
// the results so redirect to same page.
|
||||
history('/')
|
||||
//console.log('Home:createItem() Done.');
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Home:createItem() error: ' + error);
|
||||
// We need to re-render the page for getting
|
||||
// the results so redirect to same page.
|
||||
//console.log('Home:createItem() Done.');
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Create</h1>
|
||||
<form
|
||||
onSubmit={e => createItem(e)}
|
||||
>
|
||||
<label>
|
||||
Enter name (input:{name}):
|
||||
<input
|
||||
onChange={e => setName(name => e.target.value)}
|
||||
type="text"
|
||||
value={name}
|
||||
placeholder="Enter Name"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
onClick={e => createItem(e)}
|
||||
type="submit"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<Link
|
||||
to='/'
|
||||
>
|
||||
<button>
|
||||
Home
|
||||
</button>
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -2,8 +2,6 @@ import React, {useEffect,useState} from 'react'
|
|||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
|
||||
import array from './array';
|
||||
|
||||
export default function Home(){
|
||||
|
||||
//get data
|
||||
|
|
@ -27,44 +25,84 @@ export default function Home(){
|
|||
},[]);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// 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);
|
||||
//console.log('Home:setRgnCycle() id: ' + id);
|
||||
//console.log('Home:setRgnCycle() name: ' + name);
|
||||
//TODO Study localStorage!
|
||||
localStorage.setItem('rgnCycleId', id);
|
||||
localStorage.setItem('rgnCycleName', name);
|
||||
}
|
||||
|
||||
//del
|
||||
const delRgnCycle=(id)=>{
|
||||
console.log('Home:delRgnCycle() Start...');
|
||||
|
||||
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: 'http://83.223.94.182:65535/entities/31/delete',
|
||||
url: url,
|
||||
headers: { }
|
||||
};
|
||||
axios.request(config)
|
||||
.then((response) => {
|
||||
console.log('Home:delRgnCycle() Deleted...');
|
||||
console.log('Home:postRgnCycle() Deleted...');
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
console.error('Home:postRgnCycle() error: ' + error);
|
||||
});
|
||||
console.log('Home:delRgnCycle() Done.');
|
||||
// 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) => {
|
||||
|
|
@ -78,68 +116,9 @@ export default function Home(){
|
|||
history('/')
|
||||
console.log('Home:deleteRgnCycle() Done.');
|
||||
};
|
||||
// Deleted function - functionality
|
||||
// for deleting the entry
|
||||
function deleted(id){
|
||||
|
||||
var index = array.map(function(e) { return e.id; }).indexOf(id);
|
||||
|
||||
// deleting the entry with index
|
||||
array.splice(index,1)
|
||||
|
||||
// We need to re-render the page for getting
|
||||
// the results so redirect to same page.
|
||||
history('/')
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Array</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{array.map((item,key) => {
|
||||
return(
|
||||
<tr
|
||||
key={key}
|
||||
>
|
||||
<td>{item.Name}</td>
|
||||
<td>{item.Age}</td>
|
||||
<td><Link
|
||||
to={`/edit`}
|
||||
>
|
||||
<button
|
||||
onClick={(e) =>
|
||||
setID(item.id,item.Name,item.Age)}
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
onClick={e => deleted(item.id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)})}
|
||||
</tbody>
|
||||
</table>
|
||||
<Link
|
||||
to='/create'
|
||||
>
|
||||
<button
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</Link>
|
||||
<h1>RgnCycle</h1>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -170,7 +149,7 @@ export default function Home(){
|
|||
</td>
|
||||
<td>
|
||||
<button
|
||||
onClick={e => deleteRgnCycle(item[0])
|
||||
onClick={e => deleteItem(item[0])
|
||||
}
|
||||
>
|
||||
Delete
|
||||
|
|
|
|||
|
|
@ -1,70 +1,130 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import array from './array';
|
||||
import { Link} from 'react-router-dom';
|
||||
import {useNavigate} from 'react-router-dom';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
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('');
|
||||
const [name, setName] = 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
|
||||
|
||||
async function updateItem(e){
|
||||
e.preventDefault();
|
||||
//console.log("Home:updateItem() id: " + id);
|
||||
//console.log("Home:updateItem() name: " + name);
|
||||
const url='http://83.223.94.182:65535/entities/'+id+'/update';
|
||||
//console.log('Home:updateItem() url: ' + url);
|
||||
let data = new FormData();
|
||||
data.append('name',name);
|
||||
return fetch(url, {
|
||||
method: "POST",
|
||||
mode: "cors",
|
||||
body: data
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
console.error('Home:updateItem() rsp error: ' + response);
|
||||
}else{
|
||||
//console.log('Home:updateItem() rsp fine');
|
||||
// We need to re-render the page for getting
|
||||
// the results so redirect to same page.
|
||||
history('/')
|
||||
//console.log('Home:updateItem() Done.');
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Home:updateItem() error: ' + error);
|
||||
// We need to re-render the page for getting
|
||||
// the results so redirect to same page.
|
||||
//console.log('Home:updateItem() Done.');
|
||||
});
|
||||
};
|
||||
|
||||
//TODO Why is this function not working?
|
||||
const postData = (e) => {
|
||||
e.preventDefault();
|
||||
console.log('postData() id: '+id);
|
||||
console.log('postData() name: '+name);
|
||||
const url='http://83.223.94.182:65535/entities/'+id+'/update';
|
||||
console.log('postData() url: '+url);
|
||||
let data = new FormData();
|
||||
data.append('name',name);
|
||||
let config = {
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
},
|
||||
maxBodyLength: Infinity,
|
||||
url: url,
|
||||
data : data
|
||||
};
|
||||
axios.request(config)
|
||||
.then(rsp => {
|
||||
if (!rsp.ok) {
|
||||
console.error('Home:postData() rsp error: ' + JSON.stringify(rsp));
|
||||
}else{
|
||||
//console.log('Home:postData() rsp fine');
|
||||
// We need to re-render the page for getting
|
||||
// the results so redirect to same page.
|
||||
history('/')
|
||||
//console.log('Home:postData() Done.');
|
||||
}
|
||||
console.log('postData() rsp: ' + rsp.data)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('postData() axios error: '+error);
|
||||
});
|
||||
};
|
||||
//TODO Why is this function not working?
|
||||
const postUpdate = (e) => {
|
||||
e.preventDefault();
|
||||
console.log('postUpdate() id: '+id);
|
||||
console.log('postUpdate() name: '+name);
|
||||
const url='http://83.223.94.182:65535/entities/'+id+'/update';
|
||||
console.log('postUpdate() url: '+url);
|
||||
let data = new FormData();
|
||||
data.append('name',name);
|
||||
//const data = { 'name': name};
|
||||
//const data = 'name='+name;
|
||||
console.log('postUpdate() data: '+data);
|
||||
const headers = {
|
||||
'Content-Type': 'text/plain',
|
||||
};
|
||||
axios.post(url, data, {headers})
|
||||
.then(rsp => {
|
||||
console.log('postData() rsp: ' + rsp.data)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('postData() axios error: '+error);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setname(localStorage.getItem('Name'))
|
||||
setage(localStorage.getItem('Age'))
|
||||
setid(localStorage.getItem('id'))
|
||||
setName(localStorage.getItem('rgnCycleName'))
|
||||
setId(localStorage.getItem('rgnCycleId'))
|
||||
}, [])
|
||||
return(
|
||||
<div>
|
||||
<h1>Update</h1>
|
||||
<form
|
||||
onSubmit={e => handelSubmit(e)}
|
||||
onSubmit={e => updateItem(e)}
|
||||
>
|
||||
<label>
|
||||
Enter name (input:{name}):
|
||||
<input
|
||||
onChange={e => setname(e.target.value)}
|
||||
onChange={e => setName(name => e.target.value)}
|
||||
type="text"
|
||||
value={name}
|
||||
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)}
|
||||
onClick={e => updateItem(e)}
|
||||
type="submit"
|
||||
>
|
||||
Update
|
||||
|
|
|
|||
Loading…
Reference in New Issue