Skip to content

Commit df862bb

Browse files
academicpaintacademicpaint
committed
Added address lookup
1 parent 9b1752b commit df862bb

File tree

8 files changed

+10407
-10565
lines changed

8 files changed

+10407
-10565
lines changed

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@
1111
"react": "^17.0.2",
1212
"react-bootstrap": "^2.0.0-rc.1",
1313
"react-dom": "^17.0.2",
14+
"react-google-autocomplete": "^2.4.3",
15+
"react-location-picker": "^1.5.0",
1416
"react-router-bootstrap": "^0.25.0",
1517
"react-router-dom": "^5.3.0",
1618
"react-scripts": "4.0.3",
19+
"use-places-autocomplete": "^1.9.4",
1720
"web-vitals": "^1.0.1"
1821
},
1922
"scripts": {

‎public/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
2727
<title>Include Involve Inspire</title>
28+
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvBWydJ68CetsmnvfQ4rba6tgZTFQxtek&v=3.exp&libraries=geometry,drawing,places"></script>
2829
</head>
2930
<body>
3031
<noscript>You need to enable JavaScript to run this app.</noscript>
@@ -42,5 +43,7 @@
4243

4344
<!-- Voice over script -->
4445
<!-- <script src="https://code.responsivevoice.org/responsivevoice.js?key=w14rbLTN"></script> -->
46+
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvBWydJ68CetsmnvfQ4rba6tgZTFQxtek&v=3.exp&libraries=geometry,drawing,places"></script> -->
47+
<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
4548
</body>
4649
</html>

‎src/App.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import Registration from './signup/resgistration';
1111
import HowItWorks from './howitworks/howitworks';
1212
import HowItWork from './howitworks/howitwork';
1313

14-
1514
function App() {
1615
return (
1716
<>
@@ -41,10 +40,11 @@ function App() {
4140
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
4241
</symbol>
4342
<symbol id="geo" viewBox="0 0 16 16">
44-
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
45-
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
43+
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" />
44+
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
4645
</symbol>
4746
</svg>
47+
4848
<Switch>
4949
<Route path="/" exact component={Home} />
5050
<Route path="/SignIn" component={SignIn} />
@@ -56,6 +56,7 @@ function App() {
5656
<Route path="/HowItWorks" component={HowItWorks} />
5757
<Route path="/HowItWork" component={HowItWork} />
5858
</Switch>
59+
5960
</>
6061
);
6162
}

‎src/help/needhelp.js

+5-22
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
22
import Form from 'react-bootstrap/Form';
33
import Button from 'react-bootstrap/esm/Button';
44
import LogoutNavBar from '../navbar/logoutnavbar';
5+
import PlacesAutocomplete from '../locationpicker/auto';
56

67
export default function NeedHelp(props) {
78

@@ -30,7 +31,6 @@ export default function NeedHelp(props) {
3031
return (
3132
<>
3233
<LogoutNavBar></LogoutNavBar>
33-
3434
<div className="container px-4 py-5">
3535
<h1 className="display-5 fw-bold lh-1 mb-3">Request Help</h1>
3636
<p className="lead mb-5">Please provide some more information about yourself and the kind of help you need.</p>
@@ -95,31 +95,14 @@ export default function NeedHelp(props) {
9595
Please input a valid Time.
9696
</Form.Control.Feedback>
9797
</Form.Group>
98-
9998
</div>
10099
<div className="col-sm-12">
101-
<Form.Group size="lg" controlId="pickupLocation">
102-
<Form.Label className="form-label">Pickup Location</Form.Label>
103-
<Form.Control className="form-control"
104-
type="text"
105-
name="label"
106-
required />
107-
<Form.Control.Feedback type="invalid" className="invalid-feedback">
108-
Valid pickup location is required.
109-
</Form.Control.Feedback>
110-
</Form.Group>
100+
<label className="form-label mr-auto" htmlFor="address">Pickup Location</label>
101+
<PlacesAutocomplete></PlacesAutocomplete>
111102
</div>
112103
<div className="col-sm-12">
113-
<Form.Group size="lg" controlId="destination">
114-
<Form.Label className="form-label">Destination</Form.Label>
115-
<Form.Control className="form-control"
116-
type="text"
117-
name="destination"
118-
required />
119-
<Form.Control.Feedback type="invalid" className="invalid-feedback">
120-
Valid destination location is required
121-
</Form.Control.Feedback>
122-
</Form.Group>
104+
<label className="form-label mr-auto" htmlFor="address">Destination</label>
105+
<PlacesAutocomplete></PlacesAutocomplete>
123106
</div>
124107
<div className="col-md-12">
125108
<Form.Group className="mb-3">

‎src/landingpage/landingpage.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,8 @@ export default function LandingPage(props) {
116116
</div>
117117
</div>
118118
<div className="col">
119-
<div className="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style={{ backgroundImage: `url(${Hospital})` }} data-bs-toggle="modal" data-bs-target="#exampleModal">
119+
<div className="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style={{ backgroundImage: `url(${Hospital})` }}
120+
data-bs-toggle="modal" data-bs-target="#exampleModal">
120121
<div className="d-flex flex-column h-100 p-4 px-md-5 text-white">
121122
<div className="d-flex justify-content-end">
122123
<span className="badge bg-success w-badge">Scheduled</span>
@@ -157,7 +158,7 @@ export default function LandingPage(props) {
157158
</div>
158159
</div>
159160
<div className="col-md-4">
160-
<div className="position-sticky" style={{top: '100px'}}>
161+
<div className="position-sticky" style={{ top: '100px' }}>
161162
<div className="p-4 mb-5 bg-light rounded shadow border">
162163
<h5>Feeling low?</h5>
163164
<p>Activate Happiness Together with us now!</p>
@@ -170,7 +171,7 @@ export default function LandingPage(props) {
170171
<div className="p-4 mb-5 bg-light rounded shadow border">
171172
<h5>Help is on your way</h5>
172173
<p className="mb-0">
173-
Esther will reach out to you!<br/>
174+
Esther will reach out to you!<br />
174175
Contact Details yet to be added
175176
</p>
176177
</div>

‎src/locationpicker/auto.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import usePlacesAutocomplete, {
2+
getGeocode,
3+
getLatLng,
4+
} from "use-places-autocomplete";
5+
6+
export default function PlacesAutocomplete() {
7+
const {
8+
ready,
9+
value,
10+
suggestions: { status, data },
11+
setValue,
12+
clearSuggestions,
13+
} = usePlacesAutocomplete({
14+
requestOptions: {
15+
},
16+
debounce: 300,
17+
});
18+
19+
const handleInput = (e) => {
20+
setValue(e.target.value);
21+
};
22+
23+
const handleSelect =
24+
({ description }) =>
25+
() => {
26+
// When user selects a place, we can replace the keyword without request data from API
27+
// by setting the second parameter to "false"
28+
setValue(description, false);
29+
clearSuggestions();
30+
31+
// Get latitude and longitude via utility functions
32+
getGeocode({ address: description })
33+
.then((results) => getLatLng(results[0]))
34+
.catch((error) => {
35+
console.log("😱 Error: ", error);
36+
});
37+
};
38+
39+
const renderSuggestions = () =>
40+
data.map((suggestion) => {
41+
const {
42+
place_id,
43+
structured_formatting: { main_text, secondary_text },
44+
} = suggestion;
45+
46+
return (
47+
<li key={place_id} onClick={handleSelect(suggestion)}>
48+
<strong>{main_text}</strong> <small>{secondary_text}</small>
49+
</li>
50+
);
51+
});
52+
53+
return (
54+
<>
55+
<input className="form-control" id="address"
56+
placeholder="Type your address" aria-label="Address" aria-describedby="Address"
57+
value={value}
58+
onChange={handleInput}
59+
disabled={!ready}
60+
/>
61+
62+
{/* We can use the "status" to decide whether we should display the dropdown or not */}
63+
{status === "OK" && <ul>{renderSuggestions()}</ul>}
64+
65+
</>
66+
);
67+
}

‎src/signup/resgistration.js

+12-45
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import Form from 'react-bootstrap/Form';
22
import Button from 'react-bootstrap/esm/Button';
33
import { useState } from 'react';
44
import LogoutNavBar from '../navbar/logoutnavbar';
5+
import PlacesAutocomplete from '../locationpicker/auto';
56

67
export default function Registration(props) {
78
const [status, setStatus] = useState(false);
89
const [otherStatus, setOtherStatus] = useState(false);
10+
const [otherDisableStatus, setOtherDisableStatus] = useState(false);
911
const [validated, setValidated] = useState(false);
1012
const name = localStorage.getItem("userName");
1113

@@ -44,44 +46,7 @@ export default function Registration(props) {
4446
<div className="row g-3">
4547
<div className="col-12">
4648
<label className="form-label mr-auto" htmlFor="address">Address</label>
47-
<div className="input-group mb-3">
48-
<input type="text" className="form-control" id="address" placeholder="Get current location address" aria-label="Address" aria-describedby="Address" />
49-
<span className="input-group-text">
50-
<svg width="1em" height="1em">
51-
<use xlinkHref="#geo"></use>
52-
</svg>
53-
</span>
54-
</div>
55-
<div className="invalid-feedback">
56-
Please enter your address.
57-
</div>
58-
</div>
59-
<div className="col-md-5">
60-
<label htmlFor="country" className="form-label">Country</label>
61-
<select className="form-select" id="country" required="">
62-
<option value="">Choose...</option>
63-
<option>United States</option>
64-
</select>
65-
<div className="invalid-feedback">
66-
Please select a valid country.
67-
</div>
68-
</div>
69-
<div className="col-md-4">
70-
<label htmlFor="state" className="form-label">State</label>
71-
<select className="form-select" id="state" required="">
72-
<option value="">Choose...</option>
73-
<option>California</option>
74-
</select>
75-
<div className="invalid-feedback">
76-
Please provide a valid state.
77-
</div>
78-
</div>
79-
<div className="col-md-3">
80-
<label htmlFor="zip" className="form-label">Zip</label>
81-
<input type="text" className="form-control" id="zip" placeholder="" required="" />
82-
<div className="invalid-feedback">
83-
Zip code required.
84-
</div>
49+
<PlacesAutocomplete></PlacesAutocomplete>
8550
</div>
8651
<div className="col-md-5">
8752
<label htmlFor="dob" className="form-label">Date of Birth</label>
@@ -127,16 +92,19 @@ export default function Registration(props) {
12792
<label className="form-check-label" htmlFor="neuroDiversity">Neuro Diversity</label>
12893
</div>
12994
<div className="form-check-inline">
130-
<input id="others" type="checkbox" className="form-check-input me-2" />
95+
<input id="others" type="checkbox" className="form-check-input me-2" onChange={() => { setOtherDisableStatus(!otherDisableStatus); }} />
13196
<label className="form-check-label" htmlFor="others">Others</label>
13297
</div>
13398
</div>
134-
<div className="col-md-12 mb-4">
135-
<input type="text" className="form-control" placeholder="Show this input when Others is checked" required="" />
136-
<div className="invalid-feedback">
137-
Other required
99+
100+
{otherDisableStatus &&
101+
<div className="col-md-12 mb-4">
102+
<input type="text" className="form-control" placeholder="Please provide the details" required="" />
103+
<div className="invalid-feedback">
104+
Other required
105+
</div>
138106
</div>
139-
</div>
107+
}
140108
<label className="form-label mt-4 mb-0 col-12 fw-bold">Emergency Contact</label>
141109
<div className="col-md-5">
142110
<label htmlFor="a-name" className="form-label">Full Name <span className="text-muted">(Optional)</span></label>
@@ -161,7 +129,6 @@ export default function Registration(props) {
161129
id="custom-switch"
162130
label="Do you wish to Volunteer"
163131
onChange={() => { setStatus(!status); }}
164-
//onChange={(e) => radioHandler(status)}
165132
/>
166133
</div>
167134
{

0 commit comments

Comments
 (0)