@eohjsc/react-native-smart-city 0.2.53 → 0.2.57

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

@@ -214,18 +214,27 @@ describe('test ThreeButtonHistory', () => {
         await calendar.props.onDayPress({ dateString: date });
       });
     };
-    await selectDate('2021-09-20');
-    await selectDate('2021-09-02');
-    await selectDate('2021-09-09');
-    await selectDate('2021-09-10');
-    await selectDate('2021-09-05');
-    await selectDate('2021-09-05');
-    await selectDate('2021-09-20');
+    // 2 -> 9
+    await selectDate('2021-09-20'); // 2 -> 20
+    await selectDate('2021-09-01'); // 1 -> 20
+    await selectDate('2021-09-15'); // 1 -> 15
+    await selectDate('2021-09-05'); // 5 -> 15
+    await selectDate('2021-09-15'); // 5 -> null
+    await selectDate('2021-09-05'); // null -> null
+    await selectDate('2021-09-10'); // 10 -> null
+    await selectDate('2021-09-05'); // 5 -> 10
+    await selectDate('2021-09-10'); // 5 -> null
+    await selectDate('2021-09-20'); // 5 -> 20
+    await selectDate('2021-09-05'); // null -> 20
+    await selectDate('2021-09-25'); // 20 -> 25
+    await selectDate('2021-09-20'); // null -> 25
+    await selectDate('2021-09-10'); // 10 -> 25
+
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     await act(async () => {
       await viewButtonBottom.props.onRightClick();
     });
     expect(mockSetStartDate).toBeCalledWith(moment('2021-09-10').valueOf());
-    expect(mockSetEndDate).toBeCalledWith(moment('2021-09-20').valueOf());
+    expect(mockSetEndDate).toBeCalledWith(moment('2021-09-25').valueOf());
   });
 });

package/src/commons/ThreeButtonHistory/index.js

