Map page issues and to do list

[knox153]

Listing down some items that I didn't have time to address ¯\(ツ)/¯

To do list

1. (Bug) Refreshing the page on the Map or the Trecipe page will wipe all the destinations. To restore them, users will have to go back to My Trecipe page and reenter. Fixed in Implement photo upload for trecipe #94

2. (Bug) After adding a destination on the Trecipe page, the result drop down will close. No longer an issue

3. (Bug) On the map page, search for any place and click on them to add them to the destination cards list (there will be a tick to indicate that it has been added). Now click 'delete' on the destination card's menu. The result drop down on the search bar will still show the tick even though the destination is removed from the list Fixed by Shizuko

4. Long name and location do not bode well for the destination cards on the map page (rating bar shifted, checkmark is gone). Fixed, long name will not be truncated, rating bar will remain at the same location and checkmark is always displayed.
   

5. Update the static map's marker icon to match the markers on the map page Not possible :( Static map can contain up to 5 unique icons and we have 10 icons (5 categories and 2 colors), so we can either display completion status or categories. Currently displaying completion status

6. Update the search bar on header to use autocomplete service (check out the search bar on the map page) Addressed in search PR

7. check if google is initialized before using them. example: if(google) let map = new google.maps.map()

8. It is possible to add duplicate destination for now, might have to change this Fixed by Shizuko

9. Adding location bias on map search might be a good idea

10. scrollIntoView() is not smooth on google chrome

11. Add a legend for marker colors Add legend for the map #87 Done

12. scrollIntoView() on destination add is not working because it is using place id while destination card is using uuid

Optionals

1. Check if there is any unnecessary re-render on map, and see if using pure component improve performance. If pure component is used, ensure markers on the map is updated when a destination is added/updated

2. Responsive design. Currently, when the user resizes the window, the map will shrink until destination cards are left. On mobile, only destinations cards are visible. Maybe we could create a mobile UI where the map is always located on the top and the bottom half are the destination cards.

3. Use async and await to improve readability.

4. Improve the way we load google map script. <LoadScript> is used to do lazy loading when we need any google map service. At the moment, we load the script once before loading any pages in between the header and footer. One improvement might be wrapping any elements that require google map service in <LoadScript>, but this requires multiple api keys. Since our header has search bar (it always requires google autocomplete service), another good idea might be loading the script in index.html, though this might slow down the page on the first load. Components that require map service:

   • Map & Search bar on the map page
   • Search bar popup on the Trecipe page
   • Search bar on the header