Merge branch 'integrating-indoor-map' of ericCNP:apps/atlas-mobile-ts into integrating-indoor-map

package-lock.json

@@ -80,6 +80,7 @@
         "react-native-svg": "^12.1.1",
         "react-native-svg-transformer": "^1.0.0",
         "react-native-toast-message": "^2.1.3",
+        "react-native-view-shot": "3.1.2",
         "react-native-web": "^0.13",
         "react-native-windows": "0.64.2",
         "react-query": "^3.19.0",
@@ -25310,6 +25311,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-native-view-shot": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.1.2.tgz",
+      "integrity": "sha512-9u9fPtp6a52UMoZ/UCPrCjKZk8tnkI9To0Eh6yYnLKFEGkRZ7Chm6DqwDJbYJHeZrheCCopaD5oEOnRqhF4L2Q==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
@@ -51334,6 +51344,12 @@
         }
       }
     },
+    "react-native-view-shot": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.1.2.tgz",
+      "integrity": "sha512-9u9fPtp6a52UMoZ/UCPrCjKZk8tnkI9To0Eh6yYnLKFEGkRZ7Chm6DqwDJbYJHeZrheCCopaD5oEOnRqhF4L2Q==",
+      "requires": {}
+    },
     "react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",

src/components/Atlas.tsx

@@ -8,14 +8,14 @@
 import {
   RacingSansOne_400Regular
 } from '@expo-google-fonts/racing-sans-one';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native'
 import { MenuProvider } from 'react-native-popup-menu'
 import axios, { AxiosRequestConfig } from 'axios';
 import { useFonts } from 'expo-font';
 import { getItemAsync } from 'expo-secure-store';
 import { observer } from 'mobx-react';
 import React, { useEffect, useRef, useState } from 'react';
-import { AppState, SafeAreaView, StatusBar, Platform, Alert } from 'react-native';
+import { AppState, StatusBar, Platform, Alert } from 'react-native';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Splash } from '../components/Splash';
 import { colors, SECURESTORE_ACCESSTOKEN, SECURESTORE_REFRESHTOKEN } from '../utils/GlobalUtils';
@@ -27,6 +27,7 @@ import { API_URL } from '../utils/RequestUtils';
 import {reportAxiosError} from '../libs/auth/core'
 import * as Updates from 'expo-updates'
 import { Manifest, UpdateCheckResult } from 'expo-updates';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export enum TokenState {
   CheckingToken,
@@ -187,15 +188,15 @@ const Atlas : React.FC = () => {
 
   return (
     <MenuProvider>
-        <SafeAreaView style={{height: '100%', backgroundColor: colors.red}}>
-        <StatusBar barStyle='light-content' backgroundColor={colors.red}/>
-        <NavigationContainer>  
-          {checkingToken ? <Splash/> :
-          <QueryClientProvider client={queryClient}>
-            {authStore.accessToken ? <AuthorizedNavigator  /> : <UnauthorizedNavigator /> } 
-          </QueryClientProvider> }
-        </NavigationContainer>  
-      </SafeAreaView>
+      <StatusBar barStyle='light-content' backgroundColor={colors.red}/>
+      <NavigationContainer>  
+      <SafeAreaView style={{backgroundColor: colors.red, height: '100%'}} edges={['top', 'left', 'right']}>
+        {checkingToken ? <Splash/> :
+        <QueryClientProvider client={queryClient}>
+          {authStore.accessToken ? <AuthorizedNavigator  /> : <UnauthorizedNavigator /> } 
+        </QueryClientProvider> }
+        </SafeAreaView>
+      </NavigationContainer>  
     </MenuProvider>
   );
 }

src/components/Map/MainMapComponent/OutdoorMap.tsx

@@ -11,7 +11,7 @@ import { booleanPointInPolygon, circle } from '@turf/turf';
 import * as Notifications from 'expo-notifications';
 import { observer } from "mobx-react";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
-import { Alert, AppState, Image, Keyboard, Platform, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
+import { ActivityIndicator, Alert, AppState, Image, Keyboard, Modal, Platform, TouchableOpacity, TouchableWithoutFeedback, View, Text } from "react-native";
 import { ScrollView, State } from "react-native-gesture-handler";
 import MapView, { LatLng, Marker, Polygon, Region } from "react-native-maps";
 import { Chip } from "react-native-paper";
@@ -90,9 +90,12 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
     }, [props.route])
 
     useEffect(() => {
-        mapState.setRefreshKey(Math.floor(Math.random() * 100))
-        console.log(currentRegion.current)
-        mapState.mapRef.current.animateToRegion(currentRegion.current)
+        if (navIndex == 0) {
+            mapState.setLoading(true)
+            setTimeout(() => {
+                mapState.setLoading(false)
+            }, 10);
+        }
     }, [navIndex])
 
     /**
@@ -283,6 +286,14 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
         <TouchableWithoutFeedback>
             <>
             {/*Main map component*/}
