Outdoor direction implementation with Google Maps API

[AlainJobs]

Notice

Huge Feature implemented. The magnitude of this feature was criminally underestimated. We thought that Google API would take care of everything, we just needed to send the origin and destination. However, the whole UI and transitions and animations had to be built from scratch.

Contents of the PR:

In this PR, quite a few features were implemented. First, using the Google Maps API, I was able to integrate outdoor directions in our application. This involves fetching route data from the mentioned API, and drawing it on the map while taking into consideration user preferences. Two main screens were created: a PreviewDirections screen, which shows a zoomed out itinerary on the map, the time and s start button on the bottom menu. By sliding up the bottom menu, the user can set their preferences, which will be taken into consideration only after the user presses the yellow refresh button on the Preview Direction Page. The next screen is the main Directions screen, which displays a step by step instruction of route between two buildings. or his location to another building. Also, the user can iterate through those instructions by using the right and left navigation arrows. Moreover, The Directions screens have a button allowing the user to zoom the map at his current location. Useful when the user wants to situate himself in the path.

To summarize:

Two main screens were added: : PreviewDirections & Directions React Navigation was implemented for better handling of the screens. Critical Bugs related to the layout and to the BottomMenu, DoubleSearch and Search components were fixed. Secondary Screens : DoubleSearch & PreferenceMenu Refactored components in BottomMenu to be screens to take advantage of React Stack Navigation.

Future Improvements and Current small issues

To Fix: -The header layout in the Directions screen is breaking when an instruction exceeds a certain length. -The refresh button should only be clickable once after a selection was made in the Preference Menu.

• Bottom Menu in Preview Directions gets out of bounds when the string of the time and distance is too long for its width.
• The transitions in the Directions should center the map to the first point of a step instead of the whole polylines.
• Disable View Route in Double Search screen until the current location is fetched (async).
• Not all the files were thoroughly commented (for documentation purpose) as we focused on having those changes on master ASAP.

Potential Addition

• We have a lot of information returned by Google API concerning the transit details, maybe investigate what we could provide as extra for more detailed instructions.

  Not covered by this PR and this feature

• Google API doesn't allow routes for people with physical disabilities. May be allowed in the future.
• Personas are also not covered and cannot be covered by this feature and PR.
• The shuttle bus is moved to the Side Menu as it doesn't interact with the Map.
• No Design Pattern implemented. Rather, React Pattern implemented (use of Hook and rendering techniques). We are too advanced in the project to redesign, the best alternative to have solid design patterns is to have them in mind when refactoring.

  How to test

  Before starting, checkout the branch feature/outdoor-directions git checkout feature/outdoor-directions

  1. Start the application expo start or npm start
  2. Select a building in the Home Map Screen.
  3. When Bottom Menu updates, click on the arrow up button and select "Get Directions".
  4. Wait a few seconds before pressing View Route as the screen is fetching your current location.
  5. You can change origin and destination.
  6. Click on View Route.
  7. You are now in the PreviewDirections screen and a zoomed out map containing the itinerary should be displayed
  8. Slide up the bottom menu and select your preferences
  9. Click on the down arrow
  10. Click on the "Start" button
  11. You are now in the Directions screen
  12. It should display the starting position (address) and the destination.
  13. Click the right arrow (bottom right corner) to navigate through the directions.
  14. The map should be updated with every click.

      GIFS

      Preview Direction and Detailed Directions

      

Preference Menu and Update Direction

Mentions

I also want to give honorable mentions to @csbduzi & @bkenza as they actively coauthored this PR as you would be able to see in the commits. This PR wouldn't have come in time without them. THANK YOU A LOT <3

[mohanadarafe]

Wow! This is quite some stuff here Alain. I really like what you guys have done in 9 days. Taking a look at your PR, I noticed the test coverage went down. I am going to ask you to write unit tests for

• CurrentLocationButton.js
• Nearby.js
• PreviewDirections.js
• Directions.js

You can start with snapshots, if the coverage is under 70%, export some of your functions such as decodedPolylinesAlgo() or goToNextInstruction()

Note: I added in my PR a unit test for DoubleSearch.js

[mohanadarafe]

Can't run the branch. It is up to date as well.

[Firassawan]

Alain, this PR is great. Thanks for the detailed information and for the effort to include comments that explain the code. This should be an example for all of us to follow in the future. I can confirm that I am unable to test the code as in Mohanad's case but other than that and the comments the team has left I think you did a fantastic job!

[AlainJobs]

Thank you everyone for the comments and feedback! We have one more month to work even better as a team, let's GO!!! 🌟 🌠 👨‍🚀 👩‍🚀 🤝