Display place details

[jkwening]

Create a component for displaying details about a place.

It should have two view modes:

• full screen (most of the viewport height):
  • as much detail as we can provide: may start with image, option for getting directions, and "more about this place" section. See places details api for idea of what backend will be retrieving from google api based on place id.
• partial screen (about 50% of viewport height):
  • partial map view with location centered
  • simple summary of place: name, address, and options for getting directions

[turisap]

Hi, @jkwening, I'd like to try to implement this, can I work on it?

[jkwening]

@turisap certainly, go for it. It's assigned to you. Thanks.

[turisap]

@jkwening, I'm experiencing problems with the application, could you please help me out?

As I new to this project, I set up everything in accordance with instructions and then run npm run dev in the root directory and got the application running in my browser at localhost:8080. It reloads each time I made changes in the code, but it did not reflected it in the running application. Even if I did something which should affect the app significantly or crash it like commenting out render() or router it still worked as before without any changes or errors in the browser's console. Why it can be so and how can I fix this?

[jkwening]

@turisap we have a service worker implemented, so its probably caching the main bundle.js module where the primary code logic is embedded. You probably just need to set the service worker tool to "update on reload" to allow it to automatically sync new changes via dev tools. Else, have your tried clearing out all site data via "Application" and then "Clear Storarge" in dev tools?

[turisap]

@jkwening, your advice did help! So it's working now. Thank you)

I've got a couple of questions regarding how to make this component, can you answer them?

• How should I style the component? Are there any guides or should I do it as I want?
• You mentioned that in the partial screen mode there should be a small map with location centered. How can I obtain that map? Should I make any additional requests to google API?
• Full screen mode should contain an image of a location, but it isn't clear how to get one. I went to google places docs and made a request to their api, so response with location's data contained the following data about photos:

{
                "height": 417,
                "html_attributions": [
                    "<a href=\"https://maps.google.com/maps/contrib/110751364053842618118/photos\">Australian Cruise Group</a>"
                ],
                "photo_reference": "CmRaAAAAMEJMvIbS5_SiUW78IznWOKNI_-LCElDK0U3O9GyxMDUPYeq5YuSeLfpTSGEY2AJVeYp6tBk-oGTjvdUmCjYCEnHEGR5dcbwn-UT7c6_sL-9v9gvnfI37aMZbiD59kgiGEhCzw-2UC0j5xrPx6qryivclGhRhAZzC0rmY2Y6EdScI1AlKdoR46Q",
                "width": 1334
            }

and, according to the docs in order to get an image I need to make another request with photo_reference as a query string which would return an image as response. I've made a method for this:

getPlacePictureFromGoogle () {
        const url = `https://maps.googleapis.com/maps/api/place/photo?
        key=${CONFIG.google_maps.api_key}&
        photoreference=${this.place.photoReference}&
        maxwidth=300`;
        axios.get(url)
            .then(image => {
                this.setState({image})
            })
            .catch(err => `ERR: ${err.response}`)
    }

I guess it would not work if I store file in component's state. Probably I don't need to do that and image will be obtained through back-end somehow and I don't need to do everything I've done?

[jkwening]

@turisap sorry for just getting back to you - completely missed this in my inbox. Here's my response in order of your questions:

• Regarding style - give the following mockups a look see to get an overview of the current theme we're going with and style as you like as related to that for now. (interactive).
• this should be a component that renders on top off the current map view or rather below it for partial screen mode. ~/client/src/components/LeafletOsmMap folder contains the logic for the map container component. What we would want to do is resize the mapPane to 50% of the available pane and put the place details component in the remaining bottom 50%. You don't need to make additional request to google api, the backend server has end points for that. See ~/controllers/google-api-controller.js for what frontends needs to make request for place details data. The code is within the exports.placeDetails exported function.
• Also, more details can be found on the developer's place details guide. The endpoint mentioned above includes a photos array for the requested place. Currently we return the entire response back to the frontend, please create an issue if you feel we only need to provide a subset or restructure the response in a another JSON format that is better suited for the frontend to consume without having to add parsing logic on the frontend. We basically want the frontend to do as little processing as possible and backend provide exactly what the frontend needs to render component/routes as needed.

