Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display actual addresses on participant page #37

Open
wants to merge 26 commits into
base: master
Choose a base branch
from
Open

Display actual addresses on participant page #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
cd077f1
Add more information to restaurant cards, including images, reviews, …
aivey65 Aug 1, 2020
62876fb
Add apis on the server to call Google's place photos and place detail…
aivey65 Aug 1, 2020
8a0297d
Change styles for review section. Add price level to restaurant card.
aivey65 Aug 3, 2020
ae83434
Rearranged line for better organization.
aivey65 Aug 3, 2020
00beb10
Remove unused and redundant css styling.
aivey65 Aug 3, 2020
8a03020
Add styling to show more/show less button when hovering.
aivey65 Aug 3, 2020
693f4f2
Return more detailed error in restaurant api for special handling on …
aivey65 Aug 3, 2020
a8b5e88
Change variable names and comments.
aivey65 Aug 3, 2020
1f63338
Change hover styling of show more/show less button.
aivey65 Aug 3, 2020
88baa8a
Change encode function in server to use broader terms.
aivey65 Aug 3, 2020
c5c7218
Make place image request clearer by using descriptive variable.
aivey65 Aug 3, 2020
757dfc2
Change variable name
aivey65 Aug 3, 2020
2e4e220
Update check for error in restaurant api call to get correct error.
aivey65 Aug 3, 2020
e43cd36
Maps marker numbering
ChisomOkwor Aug 3, 2020
b993b69
Show address on participant page
ChisomOkwor Aug 3, 2020
d0470f5
Edit reverse gecoding error message
ChisomOkwor Aug 3, 2020
a4edcc9
Search button margin adjustments
ChisomOkwor Aug 3, 2020
5f8be4b
format changes
ChisomOkwor Aug 3, 2020
f0fe299
Edit error message for reverse geocoding API
ChisomOkwor Aug 3, 2020
c943054
Add white space to the bottom of the search results.
aivey65 Aug 3, 2020
0437ea6
Rebase with master
ChisomOkwor Aug 4, 2020
69262e5
Numbering markers
ChisomOkwor Aug 4, 2020
21921c5
Merge automatic scrolling into PR.
aivey65 Aug 4, 2020
c7ac598
Merge branch 'master' of https://github.com/googleinterns/step121-202…
aivey65 Aug 4, 2020
e731769
Fix issue on participants page.
aivey65 Aug 4, 2020
820c140
Final changes
ChisomOkwor Aug 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 78 additions & 6 deletions src/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ const ERROR_BAD_DB_INTERACTION = "BAD_DATABASE";
const ERROR_INVALID_EVENT_ID = "INVALID_EVENT_ID";
const ERROR_BAD_UUID = "BAD_UUID";
const ERROR_GEOCODING_FAILED = "GEOCODING_FAILED";
const ERROR_REVERSE_GEOCODING_FAILED = "REVERSE_GEOCODING_FAILED";
const ERROR_BAD_PLACES_API_INTERACTION = "BAD_PLACES_API";
const ERROR_PLACE_DETAILS_FAILED = "PLACE_DETAILS_FAILED";

app.use(express.static("static/absolute"));

