ordering-ui-react-native 0.8.6 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -60,6 +60,7 @@
     "react-native-app-intro-slider": "^4.0.4",
     "react-native-awesome-alerts": "^1.4.2",
     "react-native-awesome-loading": "^1.0.15",
+    "react-native-background-timer": "^2.4.1",
     "react-native-bootsplash": "^3.2.3",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",

package/src/components/OrdersOption/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
-import { useFocusEffect } from '@react-navigation/native'
 import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
@@ -62,7 +61,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       }
       setReorderLoading(false)
 
-    } catch (err) {
+    } catch (err: any) {
       showToast(ToastType.Error, t('ERROR', err.message))
       setReorderLoading(false)
     }
@@ -100,16 +99,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     return objectStatus && objectStatus
   }
 
-  useFocusEffect(
-    React.useCallback(() => {
-      loadOrders && loadOrders()
-      setIsLoadingFirstRender(false)
-      return () => {
-        setIsLoadingFirstRender(true)
-      }
-    }, [navigation])
-  )
-
   useEffect(() => {
     setOrdersLength && setOrdersLength({
       ...ordersLength,

package/src/navigators/HomeNavigator.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { AppState } from 'react-native'
 import { createStackNavigator } from "@react-navigation/stack";
-import { useSession, useOrder } from 'ordering-components/native';
+import { useSession, useOrder, useWebsocket } from 'ordering-components/native';
 import BottomNavigator from '../navigators/BottomNavigator';
 import RootNavigator from '../navigators/RootNavigator';
 import CheckoutNavigator from '../navigators/CheckoutNavigator';
+import BackgroundTimer from 'react-native-background-timer';
 
 import AddressList from '../pages/AddressList';
 import AddressForm from '../pages/AddressForm';
@@ -22,7 +24,30 @@ const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
   const [orderState] = useOrder();
-  const [{ auth }] = useSession();
+  const [{ auth, user }] = useSession();
+  const socket = useWebsocket();
+
+  const appState = React.useRef(AppState.currentState);
+  let interval: any
+
+  const _handleAppStateChange = (nextAppState: any) => {
+    if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+      BackgroundTimer.clearInterval(interval)
+    }else{
+      interval = BackgroundTimer.setInterval(()=>{
+        const ordersRoom = user?.level === 0 ? 'orders' : `orders_${user?.id}`
+        socket.join(ordersRoom)
+      }, 5000)
+      appState.current = nextAppState;
+    }
+  }
+
+  React.useEffect (() => {
+    AppState.addEventListener('change', _handleAppStateChange);
+    return () => {
+      AppState.removeEventListener('change', _handleAppStateChange);
+    };
+  },[])
 
   return (
     <Stack.Navigator>

package/src/types/react-native-background-timer/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-background-timer'

package/themes/business/src/components/MessagesOption/index.tsx

@@ -334,6 +334,11 @@ export const MessagesOption = (props: MessagesOptionParams) => {
       param: 'last_direct_message_at',
       direction: 'asc',
     },
+    paginationSettings: {
+      page: 1,
+      pageSize: 45,
+      controlType: 'infinity',
+    },
     UIComponent: MessagesOptionUI,
   };
 

package/themes/business/src/components/OrderDetailsDelivery/index.tsx

@@ -270,8 +270,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       // redirectToSettings();
       showToast(
         ToastType.Error,
-        ('GEOLOCATION_SERVICE_PERMISSION_BLOCKED',
-        'Geolocation service  permissions blocked.'),
+        t('GEOLOCATION_SERVICE_PERMISSION_BLOCKED',
+          'Geolocation service  permissions blocked.'),
       );
     } else {
       const response = await askLocationPermission();
@@ -618,18 +618,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
                   {(order?.summary?.delivery_price > 0 ||
                     order?.deliveryFee > 0) && (
-                    <Table>
-                      <OText mBottom={4}>
-                        {t('DELIVERY_FEE', 'Delivery Fee')}
-                      </OText>
+                      <Table>
+                        <OText mBottom={4}>
+                          {t('DELIVERY_FEE', 'Delivery Fee')}
+                        </OText>
 
-                      <OText mBottom={4}>
-                        {parsePrice(
-                          order?.summary?.delivery_price || order?.deliveryFee,
-                        )}
-                      </OText>
-                    </Table>
-                  )}
+                        <OText mBottom={4}>
+                          {parsePrice(
+                            order?.summary?.delivery_price || order?.deliveryFee,
+                          )}
+                        </OText>
+                      </Table>
+                    )}
 
                   <Table>
                     <OText mBottom={4}>
@@ -754,7 +754,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <View style={{ height: 30 }} />
           </OrderDetailsContainer>
 
-          {showFloatButtonsPickUp[order?.status] && !loading && (
+          {showFloatButtonsPickUp[order?.status] && (
             <FloatingButton
               disabled={loading}
               btnText={t('FAILED', 'Failed')}

package/themes/business/src/components/OrdersOption/index.tsx

@@ -12,7 +12,6 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { OText, OIconButton, OButton } from '../shared';
 import { PreviousOrders } from '../PreviousOrders';
 import { NotFoundSource } from '../NotFoundSource';
-import { useFocusEffect } from '@react-navigation/native';
 import { FiltersTab, TabsContainer, Tag } from './styles';
 import { OrdersOptionParams } from '../../types';
 
@@ -131,7 +130,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [tabsFilter, setTabsFilter] = useState(tabs[0].tags);
   const [tagsFilter, setTagsFilter] = useState(tabs[0].tags);
   const [loadingTag, setLoadingTag] = useState(false);
-  const [isLoadingFirstRender, setIsLoadingFirstRender] = useState(false);
   const [reload, setReload] = useState(false);
   const [orientation, setOrientation] = useState(
     Dimensions.get('window').width < Dimensions.get('window').height
@@ -142,16 +140,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
   );
 
-  useFocusEffect(
-    React.useCallback(() => {
-      loadOrders && loadOrders(true, rememberOrderStatus);
-      setIsLoadingFirstRender(false);
-      return () => {
-        setIsLoadingFirstRender(true);
-      };
-    }, [navigation, rememberOrderStatus]),
-  );
-
   const handleChangeTab = (tags: number[]) => {
     setTabsFilter(tags);
     setRememberOrderStatus(tags);
@@ -410,19 +398,15 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       )}
 
       <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
-        {!reload &&
-          !error &&
-          orders.length > 0 &&
-          !loadingTag &&
-          !isLoadingFirstRender && (
-            <PreviousOrders
-              orders={ordersToShow}
-              onNavigationRedirect={onNavigationRedirect}
-              getOrderStatus={getOrderStatus}
-            />
-          )}
+        {!reload && !error && orders.length > 0 && !loadingTag && (
+          <PreviousOrders
+            orders={ordersToShow}
+            onNavigationRedirect={onNavigationRedirect}
+            getOrderStatus={getOrderStatus}
+          />
+        )}
 
-        {(loading || isLoadingFirstRender) && (
+        {loading && (
           <>
             <View>
               {[...Array(5)].map((item, i) => (
@@ -458,7 +442,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           pagination.totalPages &&
           !loading &&
           !!orders.length &&
-          !isLoadingFirstRender &&
           pagination.currentPage < pagination.totalPages && (
             <OButton
               onClick={handleLoadMore}
@@ -486,7 +469,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 6,
+      pageSize: 45,
       controlType: 'infinity',
     },
 

package/themes/business/src/components/UserProfileForm/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
 import { useForm } from 'react-hook-form';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -45,6 +45,7 @@ const ProfileUI = (props: ProfileParams) => {
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
     userState,
+    isAvailableLoading,
   } = props;
 
   const [{ user }] = useSession();
@@ -272,20 +273,24 @@ const ProfileUI = (props: ProfileParams) => {
                 )}
               </OText>
 
-              <ToggleSwitch
-                isOn={userState?.result?.result?.available}
-                onColor={theme.colors.primary}
-                offColor={theme.colors.offColor}
-                size="small"
-                onToggle={() =>
-                  handleToggleAvalaibleStatusDriver &&
-                  handleToggleAvalaibleStatusDriver(
-                    !userState?.result?.result?.available,
-                  )
-                }
-                disabled={userState?.loading}
-                animationSpeed={200}
-              />
+              {isAvailableLoading ? (
+                <ActivityIndicator size="small" color={theme.colors.primary} />
+              ) : (
+                <ToggleSwitch
+                  isOn={userState?.result?.result?.available}
+                  onColor={theme.colors.primary}
+                  offColor={theme.colors.offColor}
+                  size="small"
+                  onToggle={() =>
+                    handleToggleAvalaibleStatusDriver &&
+                    handleToggleAvalaibleStatusDriver(
+                      !userState?.result?.result?.available,
+                    )
+                  }
+                  disabled={userState?.loading}
+                  animationSpeed={200}
+                />
+              )}
             </EnabledStatusDriver>
           )}
 

package/themes/business/src/types/index.tsx

@@ -28,6 +28,7 @@ export interface ProfileParams {
   toggleIsEdit?: any;
   cleanFormState?: any;
   setFormState?: any;
+  isAvailableLoading?: boolean;
   handleChangeInput?: any;
   handleButtonUpdateClick?: any;
   handleToggleAvalaibleStatusDriver?: any;