Skip to content

Commit 84f0d28

Browse files
Vvork Cloud TechnologiesVvork Cloud Technologies
Vvork Cloud Technologies
authored and
Vvork Cloud Technologies
committed
modal created
1 parent 25be695 commit 84f0d28

File tree

9 files changed

+26981
-26502
lines changed

9 files changed

+26981
-26502
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎dist/js/bundle.js

+26,715-26,492
Large diffs are not rendered by default.

‎dist/js/bundle.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/actions/index.js

+14
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,17 @@ export function deleteData(id){
4646
}
4747
}
4848

49+
export function updateData (id,data){
50+
return dispatch=>{
51+
dispatch({type:types.UPDATE_DATA_ATTEMPT})
52+
try{
53+
axios.post(`/student/${id}`)
54+
.then(data=>{
55+
dispatch({type:types.UPDATE_DATA_SUCCESS,payload:res.data})
56+
})
57+
}catch(e){
58+
dispatch({type:types.UPDATE_DATA_FAIL,payload:e})
59+
}
60+
}
61+
}
62+

‎src/js/components/App.jsx

+41-3
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@ import Contact from './Contact';
99
import Footer from './Footer'
1010
import * as actions from '../actions';
1111

12+
1213
class App extends React.Component{
1314

1415
state = {
1516
name:'',
1617
fatherName:'',
17-
address:''
18+
address:'',
19+
editIndex:null,
20+
show:false
1821
}
1922

2023
handleChange = e=>{
@@ -41,14 +44,49 @@ class App extends React.Component{
4144
deleteData = id=>{
4245
this.props.deleteData(id)
4346
}
47+
showModal= ()=>{
48+
this.setState({
49+
show:true
50+
})
51+
}
52+
closeModal=()=>{
53+
this.setState({
54+
editIndex:null
55+
})
56+
}
57+
setEditIndex = i=>{
58+
this.setState({
59+
editIndex:i
60+
})
61+
}
62+
63+
updateData = (id,data)=>{
64+
this.props.updateData(id,data)
65+
}
66+
4467
render(){
68+
console.log('this is the state in app',this.state)
4569
return(
4670
<div className='new'>
4771
<Menu />
4872
<div style={{height:'80vh'}}>
4973
<Switch>
5074
<Route exact path= '/' component={Home} />
51-
<Route exact path= '/contact' render = {routeProps=><Contact deleteData={this.deleteData} />} />
75+
<Route exact path= '/contact' render = {routeProps=>
76+
<Contact
77+
deleteData={this.deleteData}
78+
show={this.state.show}
79+
showModal={this.state.showModal}
80+
closeModal={this.closeModal}
81+
handleChange={this.handleChange}
82+
editIndex={this.state.editIndex}
83+
setEditIndex={this.setEditIndex}
84+
updateData={this.updateData}
85+
name={this.state.name}
86+
fatherName={this.state.fatherName}
87+
address={this.state.address}
88+
/>
89+
} />
5290
<Route exact path= '/services'
5391
render = {routeProps=> <Services
5492
submitData={this.submitData}
@@ -65,7 +103,7 @@ class App extends React.Component{
65103
}
66104
}
67105

68-
export default withRouter(connect(null,{getData:actions.getData,submitData:actions.submitData,deleteData:actions.deleteData})(App));
106+
export default withRouter(connect(null,{getData:actions.getData,submitData:actions.submitData,deleteData:actions.deleteData,updateData:actions.updateData})(App));
69107

70108

71109

‎src/js/components/Contact.jsx

+22-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,32 @@
1-
import React from "react";
1+
import React,{Fragment} from "react";
22
import {connect} from 'react-redux';
3+
import Modal from './Modal'
34

4-
const Contact = ({students,deleteData}) => {
5-
console.log('these are the student',students)
6-
const data = students.data.length ? students.data.map((item)=>(
5+
const Contact = ({students,deleteData,setEditIndex,editIndex,closeModal,handleChange,show,name,fahterName,address,updateData}) => {
6+
const data = students.data.length ? students.data.map((item,i)=>(
77
<tr key={item._id}>
88
<td>{item.name}</td>
99
<td>{item.fatherName}</td>
1010
<td>{item.address}</td>
1111
<td><i onClick={()=>deleteData(item._id)} className="fa fa-trash" /></td>
12+
<td><i className="fa fa-pencil" onClick={()=>setEditIndex(i)} /></td>
13+
<Fragment>
14+
{
15+
editIndex == i &&
16+
<Modal
17+
closeModal={closeModal}
18+
name={item.name}
19+
fatherName={item.fatherName}
20+
address={item.address}
21+
id={item.id}
22+
show={editIndex==i}
23+
handleChange={handleChange}
24+
updateData={updateData}
25+
/>
26+
}
27+
</Fragment>
1228
</tr>
13-
)):''
29+
)):null
1430
return (
1531
<div className="hero">
1632
<div className="container">
@@ -30,6 +46,7 @@ import {connect} from 'react-redux';
3046
</tbody>
3147
</table>
3248
</div>
49+
3350
</div>
3451
);
3552
}

‎src/js/components/Modal.js

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from "react";
2+
3+
const Modal = ({handleChange,name,fatherName,address,closeModal,show})=>(
4+
<div
5+
className="modal"
6+
tabindex="-1"
7+
role="dialog"
8+
style={{ display: show ? "block" : "none" }}
9+
>
10+
<div className="modal-dialog" role="document">
11+
<div className="modal-content">
12+
<div className="modal-header">
13+
<h5 className="modal-title">Modal title</h5>
14+
<button
15+
type="button"
16+
className="close"
17+
data-dismiss="modal"
18+
aria-label="Close"
19+
>
20+
<span aria-hidden="true">&times;</span>
21+
</button>
22+
</div>
23+
<div className="modal-body">
24+
<form>
25+
<div className="row">
26+
<div className="col-md-4">
27+
<input
28+
type="text"
29+
className="form-control"
30+
placeholder="First name"
31+
name="name"
32+
onChange={handleChange}
33+
value={name}
34+
/>
35+
</div>
36+
<div className="col-md-4">
37+
<input
38+
type="text"
39+
className="form-control"
40+
placeholder="Father name"
41+
name="fatherName"
42+
onChange={handleChange}
43+
value={fatherName}
44+
/>
45+
</div>
46+
</div>
47+
<div className="row">
48+
<div className="col-md-4">
49+
<input
50+
type="text"
51+
className="form-control"
52+
placeholder="Address"
53+
name="address"
54+
onChange={handleChange}
55+
value={address}
56+
/>
57+
</div>
58+
<div
59+
className="col-md-4"
60+
style={{ marginTop: 10 }}
61+
>
62+
<button
63+
type="submit"
64+
onClick={e => {
65+
e.preventDefault();
66+
submitData({
67+
name,
68+
fatherName,
69+
address
70+
});
71+
}}
72+
>
73+
Submit
74+
</button>
75+
</div>
76+
</div>
77+
</form>
78+
</div>
79+
<div className="modal-footer">
80+
<button type="button" className="btn btn-primary">
81+
Save changes
82+
</button>
83+
<button
84+
type="button"
85+
className="btn btn-secondary"
86+
data-dismiss="modal"
87+
onClick={closeModal}
88+
>
89+
Close
90+
</button>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
);
96+
export default Modal

‎src/js/components/Modal.jsx

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from "react";
2+
3+
const Modal = ({handleChange,name,fatherName,address,closeModal,show,updateData})=>(
4+
<div
5+
className="modal"
6+
tabIndex="-1"
7+
role="dialog"
8+
style={{ display: show ? "block" : "none" }}
9+
>
10+
<div className="modal-dialog">
11+
<div className="modal-content">
12+
<div className="modal-header">
13+
<h5 className="modal-title">Update Student</h5>
14+
</div>
15+
<div className="modal-body">
16+
<form>
17+
<div className="row">
18+
<div className="col-md-4">
19+
<input
20+
type="text"
21+
className="form-control"
22+
placeholder="First name"
23+
name="name"
24+
onChange={handleChange}
25+
value={name}
26+
/>
27+
</div>
28+
<div className="col-md-4">
29+
<input
30+
type="text"
31+
className="form-control"
32+
placeholder="Father name"
33+
name="fatherName"
34+
onChange={handleChange}
35+
value={fatherName}
36+
/>
37+
</div>
38+
</div>
39+
<div className="row">
40+
<div className="col-md-4">
41+
<input
42+
type="text"
43+
className="form-control"
44+
placeholder="Address"
45+
name="address"
46+
onChange={handleChange}
47+
value={address}
48+
/>
49+
</div>
50+
<div
51+
className="col-md-4"
52+
style={{ marginTop: 10 }}
53+
>
54+
<button
55+
type="submit"
56+
onClick={e => {
57+
e.preventDefault();
58+
updateData(item.id,{
59+
name,
60+
fatherName,
61+
address
62+
});
63+
}}
64+
>
65+
Submit
66+
</button>
67+
</div>
68+
</div>
69+
</form>
70+
</div>
71+
<div className="modal-footer">
72+
<button type="button" className="btn btn-primary">
73+
Save changes
74+
</button>
75+
<button
76+
type="button"
77+
className="btn btn-secondary"
78+
data-dismiss="modal"
79+
onClick={closeModal}
80+
>
81+
Close
82+
</button>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
);
88+
export default Modal

‎src/js/constants/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,7 @@ export const SUBMIT_DATA_ATTEMPT = 'SUBMIT_DATA_ATTEMPT';
66
export const SUBMIT_DATA_FAIL = 'SUBMIT_DATA_FAIL';
77
export const DELETE_DATA_SUCCESS = 'DELETE_DATA_SUCESS';
88
export const DELETE_DATA_ATTEMPT = 'DELETE_DATA_ATTEMPT';
9-
export const DELETE_DATA_FAIL = 'DELETE_DATA_FAIL';
9+
export const DELETE_DATA_FAIL = 'DELETE_DATA_FAIL';
10+
export const UPDATE_DATA_SUCCESS = 'UPDATE_DATA_SUCESS';
11+
export const UPDATE_DATA_ATTEMPT = 'UPDATE_DATA_ATTEMPT';
12+
export const UPDATE_DATA_FAIL = 'UPDATE_DATA_FAIL';

0 commit comments

Comments
 (0)