@eohjsc/react-native-smart-city 0.3.90 → 0.3.92

package/src/commons/Automate/__test__/ItemAutomate.test.js

@@ -7,20 +7,17 @@ import { mockSCStore } from '../../../context/mockStore';
 import Text from '../../Text';
 import ItemAutomate from '../ItemAutomate';
 
-const wrapComponent = (rest) => (
+const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
-    <ItemAutomate {...rest} />
+    <ItemAutomate {...props} />
   </SCProvider>
 );
 
 describe('Test ItemAutomate', () => {
   let tree;
-  let defaultProps = {
-    type: 'one_tap',
-  };
   it('Test render', async () => {
     await act(async () => {
-      tree = await create(wrapComponent(defaultProps));
+      tree = await create(wrapComponent({ automate: { type: 'one_tap' } }));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
@@ -29,12 +26,15 @@ describe('Test ItemAutomate', () => {
 
   it('Test render TouchableOpacity', async () => {
     const mockOnPress = jest.fn();
-    defaultProps = {
-      type: 'one_tap',
-      onPress: mockOnPress,
-    };
     await act(async () => {
-      tree = await create(wrapComponent(defaultProps));
+      tree = await create(
+        wrapComponent({
+          automate: {
+            type: 'one_tap',
+          },
+          onPress: mockOnPress,
+        })
+      );
     });
     const instance = tree.root;
     const touchableOpacities = instance.findAllByType(TouchableOpacity);

package/src/commons/BackDefault/__test__/BackDefault.test.js

@@ -10,7 +10,7 @@ describe('Test BackDefault', () => {
     let color = { color: 'fff' };
     let fixedHeight = { Height: 50 };
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <BackDefault goBack={goBack} color={color} fixedHeight={fixedHeight} />
       );
     });

package/src/commons/Button/__test__/Button.test.js

@@ -10,7 +10,7 @@ describe('Test button component', () => {
   it('create button auth a', async () => {
     const mockFunc = jest.fn();
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <Button
           type="info"
           title={'directions'}

package/src/commons/ButtonPopup/__test__/ButtonPopup.test.js

@@ -8,7 +8,7 @@ describe('Test button popup', () => {
 
   it('create button popup', async () => {
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <ButtonPopup
           mainTitle="Main title"
           secondaryTitle="Second title"

package/src/commons/Calendar/__test__/Calendar.test.js

@@ -22,7 +22,7 @@ describe('Test Calendar component', () => {
 
   it('create Calendar', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent({ isVisible: true }));
+      tree = await renderer.create(wrapComponent({ isVisible: true }));
     });
     const instance = tree.root;
     const calendar = instance.findAllByType(Calendar);

package/src/commons/ChartLoading/__test__/ChartLoading.test.js

@@ -16,7 +16,7 @@ describe('Test chart loading', () => {
 
   it('create chart  message null', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);

package/src/commons/CircleButton/__test__/CircleButton.test.js

@@ -7,7 +7,7 @@ describe('Test circle button', () => {
   let tree;
   it('create circle button', async () => {
     await act(async () => {
-      tree = renderer.create(<CircleButton size={5} />);
+      tree = await renderer.create(<CircleButton size={5} />);
     });
     const instance = tree.root;
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);

package/src/commons/CircleView/__test__/CircleView.test.js

@@ -7,7 +7,7 @@ describe('Test circle view', () => {
   let tree;
   it('create circle view', async () => {
     await act(async () => {
-      tree = renderer.create(<CircleView size={5} />);
+      tree = await renderer.create(<CircleView size={5} />);
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);

package/src/commons/DateTimeRangeChange/__test__/DateTimeButton.test.js

@@ -10,7 +10,7 @@ describe('Test DateTimeButton', () => {
 
   it('render DateTimeButton formatType = "date"', async () => {
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <DateTimeButton onPress={() => {}} time={time} formatType="date" />
       );
     });
@@ -21,7 +21,9 @@ describe('Test DateTimeButton', () => {
 
   it('render DateTimeButton formatType is undefined', async () => {
     await act(async () => {
-      tree = renderer.create(<DateTimeButton onPress={() => {}} time={time} />);
+      tree = await renderer.create(
+        <DateTimeButton onPress={() => {}} time={time} />
+      );
     });
     const instance = tree.root;
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);

package/src/commons/DateTimeRangeChange/index.js

@@ -1,12 +1,13 @@
-import React, { memo, useCallback, useState } from 'react';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
+import moment from 'moment/moment';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
 
-import { Colors } from '../../configs';
 import Text from '../Text';
+import { Colors } from '../../configs';
 import DateTimeButton from './DateTimeButton';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import moment from 'moment/moment';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { DATE_TIME_FORMAT } from '../../configs/Constants';
 
 const DateTimeRangeChange = memo(
   ({
@@ -18,11 +19,12 @@ const DateTimeRangeChange = memo(
     selectEnd,
     inline = true,
   }) => {
-    const format = showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD';
+    const format = showTime ? DATE_TIME_FORMAT.DMY_HM : DATE_TIME_FORMAT.DMY;
     const mode = showTime ? 'datetime' : 'date';
     const t = useTranslations();
-    const ensureDateStart = moment(startTime);
-    const ensureDateEnd = moment(endTime);
+
+    const [startDate, setStartDate] = useState(moment(startTime));
+    const [endDate, setEndDate] = useState(moment(endTime));
 
     const [eventPicker, setEventPicker] = useState({
       showModalEnd: false,
@@ -30,34 +32,18 @@ const DateTimeRangeChange = memo(
     });
 
     const onStart = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalStart: true,
-        showModalEnd: false,
-      }));
+      setEventPicker({ showModalStart: true });
     }, []);
+
     const onEnd = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalStart: false,
-        showModalEnd: true,
-      }));
+      setEventPicker({ showModalEnd: true });
     }, []);
+
     const onConfirmStart = useCallback(
       (date) => {
         const selectedDate = date ? moment(date) : moment().valueOf();
-        setEventPicker((state) => {
-          if (typeof date === 'number') {
-            onCancel();
-            return state;
-          }
-          return {
-            ...state,
-            showModalStart: false,
-            showModalEnd: true,
-          };
-        });
         selectStart(selectedDate);
+        onCancel();
       },
       [onCancel, selectStart]
     );
@@ -65,30 +51,27 @@ const DateTimeRangeChange = memo(
     const onConfirmEnd = useCallback(
       (date) => {
         const selectedDate = date ? moment(date) : moment().valueOf();
-        setEventPicker((state) => {
-          if (typeof date === 'number') {
-            onCancel();
-            return state;
-          }
-
-          return {
-            ...state,
-            showModalEnd: false,
-          };
-        });
         selectEnd(selectedDate);
+        onCancel();
       },
       [onCancel, selectEnd]
     );
 
     const onCancel = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
+      setEventPicker({
         showModalEnd: false,
         showModalStart: false,
-      }));
+      });
     }, []);
 
+    useEffect(() => {
+      setStartDate(moment(startTime));
+    }, [startTime]);
+
+    useEffect(() => {
+      setEndDate(moment(endTime));
+    }, [endTime]);
+
     return (
       <View
         style={[styles.dateTimeView, !inline && styles.spaceBetween, style]}
@@ -99,7 +82,7 @@ const DateTimeRangeChange = memo(
           </Text>
           <DateTimeButton onPress={onStart} style={!inline && styles.button}>
             <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
-              {ensureDateStart.format(format)}
+              {startDate.format(format)}
             </Text>
           </DateTimeButton>
         </View>
@@ -109,13 +92,13 @@ const DateTimeRangeChange = memo(
           </Text>
           <DateTimeButton onPress={onEnd} style={!inline && styles.button}>
             <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
-              {ensureDateEnd.format(format)}
+              {endDate.format(format)}
             </Text>
           </DateTimeButton>
         </View>
         <DateTimePickerModal
           isVisible={eventPicker.showModalStart}
-          date={ensureDateStart._d}
+          date={startDate.valueOf()}
           mode={mode}
           onConfirm={onConfirmStart}
           onCancel={onCancel}
@@ -128,7 +111,7 @@ const DateTimeRangeChange = memo(
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
-          date={ensureDateEnd._d}
+          date={endDate.valueOf()}
           mode={mode}
           onConfirm={onConfirmEnd}
           onCancel={onCancel}
@@ -138,7 +121,7 @@ const DateTimeRangeChange = memo(
           cancelTextIOS={t('cancel')}
           confirmTextIOS={t('confirm')}
           maximumDate={new Date()}
-          minimumDate={ensureDateStart._d}
+          minimumDate={startDate.valueOf()}
         />
       </View>
     );

package/src/commons/Device/DeviceAlertStatus.js

@@ -72,8 +72,9 @@ const DeviceAlertStatus = memo(
     return (
       <View style={[style, stylesOffset.moveDownOffset]}>
         {listStatus &&
-          listStatus.map((status) => (
+          listStatus.map((status, index) => (
             <AlertStatusMachine
+              key={index}
               accessibilityLabel={AccessibilityLabel.ALERT_STATUS_MACHINE}
               message={
                 (status.standard && t(status.standard)) ||

package/src/commons/Device/Emergency/__test__/EmergencyButton.test.js

@@ -18,7 +18,7 @@ describe('Test EmergencyButton', () => {
   let tree;
   it('create EmergencyButton', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
 
     const instance = tree.root;
@@ -29,7 +29,7 @@ describe('Test EmergencyButton', () => {
   it('long press EmergencyButton', async () => {
     const mockFunction = jest.fn();
     await act(async () => {
-      tree = renderer.create(wrapComponent(mockFunction));
+      tree = await renderer.create(wrapComponent(mockFunction));
     });
 
     const instance = tree.root;

package/src/commons/Device/Emergency/__test__/EmergencyDetail.test.js

@@ -39,7 +39,7 @@ describe('Test EmergencyDetail', () => {
     };
     useIsFocused.mockImplementation(() => true);
     await act(async () => {
-      tree = renderer.create(wrapComponent(item));
+      tree = await renderer.create(wrapComponent(item));
     });
     const instance = tree.root;
     const button = instance.findAllByType(VLCPlayer);

package/src/commons/Device/FlatListItems.js

@@ -177,7 +177,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
   },
   viewMore: {
-    top: 20,
+    top: 10,
     paddingVertical: 5,
     borderColor: Colors.Gray5,
     borderWidth: 1,

package/src/commons/Device/Hanet/ItemHanetDevice.test.js

@@ -36,7 +36,7 @@ describe('Test ItemHanetDevice', () => {
 
   it('render ItemHanetDevice', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent(props));
+      tree = await renderer.create(wrapComponent(props));
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableWithoutFeedback);
@@ -49,7 +49,7 @@ describe('Test ItemHanetDevice', () => {
   it('render ItemHanetDevice sensor has icon', async () => {
     props.sensor.icon_kit = 'icon';
     await act(async () => {
-      tree = renderer.create(wrapComponent(props));
+      tree = await renderer.create(wrapComponent(props));
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableWithoutFeedback);

package/src/commons/Device/HistoryChart.js

@@ -9,17 +9,10 @@ import Button from '../../commons/Button';
 import CurrencyInput from '../../commons/Form/CurrencyInput';
 import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import LinearChart from './LinearChart';
 import ChartAggregationOption from '../ChartAggregationOption';
 import { formatMoney } from '../../utils/Utils';
 
-export const dateTimeType = {
-  date: 'date',
-  time: 'time',
-  dateTime: 'datetime',
-};
-
 const { width } = Dimensions.get('window');
 
 const HistoryChart = memo(
@@ -50,25 +43,10 @@ const HistoryChart = memo(
     });
     const [price, setPrice] = useState(null);
 
-    const onStart = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalStart: true,
-        showModalEnd: false,
-      }));
-    }, []);
-    const onEnd = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalStart: false,
-        showModalEnd: true,
-      }));
-    }, []);
-    const onConfirmStart = useCallback(
+    const selectStart = useCallback(
       (date) => {
         setEventPicker((state) => {
           if (typeof date === 'number') {
-            onCancel();
             return state;
           }
           if (moment(date) < state.endTime) {
@@ -89,15 +67,15 @@ const HistoryChart = memo(
             };
           }
         });
+        onCancel();
       },
       [onCancel, setStartDate, setEndDate]
     );
 
-    const onConfirmEnd = useCallback(
+    const selectEnd = useCallback(
       (date) => {
         setEventPicker((state) => {
           if (typeof date === 'number') {
-            onCancel();
             return state;
           }
           if (moment(date).add(1, 'day') > state.startTime) {
@@ -120,6 +98,7 @@ const HistoryChart = memo(
             };
           }
         });
+        onCancel();
       },
       [onCancel, setStartDate, setEndDate]
     );
@@ -197,8 +176,8 @@ const HistoryChart = memo(
           ) && (
             <DateTimeRangeChange
               startTime={eventPicker.startTime}
-              onStart={onStart}
-              onEnd={onEnd}
+              selectStart={selectStart}
+              selectEnd={selectEnd}
               endTime={eventPicker.endTime}
               formatType={formatType}
             />
@@ -234,28 +213,6 @@ const HistoryChart = memo(
             {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>
           </Text>
         )}
-        <DateTimePickerModal
-          isVisible={eventPicker.showModalStart}
-          date={eventPicker.startTime?._d}
-          mode={formatType || 'datetime'}
-          onConfirm={onConfirmStart}
-          onCancel={onCancel}
-          display="spinner"
-          headerTextIOS={t('pick_a_date')}
-          cancelTextIOS={t('cancel')}
-          confirmTextIOS={t('confirm')}
-        />
-        <DateTimePickerModal
-          isVisible={eventPicker.showModalEnd}
-          date={eventPicker.endTime?._d}
-          mode={formatType || 'datetime'}
-          onConfirm={onConfirmEnd}
-          onCancel={onCancel}
-          display="spinner"
-          headerTextIOS={t('pick_a_date')}
-          cancelTextIOS={t('cancel')}
-          confirmTextIOS={t('confirm')}
-        />
       </View>
     );
   }

package/src/commons/Device/LinearChart/LinearChart.test.js

@@ -18,7 +18,7 @@ describe('Test LinearChart', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<LinearChart datas={data} />);
+      tree = await renderer.create(<LinearChart datas={data} />);
     });
     const instance = tree.root;
     const views = instance.findAllByType(View);

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

@@ -38,7 +38,7 @@ describe('Test ProgressBar', () => {
     };
     const data = [{ value: 10, unit: 'oC' }];
     await act(async () => {
-      tree = renderer.create(wrapComponent(item, data));
+      tree = await renderer.create(wrapComponent(item, data));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);

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

@@ -15,7 +15,7 @@ const ProgressBar = memo(({ data = [], item }) => {
   }, [item?.configuration?.max_value]);
   const { value = 0, measure, unit } = data.length ? data[0] : {};
   const percent = value / maxValue; // a number between 0 and 1
-
+  const isNotValue = ['', null, undefined, NaN].includes(value);
   return (
     <View style={styles.container}>
       <Text size={16} style={styles.textLabel}>
@@ -28,19 +28,13 @@ const ProgressBar = memo(({ data = [], item }) => {
 
       <View style={styles.wrapProgressBar}>
         <Progress.Bar
+          style={styles.processBar}
           progress={percent}
-          height={40}
-          width={200}
-          color={Colors.Blue16}
           unfilledColor={Colors.Blue15}
-          borderWidth={0}
-          borderRadius={10}
         />
-        <View>
-          <Text numberOfLines={1} style={styles.textValue}>
-            {value}
-          </Text>
-        </View>
+        <Text numberOfLines={1} style={styles.textValue}>
+          {isNotValue ? '--' : value}
+        </Text>
       </View>
     </View>
   );

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

@@ -14,20 +14,28 @@ export default StyleSheet.create({
     marginBottom: 12,
   },
   textLabel: {
-    paddingHorizontal: 15,
+    marginLeft: 8,
     paddingTop: 8,
   },
   textMaxValue: {
     marginTop: 20,
-    marginLeft: 14,
+    marginBottom: 2,
     textAlign: 'left',
     fontWeight: 'bold',
     textTransform: 'uppercase',
   },
+  processBar: {
+    flex: 1,
+    width: '100%',
+    height: 40,
+    color: Colors.Blue16,
+    borderWidth: 0,
+    borderRadius: 10,
+  },
   wrapProgressBar: {
     flex: 1,
     flexDirection: 'row',
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center',
   },
   textValue: {

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

@@ -19,7 +19,7 @@ describe('Test CurrentRainSensor', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={data} />);
+      tree = await renderer.create(<CurrentRainSensor data={data} />);
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
@@ -38,7 +38,7 @@ describe('Test CurrentRainSensor', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={data} />);
+      tree = await renderer.create(<CurrentRainSensor data={data} />);
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
@@ -47,7 +47,7 @@ describe('Test CurrentRainSensor', () => {
 
   it('render CurrentRainSensor data empty', async () => {
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={[]} />);
+      tree = await renderer.create(<CurrentRainSensor data={[]} />);
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
@@ -66,7 +66,7 @@ describe('Test CurrentRainSensor', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={data} />);
+      tree = await renderer.create(<CurrentRainSensor data={data} />);
     });
     const instance = tree.root;
     const fimage = instance.findAllByType(FImage);
@@ -85,7 +85,7 @@ describe('Test CurrentRainSensor', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={data} />);
+      tree = await renderer.create(<CurrentRainSensor data={data} />);
     });
     const instance = tree.root;
     const iconComponent = instance.findAllByType(IconComponent);

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

@@ -18,7 +18,7 @@ describe('Test SonosSpeaker', () => {
   let tree;
   it('create SonosSpeaker', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
 
     const instance = tree.root;
@@ -28,7 +28,7 @@ describe('Test SonosSpeaker', () => {
 
   it('Test handleClickButton', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
 
     const instance = tree.root;
@@ -43,7 +43,7 @@ describe('Test SonosSpeaker', () => {
 
   it('Test onValueChange', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
 
     const instance = tree.root;

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

@@ -20,7 +20,7 @@ describe('Test Compass', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(wrapComponent(data));
+      tree = await renderer.create(wrapComponent(data));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -29,7 +29,7 @@ describe('Test Compass', () => {
 
   it('create Compass data null', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent([]));
+      tree = await renderer.create(wrapComponent([]));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);

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

@@ -80,6 +80,7 @@ const Anemometer = memo(
           );
           arr.push(
             <Text
+              key={i.toString()}
               fill={txtColor}
               fontSize={18}
               x={textPosition.x}
@@ -100,6 +101,7 @@ const Anemometer = memo(
           );
           arr.push(
             <Text
+              key={i.toString()}
               fill={txtColor}
               fontSize={18}
               x={textPosition.x}