@@ -20,7 +20,7 @@ const ThreeButtonHistory = memo(
     const t = useTranslations();
     const calendarRef = useRef();
     const [selectedIndex, setSelectedIndex] = useState(2);
-    const [isShowDate, setIsShowDate] = useState(false);
+    const [showCalendar, setShowCalendar] = useState(false);
     const [selectedStart, setSelectedStart] = useState(
       moment(startDate).format('YYYY-MM-DD')
     );
@@ -57,15 +57,15 @@ const ThreeButtonHistory = memo(
       [selectedIndex]
     );
 
-    const onPressCancel = useCallback(() => {
+    const onCalendarCancel = useCallback(() => {
       if (showSelectMonth) {
         setShowSelectMonth(false);
         return;
       }
-      setIsShowDate(false);
+      setShowCalendar(false);
     }, [showSelectMonth, setShowSelectMonth]);
 
-    const onPressDone = useCallback(() => {
+    const onCalendarDone = useCallback(() => {
       if (showSelectMonth) {
         setShowSelectMonth(false);
         return;
@@ -73,7 +73,7 @@ const ThreeButtonHistory = memo(
       if (selectedStart === null || selectedEnd === null) {
         return;
       }
-      setIsShowDate(false);
+      setShowCalendar(false);
       setStartDate(moment(selectedStart).valueOf());
       setEndDate(moment(selectedEnd).valueOf());
     }, [
@@ -85,9 +85,12 @@ const ThreeButtonHistory = memo(
       setShowSelectMonth,
     ]);
 
-    const onDayPress = useCallback(
+    const onDateSelected = useCallback(
       (date) => {
         const selectedDate = date.dateString;
+        const mmSelectedDate = moment(selectedDate);
+        onMonthSelected(mmSelectedDate);
+
         if (selectedDate === selectedStart) {
           setSelectedStart(null);
           return;
@@ -96,25 +99,54 @@ const ThreeButtonHistory = memo(
           setSelectedEnd(null);
           return;
         }
-        if (selectedStart !== null && selectedEnd !== null) {
+
+        if (!!selectedStart && !!selectedEnd) {
+          if (mmSelectedDate.isAfter(selectedEnd, 'date')) {
+            setSelectedEnd(selectedDate);
+            return;
+          }
+          if (mmSelectedDate.isBefore(selectedStart, 'date')) {
+            setSelectedStart(selectedDate);
+            return;
+          }
+          if (
+            Math.abs(mmSelectedDate.diff(selectedStart, 'days')) <=
+            Math.abs(mmSelectedDate.diff(selectedEnd, 'days'))
+          ) {
+            setSelectedStart(selectedDate);
+          } else {
+            setSelectedEnd(selectedDate);
+          }
+          return;
+        }
+
+        if (selectedStart) {
+          if (mmSelectedDate.isBefore(selectedStart, 'date')) {
+            setSelectedStart(selectedDate);
+            setSelectedEnd(selectedStart);
+          } else {
+            setSelectedEnd(selectedDate);
+          }
           return;
         }
-        if (selectedEnd === null) {
-          setSelectedEnd(selectedDate);
-        } else {
-          if (moment(selectedDate).isAfter(selectedEnd, 'date')) {
+
+        if (selectedEnd) {
+          if (mmSelectedDate.isAfter(selectedEnd, 'date')) {
             setSelectedStart(selectedEnd);
             setSelectedEnd(selectedDate);
           } else {
             setSelectedStart(selectedDate);
           }
+          return;
         }
+
+        setSelectedStart(selectedDate);
       },
-      [selectedStart, selectedEnd]
+      [selectedStart, selectedEnd, onMonthSelected]
     );
 
     const onPressItemButton = useCallback(
-      (index) => {
+      (index) => () => {
         switch (index) {
           case 0:
             setGroupBy('week');
@@ -124,9 +156,7 @@ const ThreeButtonHistory = memo(
             break;
           case 2:
             setGroupBy('date');
-            if (selectedIndex === 2) {
-              setIsShowDate(true);
-            }
+            selectedIndex === 2 && setShowCalendar(true);
         }
         setSelectedIndex(index);
       },
@@ -212,7 +242,6 @@ const ThreeButtonHistory = memo(
             },
           },
           selected: true,
-          disableTouchEvent: true,
           color: Colors.Gray4,
         };
       }
@@ -228,15 +257,15 @@ const ThreeButtonHistory = memo(
                 <ItemButton
                   key={index}
                   dateTitle={item.dateTitle}
-                  onPress={() => onPressItemButton(index)}
+                  onPress={onPressItemButton(index)}
                   isSelected={selectedIndex === index}
                 />
               );
             })}
         </View>
         <BottomSheet
-          isVisible={isShowDate}
-          onBackdropPress={onPressCancel}
+          isVisible={showCalendar}
+          onBackdropPress={onCalendarCancel}
           style={styles.modal}
         >
           <View style={styles.calendar}>
@@ -257,7 +286,7 @@ const ThreeButtonHistory = memo(
               current={currentMonth.format('YYYY-MM-DD')}
               style={showSelectMonth && styles.displayNone}
               markingType={'custom'}
-              onDayPress={onDayPress}
+              onDayPress={onDateSelected}
               maxDate={moment().format('YYYY-MM-DD')}
               markedDates={markedDates}
               hideArrows={true}
@@ -267,9 +296,9 @@ const ThreeButtonHistory = memo(
             <View style={styles.separator} />
             <ViewButtonBottom
               leftTitle={t('cancel')}
-              onLeftClick={onPressCancel}
+              onLeftClick={onCalendarCancel}
               rightTitle={t('done')}
-              onRightClick={onPressDone}
+              onRightClick={onCalendarDone}
             />
           </View>
         </BottomSheet>

package/src/configs/Constants.js

@@ -116,13 +116,13 @@ export const AUTOMATES = {
   value_change: {
     value: AUTOMATE_TYPE.VALUE_CHANGE,
     title: 'value_change',
-    explanation: 'short_explanation',
+    explanation: 'setup_the_conditions',
     icon: ValueChange,
   },
   schedule: {
     value: AUTOMATE_TYPE.SCHEDULE,
     title: 'schedule',
-    explanation: 'short_explanation',
+    explanation: 'setup_the_schedule',
     icon: Schedule,
   },
 };

package/src/screens/ActivityLog/ItemLog.js

@@ -39,6 +39,15 @@ const DetailLog = ({ item }) => {
           <Text style={styles.name}>{item.name || item.params?.username}</Text>
         </Text>
       );
+    default:
+      return (
+        <Text style={styles.text}>
+          {item.action_name
+            ? `${item.action_name} ${t('by')} `
+            : `${t('activated_by')} `}
+          <Text style={styles.name}>{item.name || item.params?.username}</Text>
+        </Text>
+      );
   }
 };
 

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

@@ -60,6 +60,49 @@ test('test ItemLog one tap', () => {
   expect(texts[2].props.children).toBe(props.item.params.username);
 });
 
+test('test ItemLog script update', () => {
+  let tree;
+  let props = {
+    item: {
+      content_code: 'SCRIPT_UPDATED_BY',
+      params: {
+        username: 'username',
+      },
+      created_at: '2021-07-02T15:48:24.917932Z',
+    },
+    type: 'automate',
+    length: 2,
+    index: 1,
+  };
+  act(() => {
+    tree = create(wrapComponent(props));
+  });
+  const instance = tree.root;
+  const texts = instance.findAllByType(Text);
+  expect(texts[2].props.children).toBe(props.item.params.username);
+});
+
+test('test ItemLog no content_code', () => {
+  let tree;
+  let props = {
+    item: {
+      params: {
+        username: 'username',
+      },
+      created_at: '2021-07-02T15:48:24.917932Z',
+    },
+    type: 'action',
+    length: 2,
+    index: 1,
+  };
+  act(() => {
+    tree = create(wrapComponent(props));
+  });
+  const instance = tree.root;
+  const texts = instance.findAllByType(Text);
+  expect(texts[2].props.children).toBe(props.item.params.username);
+});
+
 describe('test ItemLog emergency event', () => {
   let tree;
   let props;

package/src/screens/AddCommon/SelectSubUnit.js

@@ -86,7 +86,7 @@ const AddCommonSelectSubUnit = ({ route }) => {
   const addSubUnit = useCallback(() => {
     navigation.navigate(Routes.AddSubUnitStack, {
       screen: Routes.AddSubUnit,
-      params: { unit, ...route.params },
+      params: { unit, ...route.params, addType: 'AddHassiDevice' },
     });
   }, [navigation, unit, route.params]);
 

package/src/screens/SubUnit/AddSubUnit.js

@@ -1,4 +1,10 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, {
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+  useRef,
+} from 'react';
 import {
   View,
   Image,
@@ -42,80 +48,93 @@ const prepareImageToUpload = async (image) => {
 
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
-  const navigation = useNavigation();
+  const { navigate, goBack } = useNavigation();
   const { unit, addType, isAddUnit, location = '' } = route?.params;
   const [roomName, setRoomName] = useState('');
   const [wallpaper, setWallpaper] = useState('');
   const [imageUrl, setImageUrl] = useState('');
   const [showImagePicker, setShowImagePicker] = useState(false);
+  let awaitCreate = useRef(false);
 
   const goDone = useCallback(async () => {
     if (isAddUnit) {
-      const dataObj = {
-        name: roomName,
-        address: location,
-        background: wallpaper,
-      };
-      dataObj.background = await prepareImageToUpload(dataObj.background);
-      const formData = createFormData(dataObj, ['background']);
-      const { success, data } = await axiosPost(
-        API.UNIT.CREATE_UNIT(),
-        formData,
-        {
-          headers: { 'Content-Type': 'multipart/form-data' },
+      if (!awaitCreate.current) {
+        awaitCreate.current = true;
+        const dataObj = {
+          name: roomName,
+          address: location,
+          background: wallpaper,
+        };
+        dataObj.background = await prepareImageToUpload(dataObj.background);
+        const formData = createFormData(dataObj, ['background']);
+        const { success, data } = await axiosPost(
+          API.UNIT.CREATE_UNIT(),
+          formData,
+          {
+            headers: { 'Content-Type': 'multipart/form-data' },
+          }
+        );
+        if (success) {
+          navigate(Routes.UnitStack, {
+            screen: Routes.UnitDetail,
+            params: {
+              unitId: data?.id,
+              routeName: Routes.DashboardStack,
+            },
+          });
+        } else {
+          awaitCreate.current = false;
+          ToastBottomHelper.error(t('text_create_unit_fail'));
         }
-      );
-      if (success) {
-        navigation.navigate(Routes.UnitStack, {
-          screen: Routes.UnitDetail,
-          params: {
-            unitId: data?.id,
-          },
-        });
-      } else {
-        ToastBottomHelper.error(t('text_create_unit_fail'));
       }
     } else {
-      const dataObj = { name: roomName, background: wallpaper };
-      dataObj.background = await prepareImageToUpload(dataObj.background);
-      const formData = createFormData(dataObj, ['background']);
-      const { success, data } = await axiosPost(
-        API.SUB_UNIT.CREATE_SUB_UNIT(unit.id),
-        formData,
-        {
-          headers: { 'Content-Type': 'multipart/form-data' },
-        }
-      );
-      if (success) {
-        ToastBottomHelper.success(t('text_create_sub_unit_success'));
-
-        if (addType === 'AddNewGateway') {
-          navigation.navigate(Routes.AddCommonSelectSubUnit, {
-            ...route.params,
+      if (!awaitCreate.current) {
+        awaitCreate.current = true;
+        const dataObj = { name: roomName, background: wallpaper };
+        dataObj.background = await prepareImageToUpload(dataObj.background);
+        const formData = createFormData(dataObj, ['background']);
+        const { success, data } = await axiosPost(
+          API.SUB_UNIT.CREATE_SUB_UNIT(unit.id),
+          formData,
+          {
+            headers: { 'Content-Type': 'multipart/form-data' },
+          }
+        );
+        if (success) {
+          ToastBottomHelper.success(t('text_create_sub_unit_success'));
+          if (addType === 'AddHassiDevice') {
+            goBack();
+            return;
+          } else if (addType === 'AddNewGateway') {
+            navigate(Routes.AddCommonSelectSubUnit, {
+              ...route.params,
+            });
+            return;
+          }
+          navigate(Routes.UnitStack, {
+            screen: Routes.SubUnitDetail,
+            params: {
+              unit: unit,
+              station: data,
+            },
           });
-          return;
+        } else {
+          awaitCreate.current = false;
+          ToastBottomHelper.error(t('text_create_sub_unit_fail'));
         }
-        navigation.navigate(Routes.UnitStack, {
-          screen: Routes.SubUnitDetail,
-          params: {
-            unit: unit,
-            station: data,
-          },
-        });
-      } else {
-        ToastBottomHelper.error(t('text_create_sub_unit_fail'));
       }
     }
   }, [
-    addType,
-    navigation,
+    isAddUnit,
     roomName,
-    route.params,
+    location,
+    wallpaper,
+    navigate,
     t,
     unit,
-    wallpaper,
-    isAddUnit,
-    location,
+    addType,
+    goBack,
+    route.params,
   ]);
 
   const onChoosePhoto = useCallback(() => {
@@ -144,8 +163,8 @@ const AddSubUnit = ({ route }) => {
   }, [roomName, wallpaper, location, isAddUnit]);
 
   const onChooseLocation = useCallback(() => {
-    navigation.navigate(Routes.AddLocationMaps);
-  }, [navigation]);
+    navigate(Routes.AddLocationMaps);
+  }, [navigate]);
 
   return (
     <SafeAreaView style={styles.wrap}>
@@ -211,7 +230,7 @@ const AddSubUnit = ({ route }) => {
           </View>
           <ViewButtonBottom
             leftTitle={t('cancel')}
-            onLeftClick={() => navigation.goBack()}
+            onLeftClick={() => goBack()}
             rightTitle={t('done')}
             rightDisabled={validateData}
             onRightClick={goDone}

package/src/screens/Unit/Detail.js

@@ -30,7 +30,7 @@ import { AUTOMATE_TYPE } from '../../configs/Constants';
 
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
-  const { unitId, unitData, isOneTap } = route.params;
+  const { unitId, unitData, isOneTap, routeName } = route.params;
   const isFocused = useIsFocused();
   const { stateData, setAction } = useContext(SCContext);
   const { navigate } = useNavigation();
@@ -274,6 +274,11 @@ const UnitDetail = ({ route }) => {
       );
     }
   };
+
+  const onBack = useCallback(() => {
+    navigate(routeName);
+  }, [navigate, routeName]);
+
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
@@ -286,6 +291,7 @@ const UnitDetail = ({ route }) => {
       onAdd={setShowAdd}
       onMore={showPopoverWithRef}
       hideRightPlus={!isOwner}
+      onBack={routeName && onBack}
     >
       <View style={styles.container}>
         <Summaries unit={unit} />

package/src/screens/Unit/ManageUnit.js

@@ -11,7 +11,6 @@ import {
   axiosPatch,
   axiosDelete,
 } from '../../utils/Apis/axios';
-import { navigate } from '../../navigations/utils';
 import useBoolean from '../../hooks/Common/useBoolean';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 
@@ -134,11 +133,11 @@ const ManageUnit = ({ route }) => {
   const goRemove = useCallback(async () => {
     const { success } = await axiosDelete(API.UNIT.MANAGE_UNIT(unit.id));
     if (success) {
-      setHideEdit(true);
+      setHideRemove(true);
       ToastBottomHelper.success(t('unit_deleted_successfully'));
-      navigate(Routes.Dashboard);
+      navigation.navigate(Routes.Dashboard);
     }
-  }, [unit.id, setHideEdit, t]);
+  }, [unit.id, setHideRemove, t, navigation]);
 
   const goToManageSubUnit = useCallback(() => {
     navigation.navigate(Routes.UnitStack, {

package/src/screens/Unit/SmartAccount.js

@@ -95,7 +95,6 @@ const ListSmartAccount = ({ route }) => {
     },
     [navigate, unitId]
   );
-
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
@@ -116,7 +115,7 @@ const ListSmartAccount = ({ route }) => {
           })}
         </View>
         <AlertAction
-          visible={stateAlertRemove.visible && lockShowing}
+          visible={stateAlertRemove.visible && !lockShowing}
           hideModal={hideAlertAction}
           title={stateAlertRemove.title}
           message={stateAlertRemove.message}
@@ -131,7 +130,7 @@ const ListSmartAccount = ({ route }) => {
           listMenuItem={listMenuItem}
           childRef={childRef}
           onItemClick={onItemClick}
-          onHide={releaseLockShowing}
+          hideComplete={releaseLockShowing}
         />
       </WrapHeaderScrollable>
     </View>

package/src/screens/Unit/SmartAccountItem.js

@@ -31,7 +31,7 @@ export const SmartAccountItem = memo(
           />
           <View style={styles.wrap}>
             <Text numberOfLines={1} type="H4">
-              {item?.brand}
+              {item?.brand === 'google_home' ? 'Điện Quang' : item?.brand}
             </Text>
             <Text numberOfLines={2} type="Body" color={Colors.Gray7}>
               {item?.username}

package/src/screens/Unit/SmartAccountStyles.js

@@ -26,7 +26,7 @@ export default StyleSheet.create({
   },
   wrapText: {
     flexDirection: 'row',
-    alignItems: 'space-arou',
+    alignItems: 'space-around',
   },
   icon: {
     width: 48,

package/src/screens/Unit/Summaries.js

@@ -20,7 +20,11 @@ const Summaries = memo(({ unit }) => {
       return;
     }
 
-    const { success, data } = await axiosGet(API.UNIT.UNIT_SUMMARY(unit.id));
+    const { success, data } = await axiosGet(
+      API.UNIT.UNIT_SUMMARY(unit.id),
+      {},
+      true
+    );
     if (success && data.length) {
       setUnitSummaries(data);
     }

package/src/screens/Unit/hook/useStateAlertRemove.js

@@ -22,7 +22,9 @@ export const useStateAlertRemove = () => {
       setStateAlertRemove((state) => ({
         ...state,
         visible: true,
-        message: `${t('are_you_sure_want_to_delete', { text: brand })}`,
+        message: `${t('are_you_sure_want_to_delete', {
+          text: brand === 'google_home' ? 'Điện Quang' : brand,
+        })}`,
       }));
     },
     [t]

package/src/screens/UnitSummary/components/3PPowerConsumption/index.js

@@ -239,7 +239,7 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
       </Section>
 
       <Section type={'border'}>
-        <Text semibold style={styles.textIndoor} size={20}>
+        <Text type="H3" semibold style={styles.textIndoor}>
           {t('text_total_power_consumption')}
         </Text>
 

package/src/screens/UnitSummary/components/PowerConsumption/index.js

@@ -145,7 +145,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
       </Section>
 
       <Section type={'border'}>
-        <Text semibold style={styles.textIndoor} size={20}>
+        <Text type="H3" semibold style={styles.textIndoor}>
           {t('text_total_power_consumption')}
         </Text>
 

package/src/screens/UnitSummary/components/UvIndex/index.js

@@ -43,7 +43,12 @@ const UvIndex = memo(({ summaryDetail }) => {
         />
         <View style={styles.boxHealth}>
           <IconOutline name="alert" size={20} style={styles.iconMargin} />
-          <Text semibold color={Colors.Gray9} size={16}>
+          <Text
+            semibold
+            color={Colors.Gray9}
+            type="H4"
+            style={styles.textTitle}
+          >
             {t('Protection advices:')}
           </Text>
         </View>
@@ -56,7 +61,7 @@ const UvIndex = memo(({ summaryDetail }) => {
                   { backgroundColor: summaryDetail.uv_color },
                 ]}
               />
-              <Text color={Colors.Gray7} size={14}>
+              <Text color={Colors.Gray7} type="Body">
                 {item}
               </Text>
             </View>
@@ -119,4 +124,7 @@ const styles = StyleSheet.create({
   iconMargin: {
     marginRight: 8,
   },
+  textTitle: {
+    lineHeight: 28,
+  },
 });

package/src/screens/UnitSummary/components/WaterQuality/Item/index.js

@@ -35,9 +35,7 @@ const Item = memo((props) => {
       <Text size={24} color={color || Colors.Gray9} style={styles.textValue}>
         {value}
       </Text>
-      <Text size={12} color={Colors.Gray8}>
-        {des}
-      </Text>
+      <Text color={Colors.Gray8}>{des}</Text>
       <View style={styles.boxSvg}>
         <Text>{svgMain}</Text>
       </View>