Expand Down Expand Up @@ -162,6 +164,7 @@ app.post(
const { body, datastoreKey: key, event } = request;
const [lat, long] = body.location;
const { name, address } = body;

event.users = event.users || {};
const userInfo = event.users[request.session.userID] || {};
event.users[request.session.userID] = {
Expand Down Expand Up @@ -279,7 +282,7 @@ app.get(
console.error("Places API error. Status: " + status);
response.status(500).json({
status: 500,
error: { type: ERROR_BAD_PLACES_API_INTERACTION },
error: { type: status },
});
} else {
// Normalize undefined or null to an empty array
Expand Down Expand Up @@ -313,6 +316,45 @@ app.get(
}
);

app.get(`${PREFIX_API}/placedetails`, async (request, response) => {
const placeId = encodeForURL(request.query.id);
const fields = encodeForURL(request.query.fields);

const placeDetailsRequest =
"https://maps.googleapis.com/maps/api/place/details/json?place_id=" +
placeId +
"&fields=" +
fields +
"&key=" +
env.API_KEY_PLACES;

try {
const placeDetailsResponse = await (
await fetch(placeDetailsRequest)
).json();
const responseStatus = placeDetailsResponse.status;

if (responseStatus !== "OK") {
console.error(
"Place Details error occured. Api response status: " + responseStatus
);
response
.status(500)
.json({ status: 500, error: { type: responseStatus } });
} else {
response.json({
status: 200,
data: placeDetailsResponse,
});
}
} catch (err) {
console.error(err);
response
.status(500)
.json({ status: 500, error: { type: ERROR_PLACE_DETAILS_FAILED } });
}
});

app.get(
`${PREFIX_API}/:${URL_PARAM_EVENT_ID}/participants`,
getEvent,
Expand All @@ -330,7 +372,7 @@ app.get(
);

app.get(`${PREFIX_API}/geocode`, async (request, response) => {
const address = encodeAddress(request.query.address);
const address = encodeForURL(request.query.address);

const geocodeRequest =
"https://maps.googleapis.com/maps/api/geocode/json?address=" +
Expand Down Expand Up @@ -364,17 +406,47 @@ app.get(`${PREFIX_API}/geocode`, async (request, response) => {
}
});

function encodeAddress(address) {
const formattedAddress = encodeURIComponent(address)
function encodeForURL(string) {
const formattedString = encodeURIComponent(string)
.replace("!", "%21")
.replace("*", "%2A")
.replace("'", "%27")
.replace("(", "%28")
.replace(")", "%29");
return formattedAddress;
return formattedString;
}

// This number should be kept in sync with the port number in nodemon.json
app.get(`${PREFIX_API}/reverseGeocode`, async (request, response) => {
vedantroy marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

something that hadn't occurred to me earlier - are you essentially allowing anyone to make free geocode requests and spend your money? could i just point my own external code at this endpoint to make geocode requests with your API key, or is this somehow blocked?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not quite sure, but I think there's a possibility that could happen. But either way it's done, the geo-coded location always shows up on the participant page. A hacker could still access it there? I'm wondering because I thought this works the same way the place search works. Or is this different because the goecoded address is in the JS frontend?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the difference is between a malicious user being able to geocode only address that the user has entered vs being able to geocode any arbitrary address. ideally this should be designed such that it's only possible to geocode addresses that are being entered into the db - ie a hacker would have to actually be using your app, and you could easily apply rate limiting, etc.

const latlng = request.query.latlng;

const reverseGeocodeRequest = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}&key=
${env.API_KEY_GEOCODE}`;

try {
const reverseGeocodeResponse = await (
await fetch(reverseGeocodeRequest)
).json();
const { status } = reverseGeocodeResponse;

if (status !== "OK") {
console.error(
"Reverse Geocoding error occured. Api response status: " + status
);
response.status(500).json({ status: 500, error: { type: status } });
} else {
response.json({
status: 200,
data: reverseGeocodeResponse.results[0].formatted_address,
});
}
} catch (err) {
console.error(err);
response
.status(500)
.json({ status: 500, error: { type: ERROR_REVERSE_GEOCODING_FAILED } });
}
});

const port = 8080;
const server = app.listen(port, () =>
console.log(`Server listening on http://localhost:${port}`)
Expand Down
37 changes: 33 additions & 4 deletions static/absolute/css/searchPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@ body {
margin: 0px;
}

hr {
height: 1px;
background-color: #d4ede0;
border: none;
}

/* margin left small */
.ml-s {
margin-left: 15px;
margin-left: 5px;
}

/* margin left medium */
.ml-m {
margin-left: 25px;
margin-left: 20px;
}

/* Banner at top of page contains logo */
Expand Down Expand Up @@ -107,12 +113,16 @@ body {
font-size: 1.5em;
}

.restaurant-card {
.info-div {
display: grid;
grid-template-columns: 50% auto;
grid-template-columns: 25% auto auto;
}

.restaurant-card {
border: 1px solid #d4ede0;
border-radius: 0.5rem;
margin-top: 25px;
margin-bottom: 25px;
padding: 25px;
}

Expand All @@ -134,6 +144,25 @@ body {
color: #444;
}

.review-header {
color: #fe5f55;
font-weight: bold;
}

.individual-review {
padding: 25px;
}

.show-more-link {
color: #fe5f55;
margin-bottom: 0px;
}

.show-more-link:hover {
cursor: pointer;
color: rgb(226, 55, 43);
}

.banner-btn {
padding: 12px 25px;
text-decoration: none;
Expand Down
37 changes: 18 additions & 19 deletions static/absolute/js/participants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,24 @@ async function showParticipants() {
);
participantContainer.innerHTML = "";

const participants = response.data;
participants
.map((p) => ({ ...p, location: `${p.lat},${p.long}` }))
.forEach((participant) => {
let newDiv = document.createElement("div");
newDiv.classList.add("participant-card");

let name = document.createElement("h2");
name.classList.add("participant-name");
name.appendChild(document.createTextNode(participant.name));
newDiv.appendChild(name);

let location = document.createElement("p");
location.classList.add("participant-info");
location.appendChild(document.createTextNode(participant.location));
newDiv.appendChild(location);

participantContainer.appendChild(newDiv);
});
const participants = response.data.participants;

participants.forEach((participant) => {
let newDiv = document.createElement("div");
newDiv.classList.add("participant-card");

let name = document.createElement("h2");
name.classList.add("participant-name");
name.appendChild(document.createTextNode(participant.name));
newDiv.appendChild(name);

let address = document.createElement("p");
address.classList.add("participant-info");
address.appendChild(document.createTextNode(participant.address));
newDiv.appendChild(address);

participantContainer.appendChild(newDiv);
});
}
}

Expand Down
Loading