Additional notes:

• Full screen mode, should have the component overlay completely over the mapPane, you will need to set the z-index = 1000 or alternatively toggle map pane display: none to hide it from view and have the place details render in remaining height of the screen instead.
• The end goal is a smooth transition between partial place details view, full place details view, and full map view (no place details). I would recommend tackling each of these iteratively, building upon each sub feature, and making PR requests as each is ready. I would suggest to start with a PR for a place details component that takes full screen, to get a better sense of how much data we want to consume on the frontend and any modifications needed for the response data sent from the backend.

@motosharpley I see a branch called "gmap-places" - I assume we want to use that for this feature or is that for something else? I can make a new branch if that is the case.

[motosharpley]

@jkwening we should make a new branch I just created that gmap-places branch to preserve the code from the google implementation before refactoring it out for leaflet in case someone wanted it

[jkwening]

@turisap I've create a feature branch called "place-details" that we will use for this issue until its complete and ready to be merged into "development" branch. Did my response answer your questions?

[turisap]

@jkwening, yes, thank you for the exhaustive answer, it is much clearer now. I'll proceed then with full-screen mode component in my PR soon.

[turisap]

@jkwening, sorry, it looks like I need to ask a couple of more questions..

I followed your advice and went to ~/controllers/google-api-controller.js and did find there both placeDetails() and directions() which I guess I need to use for this component. However, it is not clear how to make a request to those endpoints. Simple import of those actions does not work and crashes application with an error process in not defined. As I saw in other components, there is clint/src/js/server-request-utilities.js which has makeRequest() function. I suppose my requests should be somehow done via this utility, but a simple request like makeRequest('GET', 'placeDetails') returns a Promise with Error: Request failed with status code 404 at createError. Are there any docs on how to make a request?

The second question is that for obtaining place info from back-end I need a place_id, how am I suppose to have one in my component?

[jkwening]

@turisap regarding requests to the backend server, you're heading in the right direction; please utilize makeRequest() function along with BASE_ENDPOINTS object in server-request-utilities.js (see PR #264 OnLocationFound() and saveSaveMarkerToDB() functions in client/src/components/LeafletOsmMap/index.js as use case examples).

The example you provided is slightly off, the controllers/google-api-controller.js docstring for getting places details specifies the request needs to be of the form "{GET} /search/places/:id". The makeRequest() function takes arguments of the form: (method='GET', baseEndPoint, endPointAddon='', bodyData={}, params={}, headers={}). The "method" and "baseEndPoint" arguments are required, method defaults to "GET" request if not provided. The BASE_ENDPOINT object encapsulates most if not all of the currently available base endpoints for the backend server. The remaining arguments allow for the following flexibility via a single function call:

• endPointAddon: some base endpoints have additional url extensions for more specific requests (the controller.js files have some doc on those but as usual feel free to ask for more clarification)
• bodyData: primarily for "POST" requests were additional data is needed for processing the request
• params: for url params that need to be sent along with the request. In your case, that would be the place_id id.
• headers: for passing header requirements (unnecessary for most request since token headers are currently automatically configured)
  (Feel free to add the information above as docstring for makeRequest - I'll try get to it today)

You got the method correct but are passing incorrect "baseEndPoint" arguments. For getting place details, the base endpoint is "/search/places" or you could use BASE_ENDPOINTS.places object constant. As mentioned you will need to pass the place id id in the params argument. The remaining args can be left blank since they're not needed.

For getting google specific place_id string, you've hit on an upcoming issue we need to resolve. For locations identified via search, the place_id value is returned as part of the result and is stored as part of the search result prediction list (see declared state values in constructor of: client/src/components/Search/index.js). On selection of a value, we should pass/store that information accordingly. That should now be partially implemented in PR #264 but needs to be enhanced. For user dropped pins, we will probably need to add another backend server endpoint for getting it from google if possible.

[turisap]

@jkwening, thank you for the explicit answer, it helped me a lot :-)