Add more information to restaurant cards, including website, phone number, and reviews.

src/server.js

@@ -21,6 +21,7 @@ const ERROR_INVALID_EVENT_ID = "INVALID_EVENT_ID";
 const ERROR_BAD_UUID = "BAD_UUID";
 const ERROR_GEOCODING_FAILED = "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"));
 
@@ -279,14 +280,45 @@ 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 {
+          const restaurants = placesApiResponse.results;
+          const placeDetailsPromises = [];
+
+          //Used to get additional information about the restaurant results.
+          const fields = encodeForURL(
+            "url,formatted_phone_number,website,review"
+          );
+
+          restaurants.forEach((restaurant) => {
+            const placeId = encodeForURL(restaurant.place_id);
+            const newPromise =
+              "https://maps.googleapis.com/maps/api/place/details/json?place_id=" +
+              placeId +
+              "&fields=" +
+              fields +
+              "&key=" +
+              env.API_KEY_PLACES;
+
+            placeDetailsPromises.push(
+              fetch(newPromise).then((response) => response.json())
+            );
+          });
+
+          await Promise.all(placeDetailsPromises).then((values) => {
+            for (let i = 0; i < values.length; i++) {
+              if (values[i].status === "OK") {
+                restaurants[i].additional_details = values[i].result;
+              }
+            }
+          });
+
           // Normalize undefined or null to an empty array
           response.json({
             status: 200,
             data: {
-              places: placesApiResponse.results || [],
+              places: restaurants || [],
               attributions: placesApiResponse.html_attributions || [],
               center: { latitude, longitude },
             },
@@ -313,6 +345,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,
@@ -330,7 +401,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=" +
@@ -364,14 +435,14 @@ 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

static/absolute/css/searchPage.css

@@ -3,6 +3,12 @@ body {
   margin: 0px;
 }
 
+hr {
+  height: 1px;
+  background-color: #d4ede0;
+  border: none;
+}
+
 /* margin left small */
 .ml-s {
   margin-left: 15px;
@@ -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;
 }
 
@@ -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;

static/absolute/js/participants.js

@@ -26,7 +26,7 @@ async function showParticipants() {
     );
     participantContainer.innerHTML = "";
 
-    const participants = response.data;
+    const participants = response.data.participants;
     participants
       .map((p) => ({ ...p, location: `${p.lat},${p.long}` }))
       .forEach((participant) => {