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

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

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import ActionTemplate from '../../../commons/ActionTemplate';
+import NumberUpDownActionTemplate from '../../../commons/OneTapTemplate/NumberUpDownActionTemplate';
+import OptionsDropdownActionTemplate from '../../../commons/OneTapTemplate/OptionsDropdownActionTemplate';
+import StatesGridActionTemplate from '../../../commons/OneTapTemplate/StatesGridActionTemplate';
+import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import Routes from '../../../utils/Route';
+import NewActionWrapper from './NewActionWrapper';
+import moment from 'moment';
+
+const RenderActionItem = ({ device, item, handleOnSelectAction }) => {
+  switch (item.template) {
+    case 'on_off_button_action_template':
+    case 'one_button_action_template':
+    case 'three_button_action_template':
+    case 'OnOffSimpleActionTemplate':
+    case 'curtain_action_template':
+    case 'OnOffSmartLockActionTemplate':
+      return (
+        <ActionTemplate
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    case 'OptionsDropdownActionTemplate':
+      return (
+        <OptionsDropdownActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    case 'NumberUpDownActionTemplate':
+      return (
+        <NumberUpDownActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    case 'StatesGridActionTemplate':
+      return (
+        <StatesGridActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+const ChooseAction = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { unitId, device, automateId, index = -1 } = route?.params || {};
+  const [data, setData] = useState([]);
+  const [actions, setActions] = useState([]);
+
+  const fetchData = useCallback(async () => {
+    const { success, data: automateData } = await axiosGet(
+      API.DEVICE.DISPLAY_ACTIONS(device.id)
+    );
+
+    if (success) {
+      setData(automateData);
+    }
+  }, [device.id]);
+
+  const onSave = useCallback(async () => {
+    let list_action = [...actions];
+    list_action = list_action.map((item) => ({
+      action: item.action,
+      data: item.data,
+    }));
+    const { success } = await axiosPost(
+      API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
+      {
+        list_action,
+        unit: unitId,
+      }
+    );
+
+    success &&
+      navigate({
+        name: Routes.ScriptDetail,
+        merge: true,
+        params: { saveAt: moment().valueOf() },
+      });
+  }, [actions, navigate, unitId, automateId]);
+
+  const handleOnSelectAction = (action) => {
+    let newActions = [...actions];
+
+    if (index < 0) {
+      newActions.push(action);
+    } else {
+      newActions[index] = action; // todo Bang this case is not happening?
+    }
+    setActions(newActions);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <NewActionWrapper
+      canNext={actions.length}
+      onNext={onSave}
+      nextTitle={t('save')}
+      title={t('choose_action')}
+      name={t('set_up {name}', { name: device?.name })}
+    >
+      <View>
+        {!!data?.length &&
+          data.map((item) => (
+            <RenderActionItem
+              device={device}
+              item={item}
+              key={item.id}
+              handleOnSelectAction={handleOnSelectAction}
+            />
+          ))}
+      </View>
+    </NewActionWrapper>
+  );
+};
+export default ChooseAction;

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

@@ -0,0 +1,179 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Image, TouchableOpacity, 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 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';
+
+const ChooseConfig = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const {
+    device,
+    automate = {},
+    newCondition,
+    closeScreen,
+  } = route?.params || {};
+
+  const [configs, setConfigs] = useState([]);
+  const [checkedItem, setCheckedItem] = useState({ id: 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),
+      { params }
+    );
+
+    if (success) {
+      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]
+  );
+
+  const onPressItem = (item) => () => {
+    navigate(Routes.SetupConfigCondition, {
+      item,
+      defaultCondition: conditions[item.id],
+      closeScreen,
+    });
+  };
+
+  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
+      );
+    },
+    [automate?.type, conditions, t]
+  );
+
+  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} />
+      ) : (
+        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>
+          );
+        })
+      )}
+    </NewActionWrapper>
+  );
+};
+
+export default ChooseConfig;

package/src/screens/{AddNewAction → Automate/AddNewAction}/Components/LoadingSelectAction.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import ContentLoader, { Rect } from 'react-content-loader/native';
-import { Constants } from '../../../configs';
+import { Constants } from '../../../../configs';
 
 const LoadingSelectAction = ({ style }) => (
   <View style={style}>

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

@@ -0,0 +1,75 @@
+import { View } from 'react-native';
+import styles from '../Styles/SelectSensorDevicesStyles';
+import Text from '../../../../commons/Text';
+import NavBar from '../../../../commons/NavBar';
+import Device from '../Device';
+import React, { useCallback, useState } from 'react';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import NewActionWrapper from '../NewActionWrapper';
+
+const SelectDevices = ({
+  onPressContinue,
+  listStation,
+  listMenuItem,
+  title,
+  stations,
+  defaultSelectedDevice,
+}) => {
+  const t = useTranslations();
+
+  const [selectedDevice, setSelectedDevice] = useState(defaultSelectedDevice);
+  const [indexStation, setIndexStation] = useState(0);
+
+  const onSnapToItem = useCallback((item, index) => {
+    setIndexStation(index);
+  }, []);
+
+  const onPressDevice = (sensor) => {
+    if (selectedDevice && selectedDevice.id === sensor.id) {
+      setSelectedDevice(null);
+    } else {
+      setSelectedDevice(sensor);
+    }
+  };
+
+  return (
+    <NewActionWrapper
+      nextTitle={t('continue')}
+      onNext={() => onPressContinue(selectedDevice, indexStation)}
+      canNext={Object.keys(selectedDevice || {}).length}
+      name={title}
+    >
+      {listStation.length ? (
+        <NavBar
+          listStation={listStation}
+          listMenuItem={listMenuItem}
+          onSnapToItem={onSnapToItem}
+          indexStation={indexStation}
+          style={styles.navbar}
+        />
+      ) : (
+        <View style={styles.noneData}>
+          <Text center>
+            {t('you_do_not_have_the_device_or_have_share_control_device')}
+          </Text>
+        </View>
+      )}
+
+      <View style={styles.boxDevices}>
+        {stations[indexStation]?.sensors &&
+          stations[indexStation].sensors.map((sensor) => (
+            <Device
+              svgMain={sensor.icon || 'sensor'}
+              title={sensor.name}
+              sensor={sensor}
+              isSelectDevice={selectedDevice && selectedDevice.id === sensor.id}
+              onPress={onPressDevice}
+              key={sensor.id}
+            />
+          ))}
+      </View>
+    </NewActionWrapper>
+  );
+};
+
+export default SelectDevices;

package/src/screens/{AddNewAction → Automate/AddNewAction}/Device/DeviceStyles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Colors, Constants } from '../../../configs';
+import { Colors, Constants } from '../../../../configs';
 
 const marginItem = 12;
 const marginHorizontal = 16;
