apps
/
atlas-mobile-ts


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!DOCTYPE html>
<html lang="en">

<head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> Home</title>

  <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="./build/entry.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700|Inconsolata,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link type="text/css" rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow-night.min.css">
  <link type="text/css" rel="stylesheet" href="styles/app.min.css">
  <link type="text/css" rel="stylesheet" href="styles/iframe.css">
  <link type="text/css" rel="stylesheet" href="">
  <script async defer src="https://buttons.github.io/buttons.js"></script>

  
</head>


<body class="layout small-header">
    <div id="stickyNavbarOverlay"></div>
    

<div class="top-nav">
    <div class="inner">
        <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
        <div class="logo">
            
            
        </div>
        <div class="menu">
            
            <div class="navigation">
                <a
                    href="index.html"
                    class="link"
                >
                    API Documentation
                </a>
                
                
            </div>
        </div>
    </div>
</div>
    <div id="main">
        <div
            class="sidebar "
            id="sidebarNav"
        >
            
            <nav>
                
                    <h2><a href="index.html">Documentation</a></h2><div class="category"><h3>Interfaces</h3><ul><li><a href="AddLandmarkProps.html">AddLandmarkProps</a></li><li><a href="CommentProps.html">CommentProps</a></li><li><a href="IdToken.html">IdToken</a></li><li><a href="IntroProps.html">IntroProps</a></li><li><a href="Landmark.html">Landmark</a></li><li><a href="LandmarkDetailsProps.html">LandmarkDetailsProps</a></li><li><a href="LandmarkPinProps.html">LandmarkPinProps</a></li><li><a href="LMComment.html">LMComment</a></li><li><a href="ProfileProps.html">ProfileProps</a></li><li><a href="RegisterProps.html">RegisterProps</a></li><li><a href="UserProfile.html">UserProfile</a></li></ul><h3>Components</h3><ul><li><a href="App.html">App</a></li><li><a href="Atlas.html">Atlas</a></li><li><a href="Comment.html">Comment</a></li><li><a href="PrimaryButton.html">PrimaryButton</a></li><li><a href="Profile.html">Profile</a></li><li><a href="SecondaryButton.html">SecondaryButton</a></li></ul><h3>Global</h3><ul><li><a href="global.html#IconStrings">IconStrings</a></li></ul></div><div class="category"><h2>Hooks</h2><h3>Namespaces</h3><ul><li><a href="useAuth.html">useAuth</a></li><li><a href="useLandmarks.html">useLandmarks</a></li><li><a href="useProfile.html">useProfile</a></li></ul></div><div class="category"><h2>Map</h2><h3>Interfaces</h3><ul><li><a href="UserLocation.html">UserLocation</a></li></ul><h3>Components</h3><ul><li><a href="AddLandmark.html">AddLandmark</a></li><li><a href="LandmarkDetails.html">LandmarkDetails</a></li><li><a href="LandmarkPin.html">LandmarkPin</a></li><li><a href="Map.html">Map</a></li></ul></div><div class="category"><h2>Navigation</h2><h3>Components</h3><ul><li><a href="AuthorizedNavigator.html">AuthorizedNavigator</a></li><li><a href="UnauthorizedNavigator.html">UnauthorizedNavigator</a></li></ul><h3><a href="global.html">Global</a></h3></div><div class="category"><h2>Stores</h2><h3>Classes</h3><ul><li><a href="AuthStore.html">AuthStore</a></li></ul></div><div class="category"><h2>Unauthorized</h2><h3>Components</h3><ul><li><a href="Intro.html">Intro</a></li><li><a href="UnauthorizedLayout.html">UnauthorizedLayout</a></li></ul><h3>Components / Registration</h3><ul><li><a href="RegisterMain.html">RegisterMain</a></li></ul></div>
                
            </nav>
        </div>
        <div class="core" id="main-content-wrapper">
            <div class="content">
                <header class="page-title">
                    <p></p>
                    <h1>Home</h1>
                </header>
                

    <h3> </h3>


    <section>
        <article><h2>Click &amp; Push Mobile</h2>
