@eohjsc/react-native-smart-city 0.2.61 → 0.2.62

package/src/navigations/UnitStack.js

@@ -43,6 +43,7 @@ import EditSubUnit from '../screens/SubUnit/EditSubUnit';
 import SetUpSensor from '../screens/AddNewAction/SetupSensor';
 import EditDevice from '../screens/Device/EditDevice/index';
 import EmergencySetting from '../screens/EmergencySetting';
+import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
 
 const Stack = createStackNavigator();
 
@@ -158,7 +159,7 @@ export const UnitStack = memo((props) => {
         component={DeviceDetail}
         options={{
           headerShown: false,
-          animationEnabled: false,
+          animationEnabled: Platform.OS === 'ios',
         }}
       />
       <Stack.Screen
@@ -172,7 +173,7 @@ export const UnitStack = memo((props) => {
         name={Route.TDSGuide}
         component={TDSGuide}
         options={{
-          title: t('tds_infomation'),
+          title: t('tds_information'),
         }}
       />
       <Stack.Screen
@@ -307,6 +308,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.ConfirmUnitDeletion}
+        component={ConfirmUnitDeletion}
+        options={{
+          headerShown: false,
+        }}
+      />
     </Stack.Navigator>
   );
 });

package/src/screens/ActivityLog/hooks/index.js