@@ -40,4 +40,8 @@ export default StyleSheet.create({
     height: 40,
     resizeMode: 'contain',
   },
+  antIconStyle: {
+    width: 40,
+    height: 40,
+  },
 });

package/src/screens/{AddNewAction → Automate/AddNewAction}/Device/__test__/index.test.js

@@ -2,9 +2,9 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableWithoutFeedback } from 'react-native';
 
-import Device from '..';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
+import Device from '../index';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
 
 const wrapComponent = (svgMain, sensor, title, isSelectDevice, onPress) => (
   <SCProvider initState={mockSCStore({})}>
@@ -25,7 +25,7 @@ describe('Test SelectDevice', () => {
     const sensor = { id: 1, name: 'sensor' };
     const mockFuntion = jest.fn();
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         wrapComponent(sensor.icon_kit, sensor, sensor.name, true, mockFuntion)
       );
     });

package/src/screens/{AddNewAction → Automate/AddNewAction}/Device/index.js

@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
-import { Colors } from '../../../configs';
-import Text from '../../../commons/Text';
-import IconComponent from '../../../commons/IconComponent';
-import { AccessibilityLabel } from '../../../configs/Constants';
+import { Colors } from '../../../../configs';
+import Text from '../../../../commons/Text';
+import IconComponent from '../../../../commons/IconComponent';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import styles from './DeviceStyles';
 
 const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
@@ -23,6 +23,7 @@ const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
           <IconComponent
             icon={sensor?.icon_kit || svgMain}
             style={styles.iconSensor}
+            antIconStyle={styles.antIconStyle}
           />
         </View>
         <Text numberOfLines={1} semibold type="Body" color={Colors.Gray9}>

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

@@ -0,0 +1,56 @@
+import React, { useCallback, useMemo } from 'react';
+import { KeyboardAvoidingView, Platform, TouchableOpacity } from 'react-native';
+
+import styles from './Styles/SelectActionStyles';
+import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
+import { Icon } from '@ant-design/react-native';
+import { Colors } from '../../../configs';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { AccessibilityLabel } from '../../../configs/Constants';
+
+const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
+  const { navigate } = useNavigation();
+  const { params = {} } = useRoute();
+  const { closeScreen } = params;
+
+  const handleClose = useCallback(() => {
+    navigate(closeScreen);
+  }, [closeScreen, navigate]);
+
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity
+        style={styles.closeButton}
+        onPress={handleClose}
+        accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
+      >
+        <Icon name={'close'} size={24} color={Colors.Black} />
+      </TouchableOpacity>
+    ),
+    [handleClose]
+  );
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.wrap}
+    >
+      <WrapHeaderScrollable
+        title={name}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+      >
+        {children}
+      </WrapHeaderScrollable>
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={nextTitle}
+        onPressMain={onNext}
+        typeMain={canNext ? 'primary' : 'disabled'}
+      />
+    </KeyboardAvoidingView>
+  );
+};
+
+export default NewActionWrapper;

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

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { fetchWithCache } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import Routes from '../../../utils/Route';
+import SelectDevices from './Components/SelectDevices';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const SelectControlDevices = ({ route }) => {
+  const t = useTranslations();
+  const { unitId, closeScreen, automateId } = route?.params || {};
+
+  const [stations, setStations] = useState([]);
+  const [listStation, setListStation] = useState([]);
+  const [listMenuItem, setListMenuItem] = useState([]);
+
+  const { navigate } = useNavigation();
+  const [loading, setLoading] = useState(true);
+
+  const fetchDetails = useCallback(async () => {
+    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unitId), {}, (response) => {
+      const { success, data } = response;
+      if (success) {
+        const newData = data.filter((item) => item.sensors.length > 0);
+        const listMenu = newData.map((item, index) => ({
+          text: item.name,
+          station: item,
+          index: index,
+        }));
+        setStations(newData);
+        setListMenuItem(listMenu);
+        setListStation(listMenu);
+      }
+    });
+    setLoading(false);
+  }, [unitId]);
+
+  useEffect(() => {
+    fetchDetails();
+  }, [fetchDetails]);
+
+  const onPressContinue = useCallback(
+    (selectedDevice) => {
+      navigate(Routes.ChooseAction, {
+        unitId,
+        automateId,
+        device: selectedDevice,
+        closeScreen,
+      });
+    },
+    [navigate, unitId, automateId, closeScreen]
+  );
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <SelectDevices
+      onPressContinue={onPressContinue}
+      listStation={listStation}
+      listMenuItem={listMenuItem}
+      stations={stations}
+      title={t('select_device')}
+    />
+  );
+};
+
+export default SelectControlDevices;