@eohjsc/react-native-smart-city 0.3.26 → 0.3.29

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/AddNewAction/SelectAction.js

@@ -226,12 +226,15 @@ const SelectAction = memo(({ route }) => {
       case 'one_button_action_template':
       case 'three_button_action_template':
       case 'OnOffSimpleActionTemplate':
+      case 'curtain_action_template':
         index = newActions.findIndex((item) => {
           return (
             item.template === 'on_off_button_action_template' ||
             item.template === 'one_button_action_template' ||
             item.template === 'three_button_action_template' ||
-            item.template === 'OnOffSimpleActionTemplate'
+            item.template === 'OnOffSimpleActionTemplate' ||
+            item.template === 'curtain_action_template' ||
+            item.template === 'OnOffSmartLockActionTemplate'
           );
         });
         break;
@@ -423,6 +426,8 @@ const RenderActionItem = ({ data, onSelectAction }) => {
       case 'one_button_action_template':
       case 'three_button_action_template':
       case 'OnOffSimpleActionTemplate':
+      case 'curtain_action_template':
+      case 'OnOffSmartLockActionTemplate':
         actionTemplate.push(item);
         break;
       case 'OptionsDropdownActionTemplate':

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);
+  });
+});

package/src/screens/Drawer/index.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import {
+  View,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+  SafeAreaView,
+  StyleSheet,
+} from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Icon } from '@ant-design/react-native';
+import t from '../../hooks/Common/useTranslations';
+
+import { Images, Colors } from '../../configs';
+import Text from '../../commons/Text';
+import Routes from '../../utils/Route';
+import { TESTID } from '../../configs/Constants';
+import { useSCContextSelector } from '../../context';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+
+const DrawerContainer = ({ navigation }) => {
+  const user = useSCContextSelector((state) => state.auth.account.user);
+  const { dispatch } = useNavigation();
+  const doLogout = () => {
+    const resetAction = CommonActions.reset({
+      index: 0,
+      routes: [{ name: Routes.Main }],
+    });
+    dispatch(resetAction);
+  };
+
+  const goToHelp = () => {};
+
+  const goToAbloutUs = () => {};
+
+  return (
+    <SafeAreaView style={styles.wrap}>
+      <ScrollView contentContainerStyle={styles.scrollView}>
+        <View style={[styles.row, styles.logoWrap]}>
+          <Image
+            source={Images.logo}
+            style={styles.logo}
+            testID={TESTID.SIDE_MENU_LOGO}
+          />
+
+          <View style={styles.avatarBackground}>
+            {user.avatar ? (
+              <Image
+                source={{ uri: user.avatar }}
+                style={styles.avatar}
+                testID={TESTID.SIDE_MENU_AVATAR_USER}
+              />
+            ) : (
+              <View style={styles.avatar} testID={TESTID.SIDE_MENU_AVATAR_USER}>
+                <Icon name={'user'} size={27} />
+              </View>
+            )}
+            <View style={styles.textContainer}>
+              <Text
+                style={[styles.fullName]}
+                testID={TESTID.SIDE_MENU_USER_NAME}
+              >
+                {user?.name || ''}
+              </Text>
+              <Text style={[styles.email]} testID={TESTID.SIDE_MENU_USER_PHONE}>
+                {user ? user.phone_number : ''}
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.containerRow}>
+          <View>
+            <Row onPress={goToHelp} image={'global'} name={t('help')} />
+            <Row
+              onPress={goToAbloutUs}
+              image={'mail'}
+              name={t('about_us')}
+              testID={TESTID.SIDE_MENU_POLICY_ITEM}
+            />
+            <Row
+              onPress={doLogout}
+              image={'export'}
+              name={t('exit_dev_mode')}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export const Row = ({ name, onPress, image, borderBottom, testID }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        styles.row,
+        styles.optionWrap,
+        borderBottom && styles.borderBottom,
+      ]}
+      testID={testID}
+    >
+      <IconOutline name={image} size={24} />
+
+      <View style={styles.wrapText}>
+        <Text style={[styles.text]}>{name}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapText: {
+    flexDirection: 'row',
+    marginLeft: 20,
+  },
+  text: {
+    fontSize: 16,
+    color: Colors.Gray9,
+  },
+  wrap: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: Colors.White,
+  },
+  scrollView: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  borderBottom: {
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+  },
+  logoWrap: {
+    paddingTop: 32,
+    paddingLeft: 28,
+    paddingRight: 23,
+  },
+  optionWrap: {
+    paddingTop: 20,
+    paddingBottom: 20,
+    paddingRight: 32,
+  },
+  logo: {
+    width: 32,
+    height: 16,
+    position: 'absolute',
+    top: 10,
+    left: 30,
+  },
+
+  // header
+  avatarBackground: {
+    flexDirection: 'row',
+    flex: 1,
+    paddingVertical: 22,
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+  },
+  avatar: {
+    height: 50,
+    width: 50,
+    borderRadius: 25,
+    borderWidth: 0.5,
+    borderColor: Colors.Gray5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textContainer: {
+    marginLeft: 15,
+    justifyContent: 'flex-start',
+    flex: 1,
+  },
+  fullName: {
+    backgroundColor: Colors.TextTransparent,
+    fontSize: 16,
+    marginBottom: 6,
+    color: Colors.Black,
+    fontWeight: 'bold',
+  },
+  email: {
+    backgroundColor: Colors.TextTransparent,
+    fontSize: 14,
+    color: Colors.Gray8,
+  },
+  containerRow: {
+    paddingHorizontal: 28,
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default DrawerContainer;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import Gateway from '..';
+
+describe('Test Template screen', () => {
+  let tree;
+  it('Test render', async () => {
+    await act(async () => {
+      tree = await create(<Gateway />);
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(1);
+  });
+});

package/src/screens/Gateway/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { View } from 'react-native';
+
+const Gateway = () => {
+  return <View />;
+};
+
+export default Gateway;