@eohjsc/react-native-smart-city 0.3.25 → 0.3.28

package/src/commons/Tabbar/Styles/indexStyles.js

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+import { isIphoneX } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../configs';
+
+const widthBadge = 20;
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    height: 70,
+    backgroundColor: Colors.White,
+    paddingHorizontal: 10,
+    borderTopWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  label: {
+    textAlign: 'center',
+    fontSize: 12,
+    marginTop: 10,
+    marginBottom: isIphoneX() ? 10 : 0,
+  },
+  wrapTab: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    marginBottom: -8,
+  },
+  wrapIcon: {
+    position: 'relative',
+  },
+  badgeCount: {
+    width: widthBadge,
+    height: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.Red,
+    borderRadius: widthBadge / 2,
+    position: 'absolute',
+    top: -8,
+    right: -8,
+  },
+  txtBadge: {
+    color: Colors.White,
+    fontSize: 12,
+  },
+  iconActive: {
+    tintColor: Colors.Primary,
+  },
+});

package/src/commons/Tabbar/index.js

@@ -0,0 +1,110 @@
+import React, { memo, useEffect } from 'react';
+import { Animated, View, Text, TouchableOpacity, Image } from 'react-native';
+import Routes from '../../utils/Route';
+import { Colors } from '../../configs/Colors';
+import { Constants } from '../../configs/Constants';
+import styles from './Styles/indexStyles';
+import { Images } from '../../configs';
+
+export const getTabBarIcon = (routeName) => {
+  switch (routeName) {
+    case Routes.TemplateStack:
+      return Images.template;
+    case Routes.GatewayStack:
+      return Images.gateway;
+    case Routes.SmartStack:
+      return Images.smart;
+  }
+};
+
+const getWidth = () => (Constants.width - 12) / 3;
+
+const TabBarItem = ({
+  descriptor,
+  route,
+  index,
+  isFocused,
+  navigation,
+  notificationNumber,
+  updateLastSeen,
+}) => {
+  const { options } = descriptor;
+  const label =
+    options.tabBarLabel !== undefined
+      ? options.tabBarLabel
+      : options.title !== undefined
+      ? options.title
+      : route.name;
+  const color = isFocused ? Colors.Primary : Colors.Black;
+
+  const onPress = () => {
+    const event = navigation.emit({
+      type: 'tabPress',
+      target: route.key,
+      canPreventDefault: true,
+    });
+    if (!isFocused && !event.defaultPrevented) {
+      navigation.navigate({
+        name: route.name,
+        merge: true,
+        params: { isMainSource: options.isMainSource },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      Animated.spring(options.tabOffSetValue, {
+        toValue: getWidth() * index,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isFocused, index, options.tabOffSetValue]);
+
+  useEffect(() => {
+    if (isFocused) {
+      if (route.name === Routes.NotificationStack) {
+        updateLastSeen && updateLastSeen();
+      }
+    }
+  }, [isFocused, route.name, updateLastSeen]);
+
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.wrapTab}>
+      <View style={styles.wrapIcon}>
+        <Image
+          style={[styles.icon, isFocused && styles.iconActive]}
+          source={getTabBarIcon(route.name)}
+        />
+        {route.name === Routes.NotificationStack && notificationNumber > 0 && (
+          <View style={styles.badgeCount}>
+            <Text style={styles.txtBadge}>
+              {notificationNumber < 9 ? notificationNumber : '9+'}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      <Text style={[styles.label, { color }]}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const TabBar = ({ state, descriptors, navigation }) => {
+  return (
+    <View style={styles.wrap}>
+      {state.routes.map((route, index) => (
+        <TabBarItem
+          key={index}
+          descriptor={descriptors[route.key]}
+          route={route}
+          index={index}
+          isFocused={state.index === index}
+          navigation={navigation}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default memo(TabBar);

package/src/configs/Colors.js

@@ -133,4 +133,8 @@ export const Colors = {
   BlackTransparent16: 'rgba(0, 0, 0, 0.16)',
   WhiteTransparent8: 'rgba(255, 255, 255, 0.8)',
   BlueTransparent5: 'rgba(230, 247, 255, 0.5)',
+  Neutral: {
+    Neutral3: '#E6E6E6',
+    Neutral5: '#595959',
+  },
 };

package/src/configs/Images.js

@@ -13,4 +13,10 @@ export default {
   shadowButton: require('../Images/Common/shadowButton.png'),
   eye: require('../Images/Common/eye.png'),
   eyeClosed: require('../Images/Common/eye-closed.png'),
+  deviceIcon: require('../Images/Common/device_icon.png'),
+  template: require('../Images/DevMode/template.png'),
+  smart: require('../Images/DevMode/smart.png'),
+  gateway: require('../Images/DevMode/gateway.png'),
+  menu: require('../Images/DevMode/menu.png'),
+  search: require('../Images/DevMode/search.png'),
 };

package/src/context/actionType.ts

@@ -23,6 +23,7 @@ export const Action = {
   NEED_UPDATE_VALUE_EVALUATIONS: 'NEED_UPDATE_VALUE_EVALUATIONS',
   ON_RECEIVE_NOTIFICATION: 'ON_RECEIVE_NOTIFICATION',
   SET_DEVICES_STATUS: 'SET_DEVICES_STATUS',
+  SET_POPOVER_ANIMATING: 'SET_POPOVER_ANIMATING',
 };
 
 export type AuthData = {
@@ -80,6 +81,7 @@ export type AppType = {
   isNetworkConnected: boolean;
   camera_opened: any[];
   notificationData: any;
+  popoverAnimating: boolean;
 };
 
 export type IoTType = {

package/src/context/reducer.ts

@@ -60,6 +60,7 @@ export const initialState = {
     isNetworkConnected: false,
     camera_opened: [],
     notificationData: null,
+    popoverAnimating: false,
   },
   iot: {
     googlehome: {
@@ -342,6 +343,15 @@ export const reducer = (currentState: ContextData, action: Action) => {
         },
       };
 
+    case Action.SET_POPOVER_ANIMATING:
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          popoverAnimating: payload,
+        },
+      };
+
     default:
       return currentState;
   }

package/src/hooks/Common/useGGHomeDeviceConnected.js

@@ -1,11 +1,18 @@
 import { useSCContextSelector } from '../../context';
 
 const useGGHomeDeviceConnected = (device) => {
-  const { connections } = useSCContextSelector((state) => state.iot.googlehome);
+  const connections = useSCContextSelector(
+    (state) => state.iot.googlehome.connections
+  );
+  const isNetworkConnected = useSCContextSelector(
+    (state) => state.app.isNetworkConnected
+  );
 
-  const isConnecting = !!device?.chip_id && !(device.chip_id in connections);
+  const isConnecting =
+    isNetworkConnected && !!device?.chip_id && !(device.chip_id in connections);
 
   const isConnected =
+    isNetworkConnected &&
     !!device?.chip_id &&
     device.chip_id in connections &&
     !!connections[device.chip_id];

package/src/hooks/Common/usePopover.js

@@ -2,14 +2,12 @@ import { useCallback, useState, useRef } from 'react';
 
 const usePopover = () => {
   const [showingPopover, setShowingPopover] = useState(false);
-  const [hidingPopoverComplete, setHidingPopoverComplete] = useState(true);
   const childRef = useRef(null);
 
   const showPopoverWithRef = useCallback(
     (ref) => {
       childRef.current = ref.current;
       setShowingPopover(true);
-      setHidingPopoverComplete(false);
     },
     [childRef]
   );
@@ -19,17 +17,11 @@ const usePopover = () => {
     setShowingPopover(false);
   }, [childRef]);
 
-  const hidePopoverComplete = useCallback(() => {
-    setHidingPopoverComplete(true);
-  }, []);
-
   return {
     childRef,
     showingPopover,
     showPopoverWithRef,
     hidePopover,
-    hidingPopoverComplete,
-    hidePopoverComplete,
   };
 };
 

package/src/hooks/IoT/useGGHomeConnection.js

@@ -71,7 +71,6 @@ const useGGHomeConnection = () => {
         onReconnected
       );
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [connections, onEstablished, onDisconnected, onReconnected]
   );
 

package/src/navigations/GatewayStack.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import Routes from '../utils/Route';
+import { screenOptions } from './utils';
+import Gateway from '../screens/Gateway';
+
+const Stack = createStackNavigator();
+
+const GatewayStack = memo(() => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name={Routes.Gateway} component={Gateway} />
+    </Stack.Navigator>
+  );
+});
+
+export default GatewayStack;

package/src/navigations/Main.js

@@ -0,0 +1,144 @@
+import React, { useMemo, useRef } from 'react';
+import {
+  Animated,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+} from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { useNavigation } from '@react-navigation/native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+
+import Tabbar from '../commons/Tabbar';
+import { Colors, Constants, Images } from '../configs';
+import t from '../hooks/Common/useTranslations';
+import Routes from '../utils/Route';
+import GatewayStack from './GatewayStack';
+import SmartStack from './SmartStack';
+import TemplateStack from './TemplateStack';
+import DrawerContainer from '../screens/Drawer';
+import { TESTID } from '../configs/Constants';
+import Text from '../commons/Text';
+
+const Tab = createBottomTabNavigator();
+const Drawer = createDrawerNavigator();
+
+const getWidth = () => {
+  const Width = Constants.width - 12;
+  return Width / 3;
+};
+
+const MainDevMode = () => {
+  const navigation = useNavigation();
+
+  const listTabName = useMemo(
+    () => [
+      {
+        name: Routes.TemplateStack,
+        tabBarLabel: t('templates'),
+        component: TemplateStack,
+      },
+      {
+        name: Routes.GatewayStack,
+        tabBarLabel: t('gateways'),
+        component: GatewayStack,
+      },
+      {
+        name: Routes.SmartStack,
+        tabBarLabel: t('smart'),
+        component: SmartStack,
+      },
+    ],
+    []
+  );
+
+  const tabOffSetValue = useRef(new Animated.Value(0)).current;
+
+  const Header = () => {
+    return (
+      <View style={styles.wrapHeader}>
+        <TouchableOpacity
+          style={styles.btnMenu}
+          onPress={() => navigation.toggleDrawer()}
+          testID={TESTID.BURGER_MENU_ICON}
+        >
+          <Image source={Images.menu} style={styles.menu} />
+        </TouchableOpacity>
+        <Text style={styles.textHeader}>{t('developer_mode')}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <>
+      <Header />
+      <Tab.Navigator tabBar={(props) => <Tabbar {...props} />}>
+        {listTabName.map((item) => (
+          <Tab.Screen
+            name={item.name}
+            component={item.component}
+            options={{
+              tabBarLabel: item.tabBarLabel,
+              tabOffSetValue,
+            }}
+          />
+        ))}
+      </Tab.Navigator>
+      <Animated.View
+        // eslint-disable-next-line react-native/no-inline-styles
+        style={{
+          width: getWidth() - 4,
+          transform: [{ translateX: tabOffSetValue }],
+          height: 2,
+          backgroundColor: Colors.Primary,
+          position: 'absolute',
+          bottom: 70,
+          left: 8,
+          borderRadius: 1,
+        }}
+      />
+    </>
+  );
+};
+
+const DevModeStack = () => {
+  return (
+    <Drawer.Navigator
+      backBehavior="none"
+      drawerContent={(props) => <DrawerContainer {...props} />}
+      drawerStyle={{ paddingTop: getStatusBarHeight() }}
+    >
+      <Drawer.Screen name={Routes.DrawerMain} component={MainDevMode} />
+    </Drawer.Navigator>
+  );
+};
+
+export default DevModeStack;
+
+const styles = StyleSheet.create({
+  btnMenu: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 10,
+  },
+  wrapHeader: {
+    height: 100,
+    paddingTop: getStatusBarHeight(),
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.Gray2,
+  },
+  textHeader: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: Colors.Gray9,
+  },
+  menu: {
+    width: 24,
+    height: 24,
+  },
+});

package/src/navigations/SmartStack.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import Routes from '../utils/Route';
+import { screenOptions } from './utils';
+import Smart from '../screens/Smart';
+
+const Stack = createStackNavigator();
+
+const SmartStack = memo(() => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name={Routes.Smart} component={Smart} />
+    </Stack.Navigator>
+  );
+});
+
+export default SmartStack;

package/src/navigations/TemplateStack.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import Routes from '../utils/Route';
+import { screenOptions } from './utils';
+import Template from '../screens/Template';
+
+const Stack = createStackNavigator();
+
+const TemplateStack = memo(() => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name={Routes.Template} component={Template} />
+    </Stack.Navigator>
+  );
+});
+
+export default TemplateStack;

package/src/navigations/UnitStack.js

@@ -93,7 +93,11 @@ export const UnitStack = memo((props) => {
       if (!id) {
         return;
       }
-      const { success, data } = await axiosGet(API.UNIT.FAVOURITE_DEVICES(id));
+      const { success, data } = await axiosGet(
+        API.UNIT.FAVOURITE_DEVICES(id),
+        {},
+        true
+      );
       success && setAction(Action.SET_FAVORITE_DEVICES, data);
     };
     fetchFavoriteDevices();
@@ -102,7 +106,11 @@ export const UnitStack = memo((props) => {
 
   useEffect(() => {
     const fetchStarredScripts = async () => {
-      const { success, data } = await axiosGet(API.AUTOMATE.STARRED_SCRIPTS());
+      const { success, data } = await axiosGet(
+        API.AUTOMATE.STARRED_SCRIPTS(),
+        {},
+        true
+      );
       success && setAction(Action.SET_STARRED_SCRIPTS, data);
     };
     fetchStarredScripts();

package/src/screens/AllCamera/__test__/index.test.js

@@ -4,7 +4,6 @@ import AllCamera from '..';
 import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { ModalFullVideo } from '../../../commons/Modal';
 import Carousel from 'react-native-snap-carousel';
 
 const arrCameras = [
@@ -90,13 +89,7 @@ describe('Test AllCamera screen', () => {
     });
     const instance = tree.root;
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(9);
-    const ModalFullVideos = instance.findAllByType(ModalFullVideo);
-    expect(ModalFullVideos).toHaveLength(1);
-    act(() => {
-      ModalFullVideos[0].props.onClose();
-    });
-    expect(mockSetState).toBeCalledWith(false);
+    expect(TouchableOpacities).toHaveLength(8);
     const Carousels = instance.findAllByType(Carousel);
     expect(Carousels).toHaveLength(1);
   });

package/src/screens/AllCamera/index.js

@@ -17,7 +17,6 @@ import { HeaderCustom } from '../../commons/Header';
 import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
 import { Constants, normalize } from '../../configs/Constants';
 import styles from './Styles/index';
-import { ModalFullVideo } from '../../commons/Modal';
 import Routes from '../../utils/Route';
 
 const AllCamera = () => {
@@ -32,12 +31,10 @@ const AllCamera = () => {
   const [activeCamera, setActiveCamera] = useState(data[0]);
   const [currentPage, setCurrentPage] = useState(1);
   const [isFullScreen, setIsFullScreen] = useState(false);
-  const [dataFullScreen, setDataFullScreen] = useState();
 
   const handleFullScreen = useCallback(
     (dataFullscreen) => {
       setIsFullScreen(!isFullScreen);
-      setDataFullScreen(dataFullscreen);
     },
     [isFullScreen]
   );
@@ -69,10 +66,6 @@ const AllCamera = () => {
     [data]
   );
 
-  const onClose = () => {
-    setIsFullScreen(false);
-  };
-
   const goToPlayBack = useCallback(
     (item, itemThumbnail) => () => {
       navigate(Routes.PlaybackCamera, { item, thumbnail: itemThumbnail });
@@ -249,12 +242,6 @@ const AllCamera = () => {
           {renderAmount}
         </View>
       </View>
-      <ModalFullVideo
-        isVisible={isFullScreen}
-        data={dataFullScreen}
-        modalStyles={styles.modal}
-        onClose={onClose}
-      />
     </>
   );
 };

package/src/screens/Device/hooks/__test__/useEmergencyButton.test.js

@@ -0,0 +1,37 @@
+import { renderHook } from '@testing-library/react-hooks';
+import MockAdapter from 'axios-mock-adapter';
+import { API } from '../../../../configs';
+import api from '../../../../utils/Apis/axios';
+import { useEmergencyButton } from '../useEmergencyButton';
+
+const mockFetchDataDeviceDetail = jest.fn();
+const mockAcquireLockShowing = jest.fn();
+
+const mock = new MockAdapter(api.axiosInstance);
+
+describe('Test useEmergencyButton', () => {
+  it('Test render', async () => {
+    const { result } = renderHook(() =>
+      useEmergencyButton(mockFetchDataDeviceDetail, mockAcquireLockShowing)
+    );
+    jest.useFakeTimers();
+    await result.current.onCancelConfirmAlert();
+    expect(result.current.showAlertConfirm).toBe(false);
+    jest.runAllTimers();
+    await result.current.onEmergencyButtonPress();
+    mock.onPost(API.EMERGENCY_BUTTON.SEND_ALERT()).reply(200);
+    await result.current.onSendNowAlert();
+    expect(result.current.showAlertConfirm).toBe(true);
+  });
+
+  it('Test send alert fail', async () => {
+    mock.onPost(API.EMERGENCY_BUTTON.SEND_ALERT()).reply(400);
+    const { result } = renderHook(() =>
+      useEmergencyButton(mockFetchDataDeviceDetail, mockAcquireLockShowing)
+    );
+    await result.current.onSendNowAlert();
+    await result.current.onCloseAlertSent();
+    await result.current.onViewDetails();
+    expect(result.current.showAlertConfirm).toBe(false);
+  });
+});

package/src/screens/Drawer/Drawer.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
+import { SCProvider } from '../../context';
+import { mockSCStore } from '../../context/mockStore';
+import Drawer from './index';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <Drawer navigation={jest.fn()} />
+  </SCProvider>
+);
+
+describe('Drawer', () => {
+  let tree;
+  test('drawer snapshot', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const safeView = instance.findAllByType(SafeAreaView);
+    expect(safeView).toHaveLength(1);
+  });
+});