Skip to content

Commit 3c7b481

Browse files
NishaNisha
Nisha
authored and
Nisha
committed
👌 IMPROVE: Update the code with comments
1 parent d4878bd commit 3c7b481

File tree

3 files changed

+202
-130
lines changed

3 files changed

+202
-130
lines changed

‎ui/src/component/Modal.js

+98-62
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,28 @@ import React, { useState } from 'react';
22
import Modal from 'react-bootstrap/Modal'
33
import Button from 'react-bootstrap/Button'
44
import InputGroup from 'react-bootstrap/InputGroup'
5+
import Form from 'react-bootstrap/Form'
56
import FormControl from 'react-bootstrap/FormControl'
7+
import Col from 'react-bootstrap/Col'
68
import { gql,useMutation } from '@apollo/client';
9+
import { client } from '../index';
710

811

9-
10-
const UpdateModal=({show,handleClose,item}) =>{
12+
const UpdateModal=({show, handleClose, item}) =>{
1113
const [state, setState] = useState({
1214
id: item[0],
1315
name: item[1],
1416
code: item[2],
1517
district: item[3],
1618
population: item[4]
1719
});
20+
const [validated, setValidated] = useState(false);
21+
1822

19-
const SET_MUATATION = gql `
23+
const SET_MUTATION = gql `
2024
mutation{
21-
addCity(cityId:${state.id},cityName:${state.name},cityCountrycode:${state.code},cityDistrict:${state.district},cityPopulation:${state.population}) {
22-
addCity{
25+
addCity(cityId:${state.id},cityName:"${state.name}",cityCountrycode:"${state.code}",cityDistrict:"${state.district}",cityPopulation:${state.population}) {
26+
city{
2327
cityId,
2428
cityName,
2529
cityCountrycode,
@@ -28,63 +32,89 @@ const UpdateModal=({show,handleClose,item}) =>{
2832
}
2933
}
3034
}`;
31-
const [addCity] = useMutation(SET_MUATATION);
35+
const DELETE_MUTATION = gql`
36+
mutation{
37+
deleteCity(cityId:${item[0]}) {
38+
city{
39+
cityId
40+
}
41+
}
42+
}`;
43+
const [ addCity ] = useMutation(SET_MUTATION);
44+
const [ deleteCity, { loading, error } ] = useMutation(DELETE_MUTATION);
3245

33-
const handleSave=(id)=>{
34-
console.log("save",id)
35-
addCity();
36-
}
46+
if (loading) return <p>Loading</p>;;
47+
if (error) return <p>An error occurred</p>;
48+
49+
const handleSubmit = (event) => {
50+
const form = event.currentTarget;
51+
52+
if (form.checkValidity() === false) {
53+
event.preventDefault();
54+
event.stopPropagation();
55+
} else {
56+
setValidated(true);
57+
addCity();
58+
handleClose();
59+
}
60+
};
61+
3762

38-
const handleDelete=()=>{
39-
const DELETE_MUATATION = gql`
40-
mutation{
41-
addCity(cityId:"${state.id}",cityName:"${state.name}",cityCountrycode:"${state.code}",cityDistrict:"${state.district}",cityPopulation:${state.population}) {
42-
addCity{
43-
cityId,
44-
cityName,
45-
cityCountrycode,
46-
cityDistrict,
47-
cityPopulation
48-
}
49-
}
50-
}`;
63+
const handleDelete = (event) => {
64+
deleteCity()
65+
handleClose()
5166
}
5267

5368
return (
5469
<>
55-
5670
<Modal show={show} onHide={handleClose}>
5771
<Modal.Header closeButton>
5872
<Modal.Title>Admin Panel</Modal.Title>
5973
</Modal.Header>
60-
<Modal.Body>Woohoo, you can now edit the records!</Modal.Body>
61-
<InputGroup className="mb-3">
62-
<FormControl
63-
placeholder={item[0]}
64-
aria-label="Id"
65-
//value={item[0]}
66-
onChange={e =>{
67-
let inputValue = e.target.value;
68-
(setState({
69-
...state,
70-
id: inputValue
71-
}
72-
))}}
73-
/>
74-
<FormControl
75-
placeholder={item[1]}
76-
aria-label="name"
77-
//value={item[1]}
78-
onChange={e =>
79-
{ let inputValue = e.target.value;
80-
setState({
81-
...state,
82-
name: inputValue
83-
})}}
84-
/>
74+
<Modal.Body>Woohoo, you can now edit the city records!</Modal.Body>
75+
<Form noValidate validated={validated} onSubmit={handleSubmit}>
76+
<Form.Group as={Col} md="4" >
77+
<Form.Label>Id</Form.Label>
78+
<FormControl
79+
placeholder={item[0]}
80+
required
81+
aria-label="Id"
82+
aria-describedby="Id"
83+
//defaultValue={item[0]}
84+
onChange={e =>{
85+
let inputValue = e.target.value;
86+
(setState({
87+
...state,
88+
id: inputValue
89+
}
90+
))}}
91+
/>
92+
</Form.Group>
93+
94+
<Form.Group as={Col} md="4" >
95+
<Form.Label>Name</Form.Label>
96+
<FormControl
97+
required
98+
placeholder={item[1]}
99+
aria-label="name"
100+
aria-describedby="name"
101+
// defaultValue={item[1]}
102+
onChange={e =>
103+
{ let inputValue = e.target.value;
104+
setState({
105+
...state,
106+
name: inputValue
107+
})}}
108+
/>
109+
</Form.Group>
110+
111+
<Form.Group as={Col} md="4" >
112+
<Form.Label>Code</Form.Label>
85113
<FormControl
114+
required
86115
placeholder={item[2]}
87116
aria-label="code"
117+
aria-describedby="code"
88118
//value={item[2]}
89119
onChange={e =>
90120
{ let inputValue = e.target.value;
@@ -93,9 +123,15 @@ const UpdateModal=({show,handleClose,item}) =>{
93123
code:inputValue
94124
})}}
95125
/>
126+
</Form.Group>
127+
128+
<Form.Group as={Col} md="4" >
129+
<Form.Label>District</Form.Label>
96130
<FormControl
131+
required
97132
placeholder={item[3]}
98133
aria-label="district"
134+
aria-describedby="district"
99135
//value={item[3]}
100136
onChange={e => {
101137
let inputValue = e.target.value;
@@ -104,30 +140,30 @@ const UpdateModal=({show,handleClose,item}) =>{
104140
district: inputValue
105141
})}}
106142
/>
143+
</Form.Group>
144+
145+
<Form.Group as={Col} md="4" >
146+
<Form.Label>Population</Form.Label>
107147
<FormControl
148+
required
108149
placeholder={item[4]}
109150
aria-label="population"
151+
aria-describedby="population"
110152
//value={item[4]}
111153
onChange={e =>
112154
{ let inputValue = e.target.value;
113155
setState({
114156
...state,
115157
population: inputValue
116-
})}}
117-
/>
118-
</InputGroup>
158+
})}}
159+
/>
160+
</Form.Group>
161+
119162
<Modal.Footer>
120-
<Button variant="secondary" onClick={handleDelete}>
121-
Delete
122-
</Button>
123-
<Button variant="primary" onClick={() => {
124-
handleSave(item[0])
125-
handleClose()
126-
}
127-
}>
128-
Save Changes
129-
</Button>
163+
<Button type="submit">Update</Button>
164+
<Button variant="secondary" onClick={handleDelete}> Delete </Button>
130165
</Modal.Footer>
166+
</Form>
131167
</Modal>
132168
</>
133169
);

‎ui/src/container/MapPage.js

+47-29
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import UpdateModal from '../component/Modal'
1313
import Row from 'react-bootstrap/Row'
1414
import Col from 'react-bootstrap/Col'
1515
import Map from 'collections/map';
16+
import Button from 'react-bootstrap/esm/Button';
1617

1718

1819
const Page = styled.div`
@@ -152,57 +153,70 @@ function MapPage() {
152153
show: false
153154
})
154155

155-
/* Get regions on map click */
156-
const handleMapClick = continentCode => {
156+
const toggleClose = item => setState({
157+
...state,
158+
selectedCity: null,
159+
selectedCountry: null,
160+
citiesMap: new Map(),
161+
item: '',
162+
show: false
163+
})
164+
165+
const toggleShow = item => {
166+
setState({
167+
...state,
168+
item: item,
169+
show: true
170+
})
171+
}
157172

173+
/* ************************************************************ */
174+
/* Get countries on map click
175+
/* ************************************************************ */
176+
const handleMapClick = continentCode => {
158177
const GET_REGIONS = gql`
159178
query {
160-
countries(countryContinent:"${worldMap[continentCode]}"){
179+
getAllCountries(countryContinent:"${worldMap[continentCode]}"){
161180
countryRegion,
162181
countryCode
163182
}
164183
}`;
165184
client.query({ query: GET_REGIONS }).then(result => {
166-
const uniqueRegionList = [...new Set(result.data.countries.map(item => item.countryRegion))];
185+
const uniqueRegionList = [...new Set(result.data.getAllCountries.map(item => item.countryRegion))];
167186
setState({
168187
...state,
169188
selectedContinentCode: continentCode,
189+
selectedCountry: null,
190+
selectedCity: null,
191+
selectedRegion: null,
192+
countriesMap: new Map(),
193+
citiesMap: new Map(),
170194
regionsList: uniqueRegionList,
171195
})
172196
});
173197
}
174-
175-
const toggleClose = item => setState({
176-
...state,
177-
show: false
178-
})
179-
180-
const toggleShow = item => {
181-
setState({
182-
...state,
183-
item: item,
184-
show: true
185-
})
186-
}
187-
198+
199+
/* ************************************************************ */
200+
/* Get regions on selected country
201+
/* ************************************************************ */
188202
function handleRegionClick(e) {
189203
let countryMap = new Map(),
190-
selectedRegion = e.target.textContent
204+
selectedRegion = e.target.textContent
191205
const GET_COUNTRIES = gql`
192206
query {
193-
regions(countryRegion:"${e.target.textContent}"){
207+
getAllRegions(countryRegion:"${e.target.textContent}"){
194208
countryName,
195209
countryCode
196210
}
197211
}`;
198212
client.query({
199213
query: GET_COUNTRIES
200214
}).then(result => {
201-
result.data.regions.forEach(item => {
215+
result.data.getAllRegions.forEach(item => {
202216
if (!countryMap.has(item.countryCode))
203217
return countryMap.set(item.countryCode, item.countryName)
204218
});
205-
setState({
219+
setState({
206220
...state,
207221
selectedRegion: selectedRegion,
208222
selectedCountry: '',
@@ -213,27 +227,29 @@ function MapPage() {
213227
});
214228
}
215229

230+
/* ************************************************************ */
231+
/* Get cities on selected country based on the country code
232+
/* ************************************************************ */
216233
function handleCountryClick(e) {
217234
let countryCode = e.target.id,
218-
selectedCountry = e.target.textContent,
219-
cityMap = new Map()
235+
selectedCountry = e.target.textContent,
236+
cityMap = new Map()
220237
const GET_CITIES = gql`
221238
query{
222-
allcities(cityCountrycode:"${countryCode}"){
239+
getAllCities(cityCountrycode:"${countryCode}"){
223240
cityId,
224241
cityName,
225242
cityCountrycode,
226243
cityDistrict,
227244
cityPopulation
228245
}
229246
}`;
230-
231247
client.query({ query: GET_CITIES }).then(result => {
232-
result.data.allcities.forEach(item => {
248+
result.data.getAllCities.forEach(item => {
233249
if (!cityMap.has(item.cityId))
234250
cityMap.set(item.cityId, [item.cityId, item.cityName, item.cityCountrycode, item.cityDistrict, item.cityPopulation])
235251
});
236-
setState({
252+
setState({
237253
...state,
238254
selectedCountry: selectedCountry,
239255
citiesMap: cityMap,
@@ -293,12 +309,14 @@ function MapPage() {
293309
</Card>
294310

295311
{/* Panel to show countries */}
312+
{/* <Button type="primary">Get more info</Button> */}
296313
<Card>
297314
<Accordion.Toggle as={Card.Header} eventKey="1">
298315
Countries filtered by selected region <b>{state.selectedRegion}</b> <span className="card-align">(Count:{state.countriesMap.size})</span>
299316
</Accordion.Toggle>
300317
<Accordion.Collapse eventKey="1">
301318
<Card.Body>
319+
Make a selection
302320
{
303321
state.countriesMap.map(((item, val) =>
304322
<ListGroup.Item id={val} onClick={handleCountryClick}>
@@ -317,7 +335,7 @@ function MapPage() {
317335
</Accordion.Toggle>
318336
<Accordion.Collapse eventKey="2">
319337
<Card.Body>
320-
Add country language info
338+
Make a selection again
321339
{state.citiesMap.map(((item, val) => <ListGroup.Item id={val} onClick={() => toggleShow(item)} >
322340
{item[1]} <span className="card-align">
323341
<AiFillEdit onClick={toggleShow} /> | <FaRegTrashAlt onClick={toggleShow} />

0 commit comments

Comments
 (0)