<p>This the new repository for Click&amp;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.</p>
<h3>Running the app</h3>
<p>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</p>
<ol>
<li>Clone the repository</li>
<li>Run <code>npm install -g expo-cli</code></li>
<li>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)</li>
<li>Run ```expo start`` in the app root folder</li>
<li>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.</li>
<li>Expo Go will build and run the app on your phone!</li>
</ol>
<p>The app needs to connect to the server in order to login and access data. You must edit the <code>API_URL</code> value in the <code>globals.ts</code> 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</p>
<h3>Technical details</h3>
<p>The core libraries that this app are built with are:</p>
<ul>
<li><a href="https://github.com/react-native-maps/react-native-maps">react-native-maps</a> for Mapping</li>
<li><a href="https://reactnavigation.org/">react navigation</a> for navigation</li>
<li><a href="https://react-query.tanstack.com/">react-query</a> for managing state of remote data</li>
<li><a href="https://mobx.js.org/README.html">mobx-react</a> for managing all other shared state</li>
</ul>
<h4>Overall project structure</h4>
<h5>Folders</h5>
<ul>
<li>components -&gt; contains visual react components, including &quot;screen&quot; components</li>
<li>navigation -&gt; contains components that act as react navigation navigator roots (e.g. call the create<navigator type>Navigator() function)</li>
<li>hooks -&gt; contains custom hooks</li>
<li>stores -&gt; contains mobx stores</li>
</ul>
<h5>Other</h5>
<ul>
<li>globals.ts -&gt; contains global constants, misc types, and helper functions</li>
</ul>
<h4>Visual components</h4>
<p>The app component tree follows the following form:</p>
<ul>
<li>App.tsx -&gt; app root
<ul>
<li>Atlas.tsx -&gt; checks authentication state, directs user to appropriate screen
<ul>
<li>Auth -&gt; StackNavigator containing login and register functionality
<ul>
<li>Intro -&gt; 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.</li>
<li>RegisterMain -&gt; Container for registration flow components listed in order below
<ul>
<li>RegisterCredentials -&gt; Username and email</li>
<li>RegisterPassword -&gt; Password</li>
<li>RegisterMeasurements -&gt; Whether or not the user intends to use a sagitta right away, if yes then will ask user for height and weight</li>
<li>RegisterImage -&gt; Profile pic upload and final submission</li>
<li>RegistrationResult -&gt; Reports registration result</li>
</ul>
</li>
</ul>
</li>
<li>Main -&gt; TabsNavigator containing screens that can be accessed by authenticated users
<ul>
<li>Map -&gt; Main map screen that allows users to interact with core mapping features (landmarks, places, routing)
<ul>
<li>AddLandmark -&gt; Component through which a user can add a landmark</li>
<li>LandmarkDetails -&gt; Component through which a user can update and delete landmarks</li>
</ul>
</li>
<li>Profile -&gt; Screen through which the user can manage their account information</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Here is a flow diagram describing how the components interact with eachother:
<img src="https://git.clicknpush.ca/apps/atlas-mobile-ts/raw/dev/design/UXFlow.png" alt="Flow diagram"></p>
<h4>Hooks</h4>
<p>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:</p>
<ul>
<li>useLandmarks -&gt; Contains queries and mutations for interacting with landmarks</li>
<li>useProfile -&gt; * * * * * * * base user data</li>
<li>useComments -&gt; * * * * * * * comments</li>
<li>useComments -&gt; * * * * * * * places</li>
</ul></article>
    </section>


            </div>
            
            <footer class="footer">
                <div class="content has-text-centered">
                    <p>Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a></p>
                    <p class="sidebar-created-by">
                        <a href="https://github.com/SoftwareBrothers/better-docs" target="_blank">BetterDocs theme</a> provided with <i class="fas fa-heart"></i> by 
                        <a href="http://softwarebrothers.co" target="_blank">SoftwareBrothers - JavaScript Development Agency</a>
                    </p>
                </div>
            </footer>
            
        </div>
        <div id="side-nav" class="side-nav">
        </div>
    </div>
<script src="scripts/app.min.js"></script>
<script>PR.prettyPrint();</script>
<script src="scripts/linenumber.js"> </script>

</body>
</html>