@eohjsc/react-native-smart-city 0.4.59 → 0.4.61

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.59",
+  "version": "0.4.61",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -37,7 +37,6 @@
     "android-deploy-test": "bundle exec fastlane android beta",
     "reset-cache": "react-native start --reset-cache",
     "merge_conflict": "yarn jest && yarn update_coverage_result && yarn check_coverage_config",
-    "jest": "jest --detectOpenHandles",
     "jest1": "jest --detectOpenHandles --coverage=0",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",

package/src/commons/Action/ItemQuickAction.js

@@ -18,7 +18,7 @@ const ItemQuickAction = memo(
       interval,
       will_auto_update_status,
     } = quick_action || {};
-    const [action, setAction] = useState(sensor.action);
+    const [action, setAction] = useState(sensor?.action);
     // eslint-disable-next-line no-unused-vars
     const [configValues, _] = useConfigGlobalState('configValues');
     const [isOn, setIsOn] = useState(false);

package/src/commons/Action/__test__/ItemQuickAction.test.js

@@ -8,7 +8,6 @@ import { factory } from 'factory-girl';
 import IconComponent from '../../IconComponent';
 import { IconOutline } from '@ant-design/icons-react-native';
 import Toast from 'react-native-toast-message';
-
 class Sensor {}
 
 factory.define('Sensor', Sensor, {});
