Skip to content

Commit

Permalink
Merge pull request #24 from fleetbase/dev-v1.1.9
Browse files Browse the repository at this point in the history 
v1.1.9
  • Loading branch information
@roncodes
roncodes authored Jan 18, 2024
2 parents 06a6cce + 0d0169f commit c5a5f0b
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 79 deletions.
18 changes: 5 additions & 13 deletions App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,12 @@ const App: () => Node = () => {
return null;
});

const setFleetbaseConfig = useCallback(async (key, host) => {
const setFleetbaseConfig = useCallback(async (key, host, socketcluster_host, socketcluster_port) => {
return await new Promise(() => {
setString('_FLEETBASE_KEY', key);
setString('_FLEETBASE_HOST', host);
setString('_SOCKET_HOST', socketcluster_host);
setString('_SOCKET_PORT', socketcluster_port);

if (navigationRef.current) {
navigationRef.current.reset({
Expand All @@ -142,26 +144,16 @@ const App: () => Node = () => {
});
});

const showLoader = (isLoading => {
return (
<View style={tailwind('bg-gray-800 flex items-center justify-center w-full h-full')}>
<View style={tailwind('flex items-center justify-center')}>
<ActivityIndicator style={tailwind('mb-4')} isLoading={isLoading} />
</View>
</View>
);
})();

useEffect(() => {
const setupInstanceLink = ({ url }) => {
console.log('setupInstanceLink() #url', url);

const parsedParams = parseDeepLinkUrl(url);

if (parsedParams !== null) {
const { key, host } = parsedParams;
const { key, host, socketcluster_host, socketcluster_port } = parsedParams;

setFleetbaseConfig(key, host);
setFleetbaseConfig(key, host, socketcluster_host, socketcluster_port);
fleetbase.organizations.current().then(res => {
setString('_BRANDING_LOGO', res.branding.logo_url);
setString('_LOGO', res.logo_url);
Expand Down
2 changes: 2 additions & 0 deletions src/features/Auth/AuthStack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
// import AccountScreen from './screens/AccountScreen';
import LoginScreen from 'auth/screens/LoginScreen';
import CreateAccountScreen from 'auth/screens/CreateAccountScreen';
import ConfigScreen from 'auth/screens/ConfigScreen';

const RootStack = createStackNavigator();

Expand All @@ -14,6 +15,7 @@ const AuthStack = ({ route }) => {
{/* <RootStack.Screen name="AccountScreen" component={AccountScreen} options={{ headerShown: false }} initialParams={{ info }} /> */}
<RootStack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
<RootStack.Screen name="CreateAccount" component={CreateAccountScreen} options={{ headerShown: false }} />
<RootStack.Screen name="ConfigScreen" component={ConfigScreen} options={{ headerShown: false}} />
</RootStack.Navigator>
</SafeAreaProvider>
);
Expand Down
62 changes: 62 additions & 0 deletions src/features/Auth/screens/ConfigScreen.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { faWindowClose } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import config from 'config';
import React from 'react';
import { SafeAreaView, Text, TouchableOpacity, View } from 'react-native';
import tailwind from 'tailwind';

let { SOCKETCLUSTER_PORT, SOCKETCLUSTER_HOST, FLEETBASE_HOST } = config;
const ConfigScreen = ({ navigation }) => {
return (
<SafeAreaView style={tailwind('w-full h-full bg-gray-800 flex-grow')}>
<View style={tailwind('flex flex-row items-center justify-between p-4 ')}>
<View>
<Text style={tailwind('font-bold text-white text-base')}>Instance Configuration</Text>
</View>
<TouchableOpacity onPress={() => navigation.goBack()} style={tailwind('rounded-full')}>
<FontAwesomeIcon size="25" icon={faWindowClose} style={tailwind('text-red-400')} />
</TouchableOpacity>
</View>
<View style={[tailwind('p-4')]}>
<View style={[tailwind('bg-gray-900 border border-gray-700 rounded-md flex flex-row items-center mb-6')]}>
<View style={[tailwind('border-r border-gray-700 bg-gray-200 px-4 py-2 flex flex-row items-center rounded-l-md'), { width: 120 }]}>
<Text style={tailwind('text-xs font-semibold text-black')} numberOfLines={1}>
HOST:
</Text>
</View>
<View style={[tailwind('px-4 py-2 flex flex-row items-center rounded-r-md')]}>
<Text style={tailwind('text-gray-50 text-xs')} numberOfLines={1}>
{FLEETBASE_HOST}
</Text>
</View>
</View>
<View style={[tailwind('bg-gray-900 border border-gray-700 rounded-md flex flex-row items-center mb-6')]}>
<View style={[tailwind('border-r border-gray-700 bg-gray-200 px-4 py-2 flex flex-row items-center rounded-l-md'), { width: 120 }]}>
<Text style={tailwind('text-xs font-semibold text-black')} numberOfLines={1}>
SOCKET HOST:
</Text>
</View>
<View style={[tailwind('px-4 py-2 flex flex-row items-center rounded-r-md')]}>
<Text style={tailwind('text-gray-50 text-xs')} numberOfLines={1}>
{SOCKETCLUSTER_HOST}
</Text>
</View>
</View>
<View style={[tailwind('bg-gray-900 border border-gray-700 rounded-md flex flex-row items-center mb-6')]}>
<View style={[tailwind('border-r border-gray-700 bg-gray-200 px-4 py-2 flex flex-row items-center rounded-l-md'), { width: 120 }]}>
<Text style={tailwind('text-xs font-semibold text-black')} numberOfLines={1}>
SOCKET PORT:
</Text>
</View>
<View style={[tailwind('px-4 py-2 flex flex-row items-center rounded-r-md')]}>
<Text style={tailwind('text-gray-50 text-xs')} numberOfLines={1}>
{SOCKETCLUSTER_PORT}
</Text>
</View>
</View>
</View>
</SafeAreaView>
);
};

export default ConfigScreen;
21 changes: 19 additions & 2 deletions src/features/Auth/screens/LoginScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import PhoneInput from 'components/PhoneInput';
import { useDriver, useFleetbase, useLocale } from 'hooks';

import { faLink } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import React, { useCallback, useState } from 'react';
import { ActivityIndicator, ImageBackground, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableOpacity, View } from 'react-native';
import FastImage from 'react-native-fast-image';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Toast from 'react-native-toast-message';
import tailwind from 'tailwind';
import { getString } from 'utils/Storage';
import { config, deepGet, getColorCode, logError, syncDevice, translate } from 'utils';
import { getString } from 'utils/Storage';

import { getLocation } from 'utils/Geo';

const isPhone = (phone = '') => {
Expand Down Expand Up @@ -125,7 +129,7 @@ const LoginScreen = ({ navigation, route }) => {
{...(config('ui.createAccountScreen.phoneInputProps') ?? {})}
/>
</View>
<TouchableOpacity style={tailwind('mb-3')} onPress={sendVerificationCode}>
<TouchableOpacity style={tailwind('mb-2')} onPress={sendVerificationCode}>
<View style={[tailwind('btn bg-gray-900 border border-gray-700'), config('ui.loginScreen.sendVerificationCodeButtonStyle')]}>
{isLoading && <ActivityIndicator size={'small'} color={getColorCode('text-blue-500')} style={tailwind('mr-2')} />}
<Text style={[tailwind('font-semibold text-gray-50 text-lg text-center'), config('ui.loginScreen.sendVerificationCodeButtonTextStyle')]}>
Expand All @@ -135,6 +139,19 @@ const LoginScreen = ({ navigation, route }) => {
</TouchableOpacity>
</View>
)}

{isNotAwaitingVerification && (
<View style={tailwind('flex items-end mr-4 rounded-full')}>
<TouchableOpacity
style={tailwind('rounded-lg mb-3 bg-gray-900 w-10 h-10 border border-gray-700 flex items-center justify-center')}
onPress={() => {
navigation.navigate('ConfigScreen');
}}>
<FontAwesomeIcon icon={faLink} style={tailwind('text-gray-400')} />
</TouchableOpacity>
</View>
)}

{isAwaitingVerification && (
<View style={[tailwind(''), config('ui.loginScreen.verifyFormContainerStyle')]}>
<View style={tailwind('mb-6')}>
Expand Down
46 changes: 10 additions & 36 deletions src/features/Shared/NavigationScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
import React, { useState, useEffect, useCallback, createRef } from 'react';
import { ScrollView, View, Text, TouchableOpacity, TextInput, ActivityIndicator, RefreshControl, Alert, Dimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faTimes, faLocationArrow } from '@fortawesome/free-solid-svg-icons';
import { Order, Place } from '@fleetbase/sdk';
import { useMountedState, useLocale, useDriver, useFleetbase } from 'hooks';
import { getCurrentLocation, formatCurrency, formatKm, formatDistance, calculatePercentage, translate, logError, isEmpty, isArray, getColorCode, titleize, formatMetaValue } from 'utils';
import { format } from 'date-fns';
import MapboxNavigation from '@homee/react-native-mapbox-navigation';
import FastImage from 'react-native-fast-image';
import OrderStatusBadge from 'components/OrderStatusBadge';
import { faLocationArrow, faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { useDriver, useFleetbase, useLocale, useMountedState } from 'hooks';
import React, { createRef, useCallback, useEffect, useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import tailwind from 'tailwind';
import { getCurrentLocation, isArray, logError } from 'utils';

const NavigationScreen = ({ navigation, route }) => {
const { _order, _destination } = route.params;
Expand All @@ -27,13 +23,13 @@ const NavigationScreen = ({ navigation, route }) => {
const [origin, setOrigin] = useState(null);
const [isLoading, setIsLoading] = useState(false);

const extractOriginCoordinates = useCallback((_origin) => {
const extractOriginCoordinates = useCallback(_origin => {
if (_origin?.coordinates && isArray(_origin?.coordinates)) {
return _origin?.coordinates?.reverse();
}

if (_origin?.coords && _origin?.coords?.latitude && _origin?.coords?.longitude) {
return [ _origin?.coords?.longitude, _origin?.coords?.latitude];
return [_origin?.coords?.longitude, _origin?.coords?.latitude];
}
});

Expand All @@ -44,7 +40,7 @@ const NavigationScreen = ({ navigation, route }) => {

const isReady = isArray(coords?.origin) && isArray(coords?.destination);

const trackDriverLocation = useCallback((event) => {
const trackDriverLocation = useCallback(event => {
// const { distanceTraveled, durationRemaining, fractionTraveled, distanceRemaining } = event.nativeEvent;
const { latitude, longitude } = event.nativeEvent;

Expand Down Expand Up @@ -77,28 +73,6 @@ const NavigationScreen = ({ navigation, route }) => {
</View>
</View>
</View>
{isReady ? (
<MapboxNavigation
origin={coords.origin}
destination={coords.destination}
showsEndOfRouteFeedback={true}
onLocationChange={trackDriverLocation}
onRouteProgressChange={(event) => {
const { distanceTraveled, durationRemaining, fractionTraveled, distanceRemaining } = event.nativeEvent;
}}
onError={(event) => {
const { message } = event.nativeEvent;
}}
onCancelNavigation={() => navigation.goBack()}
onArrive={() => {
// Called when you arrive at the destination.
}}
/>
) : (
<View style={tailwind('flex items-center justify-center h-full w-full bg-gray-600 -mt-14')}>
<ActivityIndicator size={'large'} color={getColorCode('text-blue-300')} />
</View>
)}
</View>
);
};
Expand Down
67 changes: 39 additions & 28 deletions src/utils/Helper.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Collection, isResource } from '@fleetbase/sdk';
import { EventRegister } from 'react-native-event-listeners';
import { isResource } from '@fleetbase/sdk';
import configuration from 'config';
import { countries } from 'countries-list';
import { set } from './Storage';
import { getCurrentLocation } from './Geo';
import { useNavigation } from '@react-navigation/native';
import useFleetbase from 'hooks/use-fleetbase';
import configuration from 'config';
import { EventRegister } from 'react-native-event-listeners';
import socketClusterClient from 'socketcluster-client';
import { getString } from './Storage';

const { emit } = EventRegister;

Expand Down Expand Up @@ -43,7 +41,7 @@ export default class HelperUtil {

if (_country !== null) {
// eslint-disable-next-line radix
return _list.find((c) => c.iso2 === _country || parseInt(c.phone) === parseInt(_country));
return _list.find(c => c.iso2 === _country || parseInt(c.phone) === parseInt(_country));
}

return _list;
Expand All @@ -65,7 +63,7 @@ export default class HelperUtil {
return;
}

const index = places.findIndex((p) => p.id === place.id);
const index = places.findIndex(p => p.id === place.id);

if (place.isDeleted) {
places = places.removeAt(index);
Expand Down Expand Up @@ -374,7 +372,7 @@ export default class HelperUtil {
* @param {*} mixed
* @memberof HelperUtil
*/
static isFalsy = (mixed) => {
static isFalsy = mixed => {
return !mixed === true || mixed === '0';
};

Expand Down Expand Up @@ -434,7 +432,7 @@ export default class HelperUtil {
return defaultColorCode;
}

const rgba2rgb = (rgbaString) => {
const rgba2rgb = rgbaString => {
const decimals = rgbaString.replace('rgba', 'rgb').split(',');
decimals.pop();

Expand Down Expand Up @@ -477,12 +475,25 @@ export default class HelperUtil {
}

static async createSocketAndListen(channelId, callback) {
let hostname = getString('_SOCKET_HOST');
let port = getString('_SOCKET_PORT');

// IF no hostname set from instance link use env
if (!hostname) {
hostname = HelperUtil.config('SOCKETCLUSTER_HOST', 'socket.fleetbase.io');
}

// IF no port set from instance link use env
if (!port) {
port = HelperUtil.config('SOCKETCLUSTER_PORT', 8000);
}

// Create socket connection config
const socketConnectionConfig = {
hostname: HelperUtil.config('SOCKETCLUSTER_HOST', 'localhost'),
hostname,
path: HelperUtil.config('SOCKETCLUSTER_PATH', '/socketcluster/'),
secure: toBoolean(HelperUtil.config('SOCKETCLUSTER_SECURE', false)),
port: HelperUtil.config('SOCKETCLUSTER_PORT', 38000),
port,
autoConnect: true,
autoReconnect: true,
};
Expand Down Expand Up @@ -527,7 +538,7 @@ export default class HelperUtil {

return HelperUtil.createSocketAndListen(channelId, ({ event, data }) => {
if (typeof data.id === 'string' && data.id.startsWith('order')) {
return fleetbase.orders.findRecord(data.id).then((order) => {
return fleetbase.orders.findRecord(data.id).then(order => {
const serializedOrder = order.serialize();

if (typeof callback === 'function') {
Expand Down Expand Up @@ -555,13 +566,13 @@ export default class HelperUtil {
}

if (event === 'order.driver_assigned') {
title = `📋 ${order.id} was just assigned!`
title = `📋 ${order.id} was just assigned!`;
}

return {
title,
message,
subtitle
subtitle,
};
}
}
Expand Down Expand Up @@ -590,26 +601,26 @@ const listenForOrdersFromSocket = HelperUtil.listenForOrdersFromSocket;
const createNewOrderLocalNotificationObject = HelperUtil.createNewOrderLocalNotificationObject;

export {
listCountries,
isArray,
config,
createNewOrderLocalNotificationObject,
createSocketAndListen,
debounce,
deepGet,
getColorCode,
hasRequiredKeys,
isLastIndex,
stripHtml,
stripIframeTags,
isAndroid,
isApple,
isVoid,
isArray,
isEmpty,
isFalsy,
isLastIndex,
isVoid,
listCountries,
listenForOrdersFromSocket,
logError,
mutatePlaces,
debounce,
deepGet,
config,
stripHtml,
stripIframeTags,
sum,
getColorCode,
toBoolean,
createSocketAndListen,
listenForOrdersFromSocket,
createNewOrderLocalNotificationObject,
};

0 comments on commit c5a5f0b

Please sign in to comment.