When changing the organization, the order does not appear (#44)

* Fixed the order not being visible when there are multiple organizations
* Displayed a marker behind the selected organization

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/navigator-app",
-    "version": "1.1.15",
+    "version": "1.1.16",
     "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "keywords": [
         "fleetbase-navigator",
@@ -43,7 +43,6 @@
         "@react-native-community/masked-view": "^0.1.11",
         "@react-native-community/netinfo": "^11.2.1",
         "@react-native-community/push-notification-ios": "^1.8.0",
-        "@react-native-picker/picker": "^2.0.31",
         "@react-navigation/bottom-tabs": "^6.3.1",
         "@react-navigation/native": "^6.0.10",
         "@react-navigation/stack": "^6.2.1",

src/features/Account/screens/AccountScreen.js

@@ -27,7 +27,8 @@ const AccountScreen = ({ navigation }) => {
     };
 
     useEffect(() => {
-        driver.currentOrganization().then(setCurrentOrganization);
+        const res = driver.currentOrganization().then(setCurrentOrganization);
+        console.log('current::::', JSON.stringify(currentOrganization));
     }, []);
 
     const RenderBackground = props => {

src/features/Account/screens/OrganizationScreen.js

@@ -1,10 +1,10 @@
-import { faWindowClose } from '@fortawesome/free-solid-svg-icons';
+import { faWindowClose, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, Alert, FlatList, RefreshControl, Text, TouchableOpacity, View } from 'react-native';
 import Toast from 'react-native-toast-message';
 import tailwind from 'tailwind';
-import { getColorCode, logError } from 'utils';
+import { getColorCode, logError, translate } from 'utils';
 import { useDriver } from 'utils/Auth';
 
 const Organization = ({ navigation, route }) => {
@@ -79,10 +79,11 @@ const Organization = ({ navigation, route }) => {
     const renderItem = ({ item }) => (
         <TouchableOpacity onPress={() => confirmSwitchOrganization(item.id)}>
             <View style={[tailwind('p-1')]}>
-                <View style={[tailwind('px-4 py-2 flex flex-row items-center rounded-r-md')]}>
+                <View style={[tailwind('px-4 py-2 flex flex-row items-center justify-between rounded-r-md')]}>
                     <Text style={tailwind('text-gray-50 text-base')} numberOfLines={1}>
-                        <Text>{item?.getAttribute('name')}</Text>
+                        {item.getAttribute('name')}
                     </Text>
+                    {currentOrganization.getAttribute('id') === item.id && <FontAwesomeIcon icon={faCheck} size={15} style={tailwind('text-green-400')} />}
                 </View>
             </View>
         </TouchableOpacity>
@@ -95,19 +96,23 @@ const Organization = ({ navigation, route }) => {
             ) : (
                 <View style={tailwind('flex flex-row items-center justify-between p-4 ')}>
                     <View>
-                        <Text style={tailwind('font-bold text-white text-base')}>Organizations</Text>
+                        <Text style={tailwind('font-bold text-white text-base')}>{translate('Account.OrganizationScreen.title')}</Text>
                     </View>
                     <TouchableOpacity onPress={() => navigation.goBack()} style={tailwind('rounded-full ')}>
                         <FontAwesomeIcon size={20} icon={faWindowClose} style={tailwind('text-red-400 ')} />
                     </TouchableOpacity>
                 </View>
             )}
-            <FlatList
-                refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={fetchData} tintColor={getColorCode('text-blue-200')} />}
-                data={organizations}
-                keyExtractor={item => item.id}
-                renderItem={renderItem}
-            />
+            {organizations.length === 0 ? (
+                <Text style={tailwind('text-white text-center p-4')}>{translate('Account.OrganizationScreen.empty')}</Text>
+            ) : (
+                <FlatList
+                    refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={fetchData} tintColor={getColorCode('text-blue-200')} />}
+                    data={organizations}
+                    keyExtractor={item => item.id}
+                    renderItem={renderItem}
+                />
+            )}
         </View>
     );
 };

src/features/Core/screens/OrdersScreen.js

@@ -33,6 +33,8 @@ const OrdersScreen = ({ navigation }) => {
     const [isLoaded, setIsLoaded] = useState(false);
     const [orders, setOrders] = useResourceCollection(`orders_${format(date, 'yyyyMMdd')}`, Order, fleetbase.getAdapter());
     const [nearbyOrders, setNearbyOrders] = useState([]);
+    const [currentOrganization, setCurrentOrganization] = useState();
+
     const [searchingForNearbyOrders, setSearchingForNearbyOrders] = useState(false);
     const startingDate = new Date().setDate(date.getDate() - 2);
     const datesWhitelist = [
@@ -72,6 +74,9 @@ const OrdersScreen = ({ navigation }) => {
             });
     });
 
+    useEffect(() => {
+        driver.currentOrganization().then(setCurrentOrganization);
+    }, []);
     const loadNearbyOrders = useCallback((options = {}) => {
         if (options.isRefreshing) {
             setIsRefreshing(true);

src/hooks/use-fleetbase.js

@@ -1,6 +1,7 @@
 import Fleetbase from '@fleetbase/sdk';
 import config from 'config';
-import { getString, get } from 'utils/Storage';
+import { isObject } from 'utils';
+import { get, getString } from 'utils/Storage';
 
 const useFleetbase = () => {
     let { FLEETBASE_KEY, FLEETBASE_HOST, FLEETBASE_NAMESPACE } = config;
@@ -16,7 +17,7 @@ const useFleetbase = () => {
         FLEETBASE_HOST = _FLEETBASE_HOST;
     }
 
-    if (typeof _DRIVER === 'object' && typeof _DRIVER?.token === 'string') {
+    if (isObject(_DRIVER) && typeof _DRIVER.token === 'string') {
         FLEETBASE_KEY = _DRIVER.token;
     }
 

src/utils/Helper.js

@@ -575,6 +575,10 @@ export default class HelperUtil {
             subtitle,
         };
     }
+
+    static isObject(obj) {
+        return obj && typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Object]';
+    }
 }
 
 const listCountries = HelperUtil.listCountries;
@@ -588,6 +592,7 @@ const isApple = HelperUtil.isApple();
 const isVoid = HelperUtil.isVoid;
 const isEmpty = HelperUtil.isEmpty;
 const isFalsy = HelperUtil.isFalsy;
+const isObject = HelperUtil.isObject;
 const logError = HelperUtil.logError;
 const mutatePlaces = HelperUtil.mutatePlaces;
 const debounce = HelperUtil.debounce;
@@ -613,6 +618,7 @@ export {
     isArray,
     isEmpty,
     isFalsy,
+    isObject,
     isLastIndex,
     isVoid,
     listCountries,

src/utils/index.js

@@ -10,6 +10,7 @@ import {
     isVoid,
     isEmpty,
     isFalsy,
+    isObject,
     logError,
     mutatePlaces,
     debounce,
@@ -121,6 +122,7 @@ export {
     isVoid,
     isEmpty,
     isFalsy,
+    isObject,
     toBoolean,
     logError,
     calculatePercentage,

translations/en.json

@@ -19,6 +19,10 @@
             "emailLabelText": "Your email address",
             "phoneLabelText": "Your mobile number",
             "saveButtonText": "Save Profile"
+        },
+        "OrganizationScreen": {
+            "title": "Organizations",
+            "empty": "No organizations"
         }
     },
     "Auth": {