@@ -63,21 +62,17 @@ describe('Test ItemQuickAction', () => {
   });
 
   it('render with no action', async () => {
-    const newSensor = await factory.build('Sensor');
     await act(async () => {
-      tree = await create(<ItemQuickAction sensor={newSensor} />);
+      tree = await create(<ItemQuickAction />);
     });
     const instance = tree.root;
-    const buttonOnActionPress = instance.find(
+    const buttonOnActionPress = instance.findAll(
       (el) =>
         el.props.accessibilityLabel ===
           `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
-    await act(async () => {
-      await buttonOnActionPress.props.onPress();
-    });
-    expect(Toast.show).not.toBeCalled();
+    expect(buttonOnActionPress).toHaveLength(0);
   });
 
   it('click quick action icon down , isSendingCommand = true', async () => {
@@ -244,4 +239,23 @@ describe('Test ItemQuickAction', () => {
     expect(icon.props.icon).toEqual(sensor.quick_action.off_action.icon);
     expect(icon.props.icon).not.toEqual(sensor.quick_action.on_action.icon);
   };
+  it('render quick action only show status can not control', async () => {
+    sensor.quick_action.off_action = null;
+    sensor.quick_action.on_action = null;
+
+    await act(async () => {
+      tree = await create(<ItemQuickAction sensor={sensor} />);
+    });
+    const instance = tree.root;
+    const buttonOnActionPress = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonOnActionPress.props.onPress();
+    });
+    expect(Toast.show).not.toBeCalled();
+  });
 });

package/src/commons/Automate/ItemAutomate.js

@@ -20,11 +20,11 @@ const ItemAutomate = ({
   const item = AUTOMATES[automate?.type];
   const isItemOneTap = AUTOMATES[automate?.type] === AUTOMATES.one_tap;
   const Icon = item?.icon;
-  const valueEvaluation = useGetEvaluateValue(automate?.config);
+  const valueEvaluations = useGetEvaluateValue(automate?.config, automate.unit);
 
   const textCondition = useMemo(() => {
-    return generateAutomationConditionText(automate, valueEvaluation, t);
-  }, [automate, t, valueEvaluation]);
+    return generateAutomationConditionText(automate, valueEvaluations, t);
+  }, [automate, t, valueEvaluations]);
 
   const renderText = useMemo(() => {
     if (textCondition) {
@@ -45,12 +45,7 @@ const ItemAutomate = ({
       return;
     }
 
-    setSelectedIndex((currentIndex) => {
-      if (currentIndex !== index) {
-        return index;
-      }
-      return -1;
-    });
+    setSelectedIndex(index);
   }, [index, setSelectedIndex, onPress]);
 
   return (

package/src/commons/Button/index.js

@@ -121,10 +121,10 @@ const TextSize = {
 // Type
 // auth, primary, info, cancel, disabled, disabledBorder, primaryBorder, alert, alertBorder, underline, setupBorder
 
-export default ({
+const Button = ({
   title,
   onPress,
-  width,
+  width = 100,
   height = 48,
   activeOpacity,
   type,
@@ -178,6 +178,8 @@ export default ({
   );
 };
 
+export default Button;
+
 const styles = StyleSheet.create({
   button: {
     width: '100%',

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

@@ -9,43 +9,57 @@ import IconComponent from '../../IconComponent';
 import images from '../../../configs/Images';
 import FImage from '../../FImage';
 
-const CurrentRainSensor = memo(({ data = [], isWidgetOrder }) => {
-  const item = data.length
-    ? data[0]
-    : {
-        evaluate: {},
-      };
-  const { text, backgroundColor, borderColor, icon, icon_kit_data } =
-    item.evaluate || {};
+const CurrentRainSensor = memo(
+  ({
+    data = [],
+    isWidgetOrder,
+    size = 180,
+    textType = 'H2',
+    iconSize = 30,
+  }) => {
+    const item = data.length
+      ? data[0]
+      : {
+          evaluate: {},
+        };
+    const { text, backgroundColor, borderColor, icon, icon_kit_data } =
+      item.evaluate || {};
 
-  return (
-    <View style={[styles.standard, isWidgetOrder && styles.marginBottomZero]}>
-      <CircleView
-        size={190}
-        backgroundColor={backgroundColor}
-        borderWidth={2}
-        borderColor={borderColor}
-        style={styles.center}
-      >
-        <LinearGradient
-          style={styles.linearView}
-          colors={[Colors.TransparentWhite, 'white']}
-          start={{ x: 1, y: 0 }}
-          end={{ x: 1, y: 1 }}
-        />
-        {icon_kit_data?.icon || icon ? (
-          <IconComponent icon={icon_kit_data?.icon || icon} />
-        ) : (
-          <FImage
-            source={images.activeCurrentSensor}
-            style={styles.iconDefault}
+    return (
+      <View style={[styles.standard, isWidgetOrder && styles.marginBottomZero]}>
+        <CircleView
+          size={size}
+          backgroundColor={backgroundColor}
+          borderWidth={2}
+          borderColor={borderColor}
+          style={styles.center}
+        >
+          <LinearGradient
+            style={styles.linearView}
+            colors={[Colors.TransparentWhite, 'white']}
+            start={{ x: 1, y: 0 }}
+            end={{ x: 1, y: 1 }}
           />
-        )}
-        <Text style={styles.text}>{text}</Text>
-      </CircleView>
-    </View>
-  );
-});
+          {icon_kit_data?.icon || icon ? (
+            <IconComponent
+              size={iconSize}
+              iconSize={iconSize}
+              icon={icon_kit_data?.icon || icon}
+            />
+          ) : (
+            <FImage
+              source={images.activeCurrentSensor}
+              style={styles.iconDefault}
+            />
+          )}
+          <Text type={textType} style={styles.text}>
+            {text}
+          </Text>
+        </CircleView>
+      </View>
+    );
+  }
+);
 
 export default CurrentRainSensor;
 
@@ -76,7 +90,6 @@ const styles = StyleSheet.create({
   text: {
     marginTop: 8,
     lineHeight: 32,
-    fontSize: 24,
   },
   iconDefault: {
     width: 37,

package/src/commons/Grid/GridItem.js

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import styles from './GridItemStyles';
+
+const GridItem = memo(
+  ({ icon, accessibilityLabel, selected, onPress, item, children }) => {
+    const isActive = selected && styles.active;
+
+    return (
+      <TouchableWithoutFeedback
+        onPress={() => onPress && onPress(item)}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <View style={[styles.container, isActive]}>{children}</View>
+      </TouchableWithoutFeedback>
+    );
+  }
+);
+
+export default GridItem;

package/src/commons/Grid/GridItemStyles.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { Constants, Colors } from '../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 16;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+
+export default StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 4,
+    width: widthItem,
+    backgroundColor: Colors.White,
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  active: {
+    borderColor: Colors.Primary,
+    borderWidth: 2,
+  },
+  lineHeight22: {
+    lineHeight: 22,
+  },
+});

package/src/configs/API.js

@@ -181,8 +181,6 @@ const API = {
     SET_READ: (id) => `/notifications/eoh/${id}/set_read/`,
   },
   VALUE_EVALUATIONS: () => '/property_manager/config_value_evaluations/',
-  FETCH_VALUE_EVALUATION: (id) =>
-    `/property_manager/config_value_evaluations/${id}/`,
   EXTERNAL: {
     GOOGLE_MAP: {
       AUTO_COMPLETE:

package/src/configs/Constants.js

@@ -119,7 +119,6 @@ export const AUTOMATE_TYPE = {
   ONE_TAP: 'one_tap',
   VALUE_CHANGE: 'value_change',
   SCHEDULE: 'schedule',
-  EVENT: 'event',
 };
 
 export const AUTOMATE_TABS = {

package/src/context/actionType.ts

@@ -24,6 +24,7 @@ export const Action = {
   CHANGE_HOME_ASSISTANT_CONN_STATE: 'CHANGE_HOME_ASSISTANT_CONN_STATE',
   SET_LG_THINQ_CONNECTED: 'SET_LG_THINQ_CONNECTED',
   UPDATE_VALUE_EVALUATIONS: 'UPDATE_VALUE_EVALUATIONS',
+  INIT_VALUE_EVALUATIONS: 'INIT_VALUE_EVALUATIONS',
   NEED_UPDATE_VALUE_EVALUATIONS: 'NEED_UPDATE_VALUE_EVALUATIONS',
   ON_RECEIVE_NOTIFICATION: 'ON_RECEIVE_NOTIFICATION',
   SET_DEVICES_STATUS: 'SET_DEVICES_STATUS',

package/src/context/reducer.ts

@@ -416,13 +416,31 @@ export const reducer = (currentState: ContextData, action: Action) => {
           data,
           (dict, item) => {
             item.configs.map((configId) => {
-              dict[configId] = item;
+              if (!dict[configId]) {
+                dict[configId] = [item];
+              } else {
+                dict[configId] = [...dict[configId], item];
+              }
             });
             return dict;
           },
           currentState.valueEvaluations
         ),
       };
+
+    case Action.INIT_VALUE_EVALUATIONS:
+      // eslint-disable-next-line no-case-declarations
+      const { configId } = payload;
+      // eslint-disable-next-line no-case-declarations
+      const valueEvaluations = currentState.valueEvaluations || {};
+      if (valueEvaluations[configId] === undefined) {
+        valueEvaluations[configId] = [];
+      }
+      return {
+        ...currentState,
+        valueEvaluations,
+      };
+
     case Action.NEED_UPDATE_VALUE_EVALUATIONS:
       return {
         ...currentState,

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

@@ -57,8 +57,6 @@ const RenderActionItem = ({ device, item, handleOnSelectAction, index }) => {
           onSelectAction={handleOnSelectAction}
         />
       );
-    default:
-      return null;
   }
 };
 

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

@@ -1,47 +1,29 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Image, TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Text from '../../../commons/Text';
 import { axiosGet } from '../../../utils/Apis/axios';
-import { API, Colors, Images } from '../../../configs';
+import { API, Colors } from '../../../configs';
 import Routes from '../../../utils/Route';
 import styles from './Styles/SelectActionStyles';
-import { TitleCheckBox } from '../../Sharing/Components';
 import { LoadingSelectAction } from './Components';
-import { ToastBottomHelper } from '../../../utils/Utils';
-import {
-  generateAutomationConditionText,
-  generateAutomationDataConditionText,
-} from '../ScriptDetail/utils';
-import { useSCContextSelector } from '../../../context';
 import { AUTOMATE_TYPE } from '../../../configs/Constants';
 import NewActionWrapper from './NewActionWrapper';
+import GridItem from '../../../commons/Grid/GridItem';
 
 const ChooseConfig = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const {
-    device,
-    automate = {},
-    newCondition,
-    closeScreen,
-  } = route?.params || {};
+  const { device, automate = {}, closeScreen } = route?.params || {};
 
   const [configs, setConfigs] = useState([]);
-  const [checkedItem, setCheckedItem] = useState({ id: automate?.config_id });
+  const [selectedConfigId, setSelectedConfigId] = useState(automate?.config_id);
   const [isLoading, setIsLoading] = useState(false);
-  const valueEvaluations = useSCContextSelector((state) => {
-    return state.valueEvaluations;
-  });
-  const [conditions, setConditions] = useState({});
   const fetchData = useCallback(async () => {
     setIsLoading(true);
     const params = {};
-    if (automate?.type === AUTOMATE_TYPE.EVENT) {
-      params.type = 'event';
-    }
 
     const { success, data: automateData } = await axiosGet(
       API.AUTOMATE.DISPLAY_CONFIGS(device.id),
@@ -52,157 +34,60 @@ const ChooseConfig = ({ route }) => {
       setConfigs(automateData);
     }
     setIsLoading(false);
-  }, [device.id, automate?.type]);
-
-  const onSave = useCallback(() => {
-    let condition = conditions[checkedItem?.id];
-    const isDefault =
-      automate?.config_id && automate?.config_id === checkedItem?.id;
-    if (!condition && !isDefault) {
-      ToastBottomHelper.error(t('please_choose_condition_before_continue'));
-      return;
-    }
-
-    navigate(Routes.ValueChangeName, {
-      automate: {
-        ...automate,
-        ...condition,
-      },
-      closeScreen,
-    });
-  }, [conditions, checkedItem?.id, navigate, automate, closeScreen, t]);
-
-  const onChecked = useCallback(
-    (_, isChecked, id) => {
-      setCheckedItem(isChecked ? configs.find((i) => i?.id === id) : {});
-    },
-    [configs]
-  );
+  }, [device.id]);
 
-  const renderCondition = useCallback(
-    (item) => {
-      return generateAutomationDataConditionText(
-        automate?.type,
-        item.name,
-        conditions[item.id],
-        item.value_evaluation || {
-          // backward compatible
-          template: item.evaluate_template,
-          configuration: item.evaluate_configuration,
-        },
-        t
-      );
+  const goToSetupConfig = useCallback(
+    (config) => {
+      setSelectedConfigId(config?.id);
+      automate.config = config?.id;
+      navigate(Routes.SetupConfigCondition, {
+        config,
+        automate,
+        closeScreen,
+      });
     },
-    [automate?.type, conditions, t]
-  );
-
-  const renderConfigs = useCallback(
-    (configs) => {
-      const onPressItem = (item) => () => {
-        navigate(Routes.SetupConfigCondition, {
-          item,
-          defaultCondition: conditions[item.id],
-          closeScreen,
-        });
-      };
-      if (configs.length) {
-        return configs.map((item) => {
-          const hasCondition = conditions[item.id];
-          const isChecked = checkedItem?.id === item?.id;
-          const isDefault = automate?.config_id === item?.id;
-          return (
-            <View style={styles.wrapItem} key={item?.id}>
-              <TitleCheckBox
-                onPress={onChecked}
-                id={item?.id}
-                title={item?.name}
-                titleStyle={styles.titleStyle}
-                wrapStyle={styles.wrapStyleCheckBox}
-                isChecked={isChecked}
-              />
-              <TouchableOpacity
-                onPress={onPressItem(item)}
-                style={[styles.wrapCondition, styles.shadowView]}
-                accessibilityLabel={`config-${item.id}`}
-              >
-                <Text type="Body" color={Colors.Gray7}>
-                  {t('condition')}
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  type="H4"
-                  semibold={isChecked}
-                  style={styles.description}
-                >
-                  {hasCondition
-                    ? renderCondition(item)
-                    : isDefault
-                    ? generateAutomationConditionText(
-                        automate,
-                        valueEvaluations[automate?.config_id],
-                        t
-                      )
-                    : t('no_condition')}
-                </Text>
-                {hasCondition && (
-                  <Image source={Images.arrowBack} style={styles.arrowRight} />
-                )}
-              </TouchableOpacity>
-            </View>
-          );
-        });
-      } else {
-        return (
-          <View style={styles.textCenter}>
-            <Text type="Body" center color={Colors.Gray7}>
-              {t('end_device_not_support_script', {
-                not_support: t(automate?.type),
-                support:
-                  automate?.type === AUTOMATE_TYPE.EVENT
-                    ? t(AUTOMATE_TYPE.VALUE_CHANGE)
-                    : t(AUTOMATE_TYPE.EVENT),
-              })}
-            </Text>
-          </View>
-        );
-      }
-    },
-    [
-      automate,
-      checkedItem?.id,
-      closeScreen,
-      conditions,
-      navigate,
-      onChecked,
-      renderCondition,
-      t,
-      valueEvaluations,
-    ]
+    [automate, closeScreen, navigate]
   );
 
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
-  useEffect(() => {
-    newCondition &&
-      setConditions((prev) => ({
-        ...prev,
-        [newCondition.config]: newCondition,
-      }));
-  }, [newCondition]);
-
   return (
     <NewActionWrapper
       name={t('set_up {name}', { name: device?.name })}
       nextTitle={t('continue')}
-      onNext={onSave}
-      canNext={checkedItem?.id}
     >
-      {isLoading ? (
-        <LoadingSelectAction style={styles.container} />
-      ) : (
-        renderConfigs(configs)
+      {isLoading && <LoadingSelectAction style={styles.container} />}
+      {!isLoading && !configs.length && (
+        <View style={styles.textCenter}>
+          <Text type="Body" center color={Colors.Gray7}>
+            {t('end_device_not_support_script', {
+              not_support: t(automate?.type),
+              support:
+                automate?.type === AUTOMATE_TYPE.EVENT
+                  ? t(AUTOMATE_TYPE.VALUE_CHANGE)
+                  : t(AUTOMATE_TYPE.EVENT),
+            })}
+          </Text>
+        </View>
+      )}
+      {!isLoading && (
+        <View style={styles.boxDevices}>
+          {configs.map((config) => (
+            <GridItem
+              selected={config?.id === selectedConfigId}
+              onPress={goToSetupConfig}
+              item={config}
+              accessibilityLabel={`config-${config?.id}`}
+              key={config?.id}
+            >
+              <Text numberOfLines={1} semibold type="Body" color={Colors.Gray9}>
+                {config.name}
+              </Text>
+            </GridItem>
+          ))}
+        </View>
       )}
     </NewActionWrapper>
   );

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

@@ -30,15 +30,11 @@ const SelectDevices = ({
     } else {
       setSelectedDevice(sensor);
     }
+    onPressContinue(sensor, indexStation);
   };
 
   return (
-    <NewActionWrapper
-      nextTitle={t('continue')}
-      onNext={() => onPressContinue(selectedDevice, indexStation)}
-      canNext={Object.keys(selectedDevice || {}).length}
-      name={title}
-    >
+    <NewActionWrapper name={title}>
       {listStation.length ? (
         <NavBar
           listStation={listStation}

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

@@ -11,6 +11,8 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import { HeaderCustom } from '../../../commons';
 
 const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
+  const hasNext =
+    canNext !== undefined || onNext !== undefined || nextTitle !== undefined;
   const { navigate } = useNavigation();
   const { params = {} } = useRoute();
   const { closeScreen } = params;
@@ -42,12 +44,14 @@ const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
         wrapTitleStyle={styles.wrapTitleStyle}
       />
       <KeyboardAwareScrollView>{children}</KeyboardAwareScrollView>
-      <BottomButtonView
-        style={styles.bottomButtonView}
-        mainTitle={nextTitle}
-        onPressMain={onNext}
-        typeMain={canNext ? 'primary' : 'disabled'}
-      />
+      {hasNext && (
+        <BottomButtonView
+          style={styles.bottomButtonView}
+          mainTitle={nextTitle}
+          onPressMain={onNext}
+          typeMain={canNext ? 'primary' : 'disabled'}
+        />
+      )}
     </View>
   );
 };

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

@@ -30,6 +30,7 @@ const SelectMonitorDevices = ({ route }) => {
       configs,
       (response) => {
         const { success, data } = response;
+
         if (success) {
           const newData = data.filter((item) => item.sensors.length > 0);
           const listMenu = newData.map((item, index) => ({