Home

Click & Push Mobile

This the new repository for Click&Push's mobile app, built in React Native. It has been remade and rewritten in Typescript and expo to allow for better debugging and more maintainable code.

Running the app

Reading the Expo CLI Quickstart guide on the official docs is highly recommended, however the process is very straight forward. https://reactnative.dev/docs/environment-setup

1. Clone the repository
2. Run npm install -g expo-cli
3. Install Expo Go on the mobile device you wish to run the app on (it must be on the same wifi network as the host machine)
4. Run ```expo start`` in the app root folder
5. Using the Expo Go QR scanner on an android device, or Camera app on an iOS device, scan the QR code produced on the terminal or inside the browser window opened by the expo start command.
6. Expo Go will build and run the app on your phone!

The app needs to connect to the server in order to login and access data. You must edit the API_URL value in the globals.ts file to be your private ip address. Ensure that the server repo is cloned and running on your machine before attempting to login. See the repo for instructions on how to do that. https://git.clicknpush.ca/apps/webapp/src/integrating-mobile-app/README.md

Technical details

The core libraries that this app are built with are:

• react-native-maps for Mapping
• react navigation for navigation
• react-query for managing state of remote data
• mobx-react for managing all other shared state

Overall project structure

Folders

• components -> contains visual react components, including "screen" components
• navigation -> contains components that act as react navigation navigator roots (e.g. call the createNavigator() function)
• hooks -> contains custom hooks
• stores -> contains mobx stores

Other

• globals.ts -> contains global constants, misc types, and helper functions

Visual components

The app component tree follows the following form:

• App.tsx -> app root
  • Atlas.tsx -> checks authentication state, directs user to appropriate screen
    • Auth -> StackNavigator containing login and register functionality
      • Intro -> Screen containing login and register buttons. Login will initiate a browser session through which the user will authenticate via oauth2-auth code flow. Register will initate the registration flow.
      • RegisterMain -> Container for registration flow components listed in order below
        • RegisterCredentials -> Username and email
        • RegisterPassword -> Password
        • RegisterMeasurements -> Whether or not the user intends to use a sagitta right away, if yes then will ask user for height and weight
        • RegisterImage -> Profile pic upload and final submission
        • RegistrationResult -> Reports registration result
    • Main -> TabsNavigator containing screens that can be accessed by authenticated users
      • Map -> Main map screen that allows users to interact with core mapping features (landmarks, places, routing)
        • AddLandmark -> Component through which a user can add a landmark
        • LandmarkDetails -> Component through which a user can update and delete landmarks
      • Profile -> Screen through which the user can manage their account information

Here is a flow diagram describing how the components interact with eachother:

Hooks

This app almost exclusively uses functional components, therefore it makes use of hooks. Most of the hooks are bundles of react-query logic for an associated data model:

• useLandmarks -> Contains queries and mutations for interacting with landmarks
• useProfile -> * * * * * * * base user data
• useComments -> * * * * * * * comments
• useComments -> * * * * * * * places