/
App.js
121 lines (114 loc) · 3.72 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { useState, useEffect } from 'react';
import './App.css';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import { Grid, Button } from '@material-ui/core'
import FormDialog from './components/dialog';
const initialValue = { name: "", email: "", phone: "", dob: "" }
function App() {
const [gridApi, setGridApi] = useState(null)
const [tableData, setTableData] = useState(null)
const [open, setOpen] = React.useState(false);
const [formData, setFormData] = useState(initialValue)
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
setFormData(initialValue)
};
const url = `http://localhost:4000/users`
const columnDefs = [
{ headerName: "ID", field: "id" },
{ headerName: "Name", field: "name", },
{ headerName: "Email", field: "email", },
{ headerName: "phone", field: "phone" },
{ headerName: "Date of Birth", field: "dob" },
{
headerName: "Actions", field: "id", cellRendererFramework: (params) => <div>
<Button variant="outlined" color="primary" onClick={() => handleUpdate(params.data)}>Update</Button>
<Button variant="outlined" color="secondary" onClick={() => handleDelete(params.value)}>Delete</Button>
</div>
}
]
// calling getUsers function for first time
useEffect(() => {
getUsers()
}, [])
//fetching user data from server
const getUsers = () => {
fetch(url).then(resp => resp.json()).then(resp => setTableData(resp))
}
const onChange = (e) => {
const { value, id } = e.target
// console.log(value,id)
setFormData({ ...formData, [id]: value })
}
const onGridReady = (params) => {
setGridApi(params)
}
// setting update row data to form data and opening pop up window
const handleUpdate = (oldData) => {
setFormData(oldData)
handleClickOpen()
}
//deleting a user
const handleDelete = (id) => {
const confirm = window.confirm("Are you sure, you want to delete this row", id)
if (confirm) {
fetch(url + `/${id}`, { method: "DELETE" }).then(resp => resp.json()).then(resp => getUsers())
}
}
const handleFormSubmit = () => {
if (formData.id) {
//updating a user
const confirm = window.confirm("Are you sure, you want to update this row ?")
confirm && fetch(url + `/${formData.id}`, {
method: "PUT", body: JSON.stringify(formData), headers: {
'content-type': "application/json"
}
}).then(resp => resp.json())
.then(resp => {
handleClose()
getUsers()
})
} else {
// adding new user
fetch(url, {
method: "POST", body: JSON.stringify(formData), headers: {
'content-type': "application/json"
}
}).then(resp => resp.json())
.then(resp => {
handleClose()
getUsers()
})
}
}
const defaultColDef = {
sortable: true,
flex: 1, filter: true,
floatingFilter: true
}
return (
<div className="App">
<h1 align="center">React-App</h1>
<h3>CRUD Operation with Json-server in ag-Grid</h3>
<Grid align="right">
<Button variant="contained" color="primary" onClick={handleClickOpen}>Add user</Button>
</Grid>
<div className="ag-theme-alpine" style={{ height: '400px' }}>
<AgGridReact
rowData={tableData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
onGridReady={onGridReady}
/>
</div>
<FormDialog open={open} handleClose={handleClose}
data={formData} onChange={onChange} handleFormSubmit={handleFormSubmit} />
</div>
);
}
export default App;