@eohjsc/react-native-smart-city 0.4.0 → 0.4.2

package/src/commons/Device/PMSensor/PMSensorIndicatorStyles.js

@@ -6,6 +6,9 @@ export default StyleSheet.create({
     paddingHorizontal: 16,
     marginBottom: 10,
   },
+  marginBottomZero: {
+    marginBottom: 0,
+  },
   centerItem: {
     flex: 1,
     justifyContent: 'center',

package/src/commons/Device/ProgressBar/__test__/ProgressBar.test.js

@@ -6,11 +6,6 @@ import Text from '../../../Text';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-}));
-
 const wrapComponent = (item, data) => (
   <SCProvider initState={mockSCStore({})}>
     <ProgressBar item={item} data={data} />

package/src/commons/Device/ProgressBar/index.js

@@ -7,7 +7,7 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Text from '../../Text';
 import styles from './styles';
 
-const ProgressBar = memo(({ data = [], item }) => {
+const ProgressBar = memo(({ data = [], item, isWidgetOrder }) => {
   const t = useTranslations();
 
   const maxValue = useMemo(() => {
@@ -17,7 +17,7 @@ const ProgressBar = memo(({ data = [], item }) => {
   const percent = value / maxValue; // a number between 0 and 1
   const isNotValue = ['', null, undefined, NaN].includes(value);
   return (
-    <View style={styles.container}>
+    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.container}>
       <Text size={16} style={styles.textLabel}>
         {item?.label || 'Label'}
       </Text>

package/src/commons/Device/ProgressBar/styles.js

@@ -13,6 +13,11 @@ export default StyleSheet.create({
     borderColor: Colors.Gray4,
     marginBottom: 12,
   },
+  wrapOrderItem: {
+    flex: 1,
+    padding: 16,
+    flexDirection: 'column',
+  },
   textLabel: {
     marginLeft: 8,
     paddingTop: 8,

package/src/commons/Device/RainningSensor/CurrentRainSensor.js

@@ -9,7 +9,7 @@ import IconComponent from '../../IconComponent';
 import images from '../../../configs/Images';
 import FImage from '../../FImage';
 
-const CurrentRainSensor = memo(({ data = [] }) => {
+const CurrentRainSensor = memo(({ data = [], isWidgetOrder }) => {
   const item = data.length
     ? data[0]
     : {
@@ -19,7 +19,7 @@ const CurrentRainSensor = memo(({ data = [] }) => {
     item.evaluate || {};
 
   return (
-    <View style={styles.standard}>
+    <View style={[styles.standard, isWidgetOrder && styles.marginBottomZero]}>
       <CircleView
         size={190}
         backgroundColor={backgroundColor}
@@ -55,6 +55,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: 16,
   },
+  marginBottomZero: {
+    marginBottom: 0,
+  },
   flatlistContent: {
     paddingHorizontal: 16,
   },

package/src/commons/Device/WindDirection/Compass/index.js

@@ -46,7 +46,12 @@ const Compass = memo(({ data = [], ...props }) => {
   }, [currentRotation, value]);
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[
+        styles.container,
+        props?.isWidgetOrder && styles.marginBottomZero,
+      ]}
+    >
       <View style={styles.boxCompass}>
         <Svg
           width={280}
@@ -570,6 +575,9 @@ const styles = StyleSheet.create({
     bottom: 50,
     alignItems: 'center',
   },
+  marginBottomZero: {
+    marginBottom: 0,
+  },
   txtTime: {
     fontSize: 12,
     color: Colors.Gray8,

package/src/commons/Device/WindSpeed/Anemometer/index.js

@@ -33,7 +33,7 @@ const Anemometer = memo(
       return Number(item?.configuration?.max_value) || 60;
     }, [item?.configuration?.max_value]);
 
-    const value = data.length ? data[0].value : 0;
+    const value = data.length && data[0]?.value ? data[0].value : 0;
     const measure = data.length ? data[0].unit || data[0].measure : 'm/s';
 
     const radius = (size - strokeWidth) / 2;
@@ -129,9 +129,6 @@ const Anemometer = memo(
     const handleShowToolTip = (value) => () => setIsShowToolTip(value);
 
     const valueSize = useMemo(() => {
-      if ([null, undefined, NaN].includes(value)) {
-        return [];
-      }
       if (value.toString().length < 4) {
         return [56, 16];
       }

package/src/commons/FlatListDnD/index.js

@@ -1,37 +1,39 @@
-import React from 'react';
+import React, { memo } from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 
 import styles from './styles';
 
-const FlatListDnD = ({
-  renderItem,
-  data,
-  setData,
-  onDragEnd,
-  key,
-  containerStyle,
-  showsVerticalScrollIndicator = false,
-  ...props
-}) => {
-  const handleOnDragEnd = ({ data: dragData }) => {
-    setData && setData(dragData);
-  };
+const FlatListDnD = memo(
+  ({
+    renderItem,
+    data,
+    setData,
+    onDragEnd,
+    key,
+    containerStyle,
+    showsVerticalScrollIndicator = false,
+    ...props
+  }) => {
+    const handleOnDragEnd = ({ data: dragData }) => {
+      setData && setData(dragData);
+    };
 
-  const keyExtractor = (item) => {
-    return `draggable-item-${item?.id}`;
-  };
+    const keyExtractor = (item) => {
+      return `draggable-item-${item?.id}`;
+    };
 
-  return (
-    <DraggableFlatList
-      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-      data={data}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
-      onDragEnd={onDragEnd || handleOnDragEnd}
-      containerStyle={styles.containerStyle}
-      {...props}
-    />
-  );
-};
+    return (
+      <DraggableFlatList
+        showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        onDragEnd={onDragEnd || handleOnDragEnd}
+        containerStyle={styles.containerStyle}
+        {...props}
+      />
+    );
+  }
+);
 
 export default FlatListDnD;

package/src/commons/Form/TextInputPassword.js

@@ -31,6 +31,7 @@ const _TextInputPassword = ({
   autoFocus,
   multiline,
   accessibilityLabel,
+  setRef,
 }) => {
   const errorStyle = !!errorText && styles.errorWrap;
 
@@ -65,6 +66,7 @@ const _TextInputPassword = ({
           editable={editable}
           keyboardType={keyboardType}
           multiline={multiline}
+          ref={setRef}
           {...(value ? { value } : {})}
         />
 

package/src/commons/SelectActionCard/index.js

@@ -13,7 +13,7 @@ const SelectActionCard = memo(({ title, action, onPress }) => {
       <TouchableOpacity onPress={onPress}>
         <View style={styles.wrapcontent}>
           <View>
-            <Text type="Body" color={Colors.Gray7}>
+            <Text type="Body" color={Colors.Gray7} ucfirst>
               {title}
             </Text>
             <Text bold type="H4" style={styles.mt4}>

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -27,13 +27,6 @@ const wrapComponent = (data, storeData = {}) => (
   </SCProvider>
 );
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useSelector: () => 'vi',
-  };
-});
-
 let tree;
 let data;
 

package/src/commons/Text/index.js

@@ -34,7 +34,7 @@ export default ({
   color = '#000',
   size,
   style: _style,
-  hilight,
+  highlight,
   ucfirst,
   uppercase,
   lowercase,
@@ -145,7 +145,7 @@ export default ({
       style={[
         {
           fontFamily: FONT_PREFIX + '-' + fontStyle,
-          color: hilight ? Colors.Primary : color,
+          color: highlight ? Colors.Primary : color,
           fontSize: textSize,
           lineHeight: lineHeight,
           textAlign: textAlign,

package/src/context/mockStore.ts

@@ -73,7 +73,10 @@ export const mockSCStore = (data: ContextData): ContextData => {
     auth: {
       account: {
         ...mockDataStore.auth.account,
-        ...data.auth?.account,
+        user: {
+          ...mockDataStore.auth.account.user,
+          ...data.auth?.account?.user,
+        },
       },
     },
     language: data.language ? data.language : mockDataStore.language,
@@ -94,6 +97,8 @@ export const mockSCStore = (data: ContextData): ContextData => {
       isNetworkConnected: true,
       isLockWhenPickColor: false,
       appState: 'active',
+      isNeedUpdateCache: false,
+      isDeleteUnitSuccessFully: false,
       ...data.app,
     },
     myUnits: [...mockDataStore.myUnits, ...(data?.myUnits || [])],

package/src/hooks/index.js

@@ -1,3 +1,4 @@
+import usePrevious from './usePrevious';
 import useReceiveNotifications from './useReceiveNotifications';
 
-export { useReceiveNotifications };
+export { useReceiveNotifications, usePrevious };

package/src/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+export default (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};

package/src/navigations/AddGatewayStack.js

@@ -19,7 +19,6 @@ import ShareWifiPassword from '../screens/AddNewGateway/ShareWifiPassword';
 import ScanGatewayQR from '../screens/AddNewGateway/ScanGatewayQR';
 import RenameNewDevices from '../screens/AddNewGateway/RenameNewDevices';
 import ConnectingWifiGuide from '../screens/AddNewGateway/ConnectingWifiGuide';
-import ConnectRouterGuide from '../screens/AddNewGateway/PlugAndPlay/ConnectRouterGuide';
 import ZigbeeDeviceConnectGuide from '../screens/AddNewGateway/PlugAndPlay/ZigbeeDeviceConnectGuide';
 
 const Stack = createStackNavigator();
@@ -84,10 +83,6 @@ export const AddGatewayStack = memo(() => {
         name={Route.ConnectingWifiGuide}
         component={ConnectingWifiGuide}
       />
-      <Stack.Screen
-        name={Route.ConnectRouterGuide}
-        component={ConnectRouterGuide}
-      />
       <Stack.Screen
         name={Route.ZigbeeDeviceConnectGuide}
         component={ZigbeeDeviceConnectGuide}

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

@@ -12,11 +12,6 @@ const wrapComponent = () => (
   </SCProvider>
 );
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-}));
-
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.fn(),

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

@@ -15,15 +15,6 @@ import Modal from 'react-native-modal';
 import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
 
-const mockUseSelector = jest.fn();
-
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useDispatch: jest.fn(),
-    useSelector: () => mockUseSelector,
-  };
-});
 jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -122,7 +122,7 @@ const SelectDeviceType = ({ route }) => {
         id: 'zigbee',
         image: <AddZigbeeDeviceIcon width={60} height={60} />,
         route: subUnit?.id
-          ? Routes.ConnectRouterGuide
+          ? Routes.SelectZigbeeGateway
           : Routes.SelectDeviceSubUnit,
         data: {
           unit,

package/src/screens/Automate/AddNewAction/ChooseAction.js

@@ -12,6 +12,7 @@ import { API } from '../../../configs';
 import Routes from '../../../utils/Route';
 import NewActionWrapper from './NewActionWrapper';
 import moment from 'moment';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
 const RenderActionItem = ({ device, item, handleOnSelectAction }) => {
   switch (item.template) {
@@ -63,7 +64,13 @@ const RenderActionItem = ({ device, item, handleOnSelectAction }) => {
 const ChooseAction = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const { unitId, device, automateId, index = -1 } = route?.params || {};
+  const {
+    unitId,
+    device,
+    automateId,
+    index = -1,
+    numberActionCanAdd,
+  } = route?.params || {};
   const [data, setData] = useState([]);
   const [actions, setActions] = useState([]);
 
@@ -78,6 +85,16 @@ const ChooseAction = ({ route }) => {
   }, [device.id]);
 
   const onSave = useCallback(async () => {
+    if (actions.length > numberActionCanAdd) {
+      ToastBottomHelper.error(
+        `${t('you_can_only_add_more', { number: numberActionCanAdd })} ${t(
+          numberActionCanAdd > 1 ? 'actions' : 'action'
+        )}`,
+        null,
+        3000
+      );
+      return;
+    }
     let list_action = [...actions];
     list_action = list_action.map((item) => ({
       action: item.action,
@@ -97,7 +114,7 @@ const ChooseAction = ({ route }) => {
         merge: true,
         params: { saveAt: moment().valueOf() },
       });
-  }, [actions, navigate, unitId, automateId]);
+  }, [actions, numberActionCanAdd, automateId, unitId, navigate, t]);
 
   const handleOnSelectAction = (action) => {
     let newActions = [...actions];

package/src/screens/Automate/AddNewAction/Components/SelectDevices.js

@@ -57,14 +57,14 @@ const SelectDevices = ({
 
       <View style={styles.boxDevices}>
         {stations[indexStation]?.sensors &&
-          stations[indexStation].sensors.map((sensor) => (
+          stations[indexStation].sensors.map((sensor, index) => (
             <Device
               svgMain={sensor.icon || 'sensor'}
               title={sensor.name}
               sensor={sensor}
               isSelectDevice={selectedDevice && selectedDevice.id === sensor.id}
               onPress={onPressDevice}
-              key={sensor.id}
+              key={(sensor.id + index).toString()}
             />
           ))}
       </View>

package/src/screens/Automate/AddNewAction/NewActionWrapper.js

@@ -8,6 +8,7 @@ import { Colors } from '../../../configs';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import BottomButtonView from '../../../commons/BottomButtonView';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import { KeyboardAwareScrollView } from '@eohjsc/react-native-keyboard-aware-scroll-view';
 
 const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
   const { navigate } = useNavigation();
@@ -33,13 +34,16 @@ const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
 
   return (
     <View style={styles.wrap}>
-      <WrapHeaderScrollable
-        title={name}
-        headerAniStyle={styles.headerAniStyle}
-        rightComponent={rightComponent}
-      >
-        {children}
-      </WrapHeaderScrollable>
+      <KeyboardAwareScrollView enableOnAndroid extraScrollHeight={100}>
+        <WrapHeaderScrollable
+          title={name}
+          headerAniStyle={styles.headerAniStyle}
+          rightComponent={rightComponent}
+        >
+          {children}
+        </WrapHeaderScrollable>
+      </KeyboardAwareScrollView>
+
       <BottomButtonView
         style={styles.bottomButtonView}
         mainTitle={nextTitle}

package/src/screens/Automate/AddNewAction/SelectControlDevices.js

@@ -8,7 +8,8 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 const SelectControlDevices = ({ route }) => {
   const t = useTranslations();
-  const { unitId, closeScreen, automateId } = route?.params || {};
+  const { unitId, closeScreen, automateId, numberActionCanAdd } =
+    route?.params || {};
 
   const [stations, setStations] = useState([]);
   const [listStation, setListStation] = useState([]);
@@ -46,9 +47,10 @@ const SelectControlDevices = ({ route }) => {
         automateId,
         device: selectedDevice,
         closeScreen,
+        numberActionCanAdd,
       });
     },
-    [navigate, unitId, automateId, closeScreen]
+    [navigate, unitId, automateId, closeScreen, numberActionCanAdd]
   );
 
   if (loading) {

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

@@ -15,13 +15,6 @@ const wrapComponent = (route) => (
   </SCProvider>
 );
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useSelector: () => 'vi',
-  };
-});
-
 describe('test AddNewAutoSmart', () => {
   let tree;
   let route = {

package/src/screens/Automate/EditActionsList/index.js

@@ -154,7 +154,7 @@ const EditActionsList = memo(() => {
           onPress={onCancel}
           accessibilityLabel={AccessibilityLabel.BUTTON_CANCEL_EDIT_ACTION_LIST}
         >
-          <Text type="H4" hilight semibold>
+          <Text type="H4" highlight semibold>
             {t('cancel')}
           </Text>
         </TouchableOpacity>
@@ -162,7 +162,7 @@ const EditActionsList = memo(() => {
           onPress={onPressSave}
           accessibilityLabel={AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST}
         >
-          <Text type="H4" hilight semibold>
+          <Text type="H4" highlight semibold>
             {t('save')}
           </Text>
         </TouchableOpacity>

package/src/screens/Automate/OneTap/__test__/AddNewOneTap.test.js

@@ -22,13 +22,6 @@ const wrapComponent = (route) => {
 };
 const mock = new MockAdapter(api.axiosInstance);
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useSelector: () => 'vi',
-  };
-});
-
 let tree;
 
 describe('test OneTap', () => {

package/src/screens/Automate/Scenario/__test__/AddNewOneTap.test.js

@@ -22,13 +22,6 @@ const wrapComponent = (route) => {
 };
 const mock = new MockAdapter(api.axiosInstance);
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useSelector: () => 'vi',
-  };
-});
-
 let tree;
 
 describe('test OneTap', () => {

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

@@ -221,9 +221,24 @@ describe('Test ScriptDetail', () => {
   });
 
   it('test press add action', async () => {
+    data = [
+      {
+        id: 1,
+        unit: 1,
+      },
+    ];
     mock.onGet(API.AUTOMATE.SCRIPT(1)).reply(200, data);
+    const auth = {
+      account: {
+        user: {
+          permissions: {
+            max_actions_per_automation: 2,
+          },
+        },
+      },
+    };
     await act(async () => {
-      tree = await create(wrapComponent(route));
+      tree = await create(wrapComponent(route, { auth }));
     });
     const instance = tree.root;
     const button = instance.find(
@@ -238,6 +253,7 @@ describe('Test ScriptDetail', () => {
     expect(mockNavigate).toHaveBeenCalledWith(Routes.SelectControlDevices, {
       unitId: route.params.preAutomate.unit,
       automateId: route.params.preAutomate.id,
+      numberActionCanAdd: 2,
     });
   });
 

package/src/screens/Automate/ScriptDetail/index.js

@@ -208,7 +208,7 @@ const ScriptDetail = ({ route }) => {
                   AccessibilityLabel.BUTTON_EDIT_SCRIPT_ACTION
                 }
               >
-                <Text type="Label" hilight>
+                <Text type="Label" highlight>
                   {t('edit')}
                 </Text>
               </TouchableOpacity>
@@ -218,7 +218,7 @@ const ScriptDetail = ({ route }) => {
             <Item key={item?.id} item={item} index={index} />
           ))}
           {!!automate?.can_edit && (
-            <ItemAdd automate={automate} index={data.length} />
+            <ItemAdd automate={automate} numberActionAdded={data.length} />
           )}
         </View>
       </WrapHeaderScrollable>
@@ -294,14 +294,14 @@ const Item = ({ item, index }) => {
   );
 };
 
-const ItemAdd = ({ automate, index }) => {
+const ItemAdd = ({ automate, numberActionAdded }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const permissions = useBackendPermission();
   const { name: currentScreenName } = useRoute();
 
   const onPressAddAction = useCallback(() => {
-    if (permissions?.max_actions_per_automation <= index) {
+    if (numberActionAdded >= permissions?.max_actions_per_automation) {
       ToastBottomHelper.error(
         t('reach_max_actions_per_automation', {
           length: permissions?.max_actions_per_automation,
@@ -315,6 +315,8 @@ const ItemAdd = ({ automate, index }) => {
       unitId: automate.unit,
       automateId: automate.id,
       closeScreen: currentScreenName,
+      numberActionCanAdd:
+        permissions?.max_actions_per_automation - numberActionAdded,
     };
 
     navigate(
@@ -322,8 +324,8 @@ const ItemAdd = ({ automate, index }) => {
       navParams
     );
   }, [
+    numberActionAdded,
     permissions?.max_actions_per_automation,
-    index,
     automate.unit,
     automate.id,
     currentScreenName,
@@ -335,7 +337,7 @@ const ItemAdd = ({ automate, index }) => {
     <View style={styles.wrapItem}>
       <View style={styles.leftItemAdd}>
         <Text style={styles.number} type="H4" semibold color={Colors.Gray7}>
-          {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+          {(numberActionAdded + 1 < 10 ? '0' : '') + (numberActionAdded + 1)}
         </Text>
       </View>
       <TouchableOpacity

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

@@ -14,6 +14,7 @@ import BottomButtonView from '../../../commons/BottomButtonView';
 
 const mock = new MockAdapter(api.axiosInstance);
 const mockGoBack = jest.fn();
+const mockSetDisplay = jest.fn();
 
 jest.mock('@react-navigation/native', () => {
   return {
@@ -46,7 +47,8 @@ describe('Test ChangePosition', () => {
     useRoute.mockReturnValue({
       params: {
         sensor: { id: 1, name: 'device' },
-        displayItems: [{ id: 1 }, { id: 2 }],
+        display: { items: [{ id: 1 }, { id: 2 }] },
+        setDisplay: mockSetDisplay,
         station: { id: 1, name: 'station' },
         evaluate: {},
         fetchDataDeviceDetail: mockFetchData,
@@ -70,6 +72,7 @@ describe('Test ChangePosition', () => {
     });
     expect(mockGoBack).toHaveBeenCalled();
     expect(mockFetchData).toHaveBeenCalled();
+    expect(mockSetDisplay).toHaveBeenCalled();
     expect(spyToastSuccess).toBeCalledWith('Updated widget successfully');
   });
 });