Skip to content

Commit 399f2a3

Browse files
panshakpanshak
authored
Merge pull request #27 from avisekhgurung/feature/avisekh
IS-119 dialog auto closed when clicked outside
2 parents b84703b + afbcd48 commit 399f2a3

1 file changed

Lines changed: 98 additions & 90 deletions

File tree

‎client/src/components/Clients/AddClient.js‎

Lines changed: 98 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
/* eslint-disable */
2-
import React, { useState, useEffect} from 'react';
1+
/* eslint-disable */
2+
import React, { useState, useEffect } from 'react';
33
import { useLocation } from 'react-router-dom';
44
import { withStyles } from '@material-ui/core/styles';
55
import Button from '@material-ui/core/Button';
@@ -58,55 +58,55 @@ const DialogActions = withStyles((theme) => ({
5858
}))(MuiDialogActions);
5959

6060
const AddClient = ({ setOpen, open, currentId, setCurrentId }) => {
61-
const location = useLocation()
62-
const [clientData, setClientData] = useState({ name: '', email: '', phone: '', address: '', userId: ''})
63-
const [user, setUser] = useState(JSON.parse(localStorage.getItem('profile')))
64-
const dispatch = useDispatch()
65-
const client = useSelector((state)=> currentId ? state.clients.clients.find((c) => c._id === currentId) : null)
66-
// eslint-disable-next-line
67-
const [openSnackbar, closeSnackbar] = useSnackbar()
68-
69-
70-
useEffect(() => {
71-
if(client) {
72-
setClientData(client)
73-
}
74-
}, [client])
75-
76-
useEffect(() => {
77-
setUser(JSON.parse(localStorage.getItem('profile')))
78-
// setClientData({...clientData, userId: user?.result?._id})
79-
},[location])
80-
81-
82-
useEffect(() => {
83-
var checkId = user?.result?._id
84-
if(checkId !== undefined) {
85-
setClientData({...clientData, userId: [checkId]})
86-
} else {
87-
setClientData({...clientData, userId: [user?.result?.googleId]})
88-
}
89-
90-
},[location])
91-
92-
93-
const handleSubmitClient =(e)=> {
94-
e.preventDefault()
95-
if(currentId) {
96-
dispatch(updateClient(currentId, clientData, openSnackbar))
97-
} else {
98-
dispatch(createClient(clientData, openSnackbar))
99-
}
100-
101-
clear()
102-
handleClose()
61+
const location = useLocation()
62+
const [clientData, setClientData] = useState({ name: '', email: '', phone: '', address: '', userId: '' })
63+
const [user, setUser] = useState(JSON.parse(localStorage.getItem('profile')))
64+
const dispatch = useDispatch()
65+
const client = useSelector((state) => currentId ? state.clients.clients.find((c) => c._id === currentId) : null)
66+
// eslint-disable-next-line
67+
const [openSnackbar, closeSnackbar] = useSnackbar()
68+
69+
70+
useEffect(() => {
71+
if (client) {
72+
setClientData(client)
10373
}
74+
}, [client])
10475

105-
const clear =() => {
106-
setCurrentId(null)
76+
useEffect(() => {
77+
setUser(JSON.parse(localStorage.getItem('profile')))
78+
// setClientData({...clientData, userId: user?.result?._id})
79+
}, [location])
80+
81+
82+
useEffect(() => {
83+
var checkId = user?.result?._id
84+
if (checkId !== undefined) {
85+
setClientData({ ...clientData, userId: [checkId] })
86+
} else {
87+
setClientData({ ...clientData, userId: [user?.result?.googleId] })
88+
}
89+
90+
}, [location])
91+
92+
93+
const handleSubmitClient = (e) => {
94+
e.preventDefault()
95+
if (currentId) {
96+
dispatch(updateClient(currentId, clientData, openSnackbar))
97+
} else {
98+
dispatch(createClient(clientData, openSnackbar))
99+
}
100+
101+
clear()
102+
handleClose()
103+
}
104+
105+
const clear = () => {
106+
setCurrentId(null)
107107
setClientData({ name: '', email: '', phone: '', address: '', userId: [] })
108108
}
109-
109+
110110
const handleClose = () => {
111111
setOpen(false);
112112
};
@@ -127,65 +127,73 @@ const AddClient = ({ setOpen, open, currentId, setCurrentId }) => {
127127
borderLeft: "0",
128128
borderRadius: "3px",
129129
transition: "all 0.25s cubic-bezier(0.4, 0, 1, 1)"
130-
}
130+
}
131131

132132

133133
return (
134134
<div>
135-
<form >
136-
<Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open} fullWidth>
137-
<DialogTitle id="customized-dialog-title" onClose={handleClose} style={{paddingLeft: '20px', color: 'white'}}>
138-
{currentId? 'Edit Customer' : 'Add new Client'}
139-
</DialogTitle>
140-
<DialogContent dividers>
135+
<form >
136+
<Dialog
137+
onClose={(e, reason) => {
138+
if (reason !== 'backdropClick') {
139+
handleClose()
140+
}
141+
}}
142+
aria-labelledby="customized-dialog-title"
143+
open={open} fullWidth
144+
>
145+
<DialogTitle id="customized-dialog-title" onClose={handleClose} style={{ paddingLeft: '20px', color: 'white' }}>
146+
{currentId ? 'Edit Customer' : 'Add new Client'}
147+
</DialogTitle>
148+
<DialogContent dividers>
141149

142150

143151
<div className="customInputs">
144-
<input
145-
placeholder="Name"
146-
style={inputStyle}
147-
name='name'
148-
type='text'
149-
onChange={(e) => setClientData({...clientData, name: e.target.value})}
150-
value={clientData.name}
152+
<input
153+
placeholder="Name"
154+
style={inputStyle}
155+
name='name'
156+
type='text'
157+
onChange={(e) => setClientData({ ...clientData, name: e.target.value })}
158+
value={clientData.name}
151159
/>
152160

153-
<input
154-
placeholder="Email"
155-
style={inputStyle}
156-
name='email'
157-
type='text'
158-
onChange={(e) => setClientData({...clientData, email: e.target.value})}
159-
value={clientData.email}
161+
<input
162+
placeholder="Email"
163+
style={inputStyle}
164+
name='email'
165+
type='text'
166+
onChange={(e) => setClientData({ ...clientData, email: e.target.value })}
167+
value={clientData.email}
160168
/>
161169

162-
<input
163-
placeholder="Phone"
164-
style={inputStyle}
165-
name='phone'
166-
type='text'
167-
onChange={(e) => setClientData({...clientData, phone: e.target.value})}
168-
value={clientData.phone}
170+
<input
171+
placeholder="Phone"
172+
style={inputStyle}
173+
name='phone'
174+
type='text'
175+
onChange={(e) => setClientData({ ...clientData, phone: e.target.value })}
176+
value={clientData.phone}
169177
/>
170178

171-
<input
172-
placeholder="Address"
173-
style={inputStyle}
174-
name='address'
175-
type='text'
176-
onChange={(e) => setClientData({...clientData, address: e.target.value})}
177-
value={clientData.address}
179+
<input
180+
placeholder="Address"
181+
style={inputStyle}
182+
name='address'
183+
type='text'
184+
onChange={(e) => setClientData({ ...clientData, address: e.target.value })}
185+
value={clientData.address}
178186
/>
179-
</div>
187+
</div>
180188

181-
</DialogContent>
182-
<DialogActions>
183-
<Button onClick={handleSubmitClient} variant="contained" style={{marginRight: '25px'}} >
184-
Save Customer
189+
</DialogContent>
190+
<DialogActions>
191+
<Button onClick={handleSubmitClient} variant="contained" style={{ marginRight: '25px' }} >
192+
Save Customer
185193
</Button>
186-
</DialogActions>
187-
</Dialog>
188-
</form>
194+
</DialogActions>
195+
</Dialog>
196+
</form>
189197
</div>
190198
);
191199
}

0 commit comments

Comments
 (0)