+            <Modal transparent={true} animationType="fade" visible={mapState.loading}>
+                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.3)'}}>
+                    <View style={{width: '60%', height: '30%', backgroundColor: colors.red, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
+                        <ActivityIndicator size="large" color="white" style={{marginBottom: 20}}/>
+                        <Text style={{fontSize: 15, color: 'white'}}>Refreshing</Text>
+                    </View>
+                </View>
+            </Modal>
             <MapView 
                 key={mapState.refreshKey}
                 toolbarEnabled={false}

src/components/Map/MainMapComponent/useMapState.ts

@@ -68,6 +68,7 @@ export const useMapState = () => {
 }
 
 export const useOutdoorMapState = () => {
+    const [loading, setLoading] = useState<boolean>(false);
     /**
      * Used to force refreshes
      */
@@ -115,6 +116,7 @@ export const useOutdoorMapState = () => {
     const mapRef = useRef<MapView>();
 
     return {
+        loading, setLoading,
         refreshKey, setRefreshKey,
         nearbyLmPanelVisible, toggleNearbyLmPanel,
         followUser, toggleFollowUser,

src/navigation/AuthorizedNavigator.tsx

@@ -5,11 +5,11 @@
  * <dev@clicknpush.ca>, January 2022
  */
 
-import { FontAwesome } from '@expo/vector-icons';
+import { FontAwesome, SimpleLineIcons } from '@expo/vector-icons';
 import { BottomTabNavigationOptions, BottomTabNavigationProp, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { observer } from "mobx-react";
 import React, { useEffect } from "react";
-import { AppState, Platform, SafeAreaView, View, Text, Alert } from 'react-native';
+import { AppState, Platform, SafeAreaView, View, Text, Alert, OpaqueColorValue, ViewStyle } from 'react-native';
 import OutdoorMap from "../components/Map/MainMapComponent/OutdoorMap";
 import Profile from "../components/Profile/Profile";
 import { colors, SECURESTORE_NOTIFTOKEN } from "../utils/GlobalUtils";
@@ -40,11 +40,9 @@ const MainTabs = createBottomTabNavigator();
 const tabBarOptions: BottomTabNavigationOptions = {
     //keyboardHidesTabBar: true,
     tabBarActiveTintColor: 'white',
-    tabBarActiveBackgroundColor: '#e35555',
     tabBarInactiveTintColor: "lightgray",
     headerShown:false,
-
-    tabBarStyle: {backgroundColor: colors.red, height: 60, justifyContent: 'center'},
+    tabBarStyle: {height: 90, backgroundColor: colors.red, justifyContent: 'center'},
     tabBarLabelStyle: {marginBottom: 7},
     tabBarIconStyle: {marginBottom: 7}
 } 
@@ -214,25 +212,37 @@ const AuthorizedNavigator: React.FC = () => {
         return newNotifAmount > 0 ? <Badge positioning={{top: 8, left: 13,}} value={newNotifAmount}/> : null
     }
 
+    // const IconView: React.FC<{iconType: Icone, focused: boolean, color: string}>  = ({iconType, color, focused, children}) => {
+    //     const activeBorderStyles: ViewStyle = {borderTopWidth: 1, borderTopColor: color}
+
+    //     return (
+    //         <View style={[{position: 'absolute', top: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}, focused ? activeBorderStyles : null  ]}>
+    //             <FontAwesome name={focused ? 'bell' : 'bell-o'} size={getIconSize(focused)} color={color} />
+    //             <FontAwesome name={focused ? iconType : iconType + '-o'} size={getIconSize(focused)} color={color} />
+    //             {children}
+    //         </View>
+    //     )
+    // }
+
     return(
-        <SafeAreaView style={{height: '100%'}}>
+        <View style={{height: '100%'}}>
             {/* <AdMobBanner adUnitID="ca-app-pub-3940256099942544/6300978111" /> */}
             <MainTabs.Navigator 
                 sceneContainerStyle={{flex:1}}     
                 initialRouteName="Map"
                 screenOptions={tabBarOptions}>
-                <MainTabs.Screen name="Map" component={MapNavigator} options={{tabBarIcon: ({color, focused}) => (<FontAwesome name={focused ? 'map' : 'map-o'} size={getIconSize(focused)} color={color} style={{position: 'absolute', top: 10}}/>)}}/>
+                <MainTabs.Screen name="Map" component={MapNavigator} options={{tabBarIcon: ({color, focused}) => (<FontAwesome name={focused ? 'map' : 'map-o'} size={getIconSize(focused)} color={color} style={{position: 'absolute', top: 15}}/>)}}/>
                 <MainTabs.Screen name="Feed" options={{tabBarIcon: ({color, focused}) => (
-                    <View style={{position: 'absolute', top: 10}}>
+                    <View style={{position: 'absolute', top: 15}}>
                         <FontAwesome name={focused ? 'bell' : 'bell-o'} size={getIconSize(focused)} color={color} />
                         {renderFeedBadge()}
                     </View>
                 )}}>
                     {() => <Feed notifications={notifications} handleNotifInteraction={handleNotificationInteraction} />}
                 </MainTabs.Screen>
-                <MainTabs.Screen name="Profile" component={Profile} options={{tabBarIcon: ({color, focused}) => (<FontAwesome name={focused ? 'user' : 'user-o'} size={getIconSize(focused)} color={color} style={{position: 'absolute', top: 10}}/>)}} />
+                <MainTabs.Screen name="Profile" component={Profile} options={{tabBarIcon: ({color, focused}) => (<FontAwesome name={focused ? 'user' : 'user-o'} size={getIconSize(focused)} color={color} style={{position: 'absolute', top: 15}}/>)}} />
             </MainTabs.Navigator>
-        </SafeAreaView>
+        </View>
         
     )
 }

src/utils/RequestUtils.ts

@@ -28,6 +28,6 @@ import Config from 'react-native-config'
 // export const API_URL = 'https://staging.clicknpush.ca'
 
 // export const API_URL = 'http://192.168.3.162:8000'
-export const API_URL = 'http://192.168.0.22:8000'
+export const API_URL = 'http://192.168.3.102:8000'
 
 // export const API_URL = Config.API_URL