@@ -59,7 +59,7 @@ export default ({ id, type, share, filterEnabled }) => {
     if (page === 1) {
       setIsRefreshing(true);
     } else {
-      if (!isCanLoadMore) {
+      if (!isCanLoadMore || isLoading) {
         return;
       }
       setIsLoading(true);

package/src/screens/AddNewAction/SelectSensorDevices.js

@@ -55,7 +55,8 @@ const SelectSensorDevices = memo(({ route }) => {
       (response) => {
         const { success, data } = response;
         if (success) {
-          const listMenu = data.map((item, index) => ({
+          const newData = data.filter((item) => item.sensors.length > 0);
+          const listMenu = newData.map((item, index) => ({
             text: item.name,
             station: item,
             index: index,
@@ -63,7 +64,7 @@ const SelectSensorDevices = memo(({ route }) => {
           if (isSelectSensor) {
             if (automate.sensor_id) {
               let selectSensor = {};
-              data.map((item) => {
+              newData.map((item) => {
                 item.sensors.map((sensor) => {
                   if (sensor.id === automate.sensor_id) {
                     selectSensor = sensor;
@@ -76,9 +77,9 @@ const SelectSensorDevices = memo(({ route }) => {
               setSelectedDevice(selectSensor);
             }
           }
-          setStation(data);
+          setStation(newData);
           setListMenuItem(listMenu);
-          setListStation(listMenu.concat([{ text: '' }]));
+          setListStation(listMenu);
         }
       }
     );
@@ -174,13 +175,19 @@ const SelectSensorDevices = memo(({ route }) => {
           {t(title)}
         </Text>
 
-        <NavBar
-          listStation={listStation}
-          listMenuItem={listMenuItem}
-          onSnapToItem={onSnapToItem}
-          indexStation={indexStation}
-          style={styles.navbar}
-        />
+        {!!listStation.length > 0 ? (
+          <NavBar
+            listStation={listStation}
+            listMenuItem={listMenuItem}
+            onSnapToItem={onSnapToItem}
+            indexStation={indexStation}
+            style={styles.navbar}
+          />
+        ) : (
+          <View style={styles.noneData}>
+            <Text center>{t('text_sub_unit_not_have_device')}</Text>
+          </View>
+        )}
 
         <View style={styles.boxDevices}>
           {station[indexStation]?.sensors &&

package/src/screens/AddNewAction/Styles/SelectSensorDevicesStyles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
-import { Colors } from '../../../configs';
+import { Colors, Constants } from '../../../configs';
 
 export default StyleSheet.create({
   wrap: {
@@ -33,4 +33,8 @@ export default StyleSheet.create({
     borderColor: Colors.ShadownTransparent,
     borderTopWidth: 1,
   },
+  noneData: {
+    paddingHorizontal: 16,
+    marginTop: Constants.height * 0.3,
+  },
 });

package/src/screens/AddNewAction/__test__/SelectSensorDevices.test.js

@@ -175,8 +175,13 @@ describe('Test SelectSensorDevices', () => {
         ],
       },
     ];
+    const listMenu = data.map((item, index) => ({
+      text: item.name,
+      station: item,
+      index: index,
+    }));
     const mockSetIndexStation = jest.fn();
-    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [listMenu, mockSetState]);
     useState.mockImplementationOnce((init) => [init, mockSetState]);
     useState.mockImplementationOnce((init) => [init, mockSetIndexStation]);
     useState.mockImplementationOnce((init) => [data, mockSetState]);

package/src/screens/Automate/MultiUnits.js

@@ -26,8 +26,11 @@ const MultiUnits = () => {
   const { params = {} } = useRoute();
   const { isMultiUnits = false, unitName = '', unit, isOwner } = params;
   const [data, setData] = useState([]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const tabName = useMemo(() => [t('smart'), t('automation')], []);
+  const tabName = useMemo(
+    () => [t(AUTOMATE_TYPE.SCENARIO), t(AUTOMATE_TYPE.AUTOMATION)],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   const [tabActive, setTabActive] = useState(tabName[0]);
 
   const getData = useCallback(
@@ -72,7 +75,7 @@ const MultiUnits = () => {
       screen: Routes.AddNewAutoSmart,
       params: {
         type:
-          tabActive === t('smart')
+          tabActive === t(AUTOMATE_TYPE.SCENARIO)
             ? AUTOMATE_TYPE.ONE_TAP_ONLY
             : AUTOMATE_TYPE.VALUE_CHANGE,
         unit: { id: unit?.id },
@@ -109,7 +112,7 @@ const MultiUnits = () => {
 
   const renderContent = useMemo(() => {
     const listItems = data.filter((item) =>
-      tabActive === t('smart')
+      tabActive === t(AUTOMATE_TYPE.SCENARIO)
         ? item?.type === AUTOMATE_TYPE.ONE_TAP
         : item?.type !== AUTOMATE_TYPE.ONE_TAP
     );

package/src/screens/Automate/__test__/MultiUnits.test.js

@@ -201,7 +201,7 @@ describe('Test MultiUnits', () => {
     });
     useState.mockImplementationOnce(() => [response.data, mockSetState]);
     useState.mockImplementationOnce(() => [
-      getTranslate('en', 'smart'),
+      getTranslate('en', 'Scenario'),
       mockSetState,
     ]);
     await act(() => {

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

@@ -70,6 +70,18 @@ describe('Test Automate', () => {
                 icon_kit: undefined,
               },
             },
+            {
+              id: 2,
+              user: 2,
+              type: 'one_tap',
+              activate_at: '2021-09-17T05:30:00Z',
+              script: {
+                id: 1,
+                name: 'script2',
+                icon: undefined,
+                icon_kit: undefined,
+              },
+            },
           ],
         },
       ],

package/src/screens/ConfirmUnitDeletion/__test__/ConfirmUnitDeletion.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import axios from 'axios';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import ConfirmUnitDeletion from '../index';
+import _TextInput from '../../../commons/Form/TextInput';
+
+const wrapComponent = (route, navigation) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConfirmUnitDeletion route={route} />
+  </SCProvider>
+);
+
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('axios');
+describe('Test ConfirmUnitDeletion', () => {
+  let tree;
+  let route;
+
+  beforeAll(() => {
+    axios.get.mockClear();
+    route = {
+      params: {
+        unit: {
+          id: 10,
+        },
+      },
+    };
+  });
+
+  test('test render ConfirmUnitDeletion', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('new_name');
+    });
+  });
+});

package/src/screens/ConfirmUnitDeletion/index.js

@@ -0,0 +1,64 @@
+import React, { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './styles';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import Text from '../../commons/Text';
+import { API, Colors } from '../../configs';
+import _TextInput from '../../commons/Form/TextInput';
+import { Button } from '../../commons';
+import Routes from '../../utils/Route';
+import { axiosDelete } from '../../utils/Apis/axios';
+import { ToastBottomHelper } from '../../utils/Utils';
+
+const ConfirmUnitDeletion = ({ route }) => {
+  const t = useTranslations();
+  const { unit } = route.params;
+  const navigation = useNavigation();
+  const [confirm, setConfrim] = useState('');
+  const [errorText, setErrorText] = useState();
+
+  const onChangePassword = useCallback((value) => {
+    setConfrim(value);
+  }, []);
+
+  const onSendPress = useCallback(async () => {
+    if (confirm === 'YES') {
+      const { success } = await axiosDelete(API.UNIT.MANAGE_UNIT(unit.id));
+      if (success) {
+        navigation.navigate(Routes.Dashboard);
+        ToastBottomHelper.success(t('unit_deleted_successfully'));
+      }
+    } else {
+      setErrorText(t('please_enter_correct'));
+    }
+  }, [confirm, navigation, t, unit.id]);
+
+  return (
+    <WrapHeaderScrollable
+      styleScrollView={styles.scrollView}
+      headerAniStyle={styles.headerAniStyle}
+    >
+      <Text semibold style={styles.txtForgot}>
+        {t('confirmation')}
+      </Text>
+      <Text type="H4" color={Colors.Gray9} style={styles.txtForgotHint}>
+        {t('enter_yes_to_perform')}
+      </Text>
+      <_TextInput
+        placeholder={t('text_password')}
+        onChange={onChangePassword}
+        errorText={errorText}
+        wrapStyle={styles.noMarginTop}
+        textInputStyle={styles.textInput}
+      />
+      <View style={styles.buttonWrap}>
+        <Button type="auth" title={t('done')} onPress={onSendPress} />
+      </View>
+    </WrapHeaderScrollable>
+  );
+};
+
+export default ConfirmUnitDeletion;

package/src/screens/ConfirmUnitDeletion/styles.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  scrollView: {
+    backgroundColor: Colors.White,
+  },
+  headerAniStyle: { borderBottomWidth: 0 },
+  txtForgot: {
+    color: Colors.Black,
+    fontSize: 24,
+    marginLeft: 16,
+    marginTop: 0,
+    fontWeight: 'bold',
+  },
+  txtForgotHint: {
+    marginLeft: 16,
+    marginTop: 30,
+  },
+  noMarginTop: {
+    margin: 16,
+    backgroundColor: Colors.White,
+  },
+  textInput: {
+    marginTop: 0,
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray4,
+    paddingLeft: 0,
+    backgroundColor: Colors.White,
+  },
+  buttonWrap: {
+    flexDirection: 'row',
+    marginTop: 24,
+    marginHorizontal: 16,
+  },
+});

package/src/screens/EmergencySetting/index.js

@@ -8,6 +8,7 @@ import DropDownItem from './components/DropDownItem';
 import _TextInput from '../../commons/Form/TextInput';
 
 import styles from './styles';
+import Text from '../../commons/Text';
 
 const EmergencySetting = () => {
   const t = useTranslations();
@@ -74,6 +75,7 @@ const EmergencySetting = () => {
           />
         ))}
 
+        <Text style={styles.duration}>{t('duration')}</Text>
         <_TextInput
           wrapStyle={styles.wrapInput}
           textInputStyle={styles.textInputStyle}

package/src/screens/EmergencySetting/styles.js

@@ -11,9 +11,15 @@ export default StyleSheet.create({
   },
   wrapInput: {
     paddingHorizontal: 16,
+    marginTop: 0,
   },
   textInputStyle: {
-    paddingTop: 8,
-    paddingBottom: 8,
+    paddingTop: 7,
+    paddingBottom: 7,
+  },
+  duration: {
+    marginTop: 14,
+    marginBottom: 10,
+    marginLeft: 16,
   },
 });

package/src/screens/ScriptDetail/index.js

@@ -492,6 +492,7 @@ const ScriptDetail = ({ route }) => {
             onChange={(text) => setInputName(text)}
             defaultValue={scriptName}
             textInputStyle={styles.textInput}
+            maxLength={64}
           />
         )}
       </AlertAction>

package/src/screens/SubUnit/EditSubUnit.js

@@ -233,7 +233,14 @@ const EditSubUnit = ({ route }) => {
             onPress={onPressRemove}
             style={styles.removeButton}
           >
-            <Text style={styles.removeText}>{t('remove_sub_unit')}</Text>
+            <Text
+              type={'H4'}
+              semibold
+              color={Colors.Red}
+              style={styles.removeText}
+            >
+              {t('remove_sub_unit')}
+            </Text>
           </TouchableOpacity>
         </View>
       </View>

package/src/screens/SubUnit/EditSubUnitStyles.js

@@ -46,9 +46,8 @@ export default StyleSheet.create({
     paddingBottom: 16 + getBottomSpace(),
   },
   removeText: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray6,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Red,
   },
   backgroundContainer: {
     alignItems: 'center',

package/src/screens/TDSGuide/index.js

@@ -9,7 +9,7 @@ import useTitleHeader from '../../hooks/Common/useTitleHeader';
 
 const TDSGuide = memo(() => {
   const t = useTranslations();
-  useTitleHeader(t('tds_infomation'));
+  useTitleHeader(t('tds_information'));
 
   return (
     <View style={styles.container}>

package/src/screens/Unit/Detail.js

@@ -39,7 +39,7 @@ const UnitDetail = ({ route }) => {
   const [appState, setAppState] = useState(AppState.currentState);
   const [listMenuItem, setListMenuItem] = useState([]);
   const [listStation, setListStation] = useState([]);
-  const [oneTap, setOneTap] = useState([]);
+  const [listAutomate, setListAutomate] = useState([]);
   const [favorites, setFavorites] = useState({
     devices: [],
     automates: [],
@@ -106,12 +106,23 @@ const UnitDetail = ({ route }) => {
     await fetchWithCache(
       API.UNIT.AUTOMATE(unitId),
       {
-        params: { type: AUTOMATE_TYPE.ONE_TAP },
+        params: { type: AUTOMATE_TYPE.ALL },
       },
       (response) => {
         const { success, data } = response;
         if (success) {
-          setOneTap([...data]);
+          setListAutomate([
+            {
+              text: t(AUTOMATE_TYPE.SCENARIO),
+              data: data.filter((item) => item.type === AUTOMATE_TYPE.ONE_TAP),
+              type: AUTOMATE_TYPE.ONE_TAP,
+            },
+            {
+              text: t(AUTOMATE_TYPE.AUTOMATION),
+              data: data.filter((item) => item.type !== AUTOMATE_TYPE.ONE_TAP),
+              type: AUTOMATE_TYPE.AUTOMATION,
+            },
+          ]);
           setFavorites((prevData) => ({
             ...prevData,
             automates: data.filter((item) => item.script.is_star),
@@ -119,7 +130,7 @@ const UnitDetail = ({ route }) => {
         }
       }
     );
-  }, [unitId]);
+  }, [t, unitId]);
 
   const onRefresh = useCallback(() => {
     fetchDetails();
@@ -264,8 +275,7 @@ const UnitDetail = ({ route }) => {
       return (
         <SubUnitAutomate
           isOwner={isOwner}
-          type={AUTOMATE_TYPE.ONE_TAP}
-          automates={oneTap}
+          listAutomate={listAutomate}
           unit={unit}
           wrapItemStyle={styles.wrapItemStyle}
         />

package/src/screens/Unit/ManageUnit.js

@@ -6,11 +6,7 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors, API, Images } from '../../configs';
 import Routes from '../../utils/Route';
 import { ToastBottomHelper } from '../../utils/Utils';
-import {
-  createFormData,
-  axiosPatch,
-  axiosDelete,
-} from '../../utils/Apis/axios';
+import { createFormData, axiosPatch } from '../../utils/Apis/axios';
 import useBoolean from '../../hooks/Common/useBoolean';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 
@@ -128,13 +124,14 @@ const ManageUnit = ({ route }) => {
 
   const [showRemove, setshowRemove, setHideRemove] = useBoolean();
   const goRemove = useCallback(async () => {
-    const { success } = await axiosDelete(API.UNIT.MANAGE_UNIT(unit.id));
-    if (success) {
-      setHideRemove(true);
-      ToastBottomHelper.success(t('unit_deleted_successfully'));
-      navigation.navigate(Routes.Dashboard);
-    }
-  }, [unit.id, setHideRemove, t, navigation]);
+    navigation.navigate(Routes.UnitStack, {
+      screen: Routes.ConfirmUnitDeletion,
+      params: {
+        unit,
+      },
+    });
+    setHideRemove(true);
+  }, [setHideRemove, navigation, unit]);
 
   const goToManageSubUnit = useCallback(() => {
     navigation.navigate(Routes.UnitStack, {

package/src/screens/Unit/SmartAccount.js

@@ -7,17 +7,16 @@ import React, {
   useState,
   memo,
 } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import styles from './SmartAccountStyles';
 import { API, Colors } from '../../configs';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { axiosDelete, axiosGet } from '../../utils/Apis/axios';
 import { SmartAccountItem } from './SmartAccountItem';
-import { usePopover, useBoolean } from '../../hooks/Common';
-import { AlertAction, MenuActionMore } from '../../commons';
+import { usePopover } from '../../hooks/Common';
+import { MenuActionMore } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
 
 const ListSmartAccount = ({ route }) => {
   const { unitId } = route?.params || {};
@@ -38,10 +37,6 @@ const ListSmartAccount = ({ route }) => {
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
 
-  const [lockShowing, acquireLockShowing, releaseLockShowing] = useBoolean();
-  const { stateAlertRemove, onShowRemoveAlert, hideAlertAction } =
-    useStateAlertRemove();
-
   useEffect(() => {
     getAllSmartAccounts();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -55,21 +50,7 @@ const ListSmartAccount = ({ route }) => {
     [showPopoverWithRef]
   );
 
-  const onItemClick = useCallback(
-    (item) => {
-      if (!smartAccountRef?.current) {
-        return;
-      }
-      if (item.action === 'delete') {
-        acquireLockShowing();
-        onShowRemoveAlert(smartAccountRef.current.brand)();
-      }
-    },
-    [acquireLockShowing, onShowRemoveAlert]
-  );
-
   const deleteSmartAccount = useCallback(async () => {
-    hideAlertAction();
     if (!smartAccountRef?.current) {
       return;
     }
@@ -78,10 +59,22 @@ const ListSmartAccount = ({ route }) => {
       API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
     );
     success && getAllSmartAccounts();
-  }, [hideAlertAction, getAllSmartAccounts]);
+  }, [getAllSmartAccounts]);
+
+  const onItemClick = useCallback(
+    (item) => {
+      if (!smartAccountRef?.current) {
+        return;
+      }
+      if (item.action === 'remove') {
+        deleteSmartAccount();
+      }
+    },
+    [deleteSmartAccount]
+  );
 
   const listMenuItem = useMemo(() => {
-    return [{ action: 'delete', text: t('delete') }];
+    return [{ action: 'remove', text: t('remove_account') }];
   }, [t]);
 
   const gotoSmartAccountDetail = useCallback(
@@ -104,33 +97,24 @@ const ListSmartAccount = ({ route }) => {
         headerAniStyle={styles.headerAniStyle}
       >
         <View style={styles.wrapContent}>
-          {data.map((item) => {
+          {data.map((item, index) => {
             return (
-              <SmartAccountItem
-                gotoSmartAccountDetail={gotoSmartAccountDetail}
-                item={item}
-                onShowMenuMore={onShowMenuMore}
-              />
+              <TouchableOpacity key={index}>
+                <SmartAccountItem
+                  gotoSmartAccountDetail={gotoSmartAccountDetail}
+                  item={item}
+                  onShowMenuMore={onShowMenuMore}
+                />
+              </TouchableOpacity>
             );
           })}
         </View>
-        <AlertAction
-          visible={stateAlertRemove.visible && !lockShowing}
-          hideModal={hideAlertAction}
-          title={stateAlertRemove.title}
-          message={stateAlertRemove.message}
-          leftButtonTitle={stateAlertRemove.leftButton}
-          leftButtonClick={hideAlertAction}
-          rightButtonTitle={stateAlertRemove.rightButton}
-          rightButtonClick={deleteSmartAccount}
-        />
         <MenuActionMore
           isVisible={showingPopover}
           hideMore={hidePopover}
           listMenuItem={listMenuItem}
           childRef={childRef}
           onItemClick={onItemClick}
-          hideComplete={releaseLockShowing}
         />
       </WrapHeaderScrollable>
     </View>

package/src/screens/Unit/SmartAccountItem.js

@@ -23,6 +23,7 @@ export const SmartAccountItem = memo(
         <TouchableOpacity
           style={styles.wrapText}
           onPress={onPressGotoSmartAccountDetail}
+          testID={TESTID.SMART_ACCOUNT_ITEM}
         >
           <FImage
             source={{ uri: item?.logo }}
@@ -39,7 +40,7 @@ export const SmartAccountItem = memo(
           </View>
         </TouchableOpacity>
         <TouchableOpacity
-          testID={TESTID.ITEM_QUICK_ACTION_PRESS}
+          testID={TESTID.SMART_ACCOUNT_ITEM_PRESSMORE}
           onPress={onPressMore}
           ref={buttonMoreRef}
         >