@eohjsc/react-native-smart-city 0.2.26 → 0.2.27

package/src/navigations/UnitStack.js

@@ -2,6 +2,8 @@ import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { get } from 'lodash';
+
 import { useTranslations } from '../hooks/Common/useTranslations';
 import { Colors, Device } from '../configs';
 import Route from '../utils/Route';
@@ -22,7 +24,6 @@ import TDSGuide from '../screens/TDSGuide';
 import WaterQualityGuide from '../screens/WaterQualityGuide';
 import DeviceInfo from '../screens/DeviceInfo';
 import AddNewOneTap from '../screens/AddNewOneTap';
-import AddNewScriptAction from '../screens/AddNewScriptAction';
 import AddNewAutoSmart from '../screens/AddNewAutoSmart';
 import PlaybackCamera from '../screens/PlayBackCamera';
 import AllCamera from '../screens/AllCamera';
@@ -30,10 +31,12 @@ import ManageAccessScreen from '../screens/ManageAccess';
 import GuestInfo from '../screens/GuestInfo';
 import ScriptDetail from '../screens/ScriptDetail';
 import EditActionsList from '../screens/EditActionsList';
-import SelectDevice from '../screens/AddNewAction/SelectDevice';
+import SelectUnit from '../screens/SelectUnit';
+import SetSchedule from '../screens/SetSchedule';
+import SelectSensorDevices from '../screens/AddNewAction/SelectSensorDevices';
 import SelectAction from '../screens/AddNewAction/SelectAction';
-
-import _ from 'lodash';
+import EditSubUnit from '../screens/SubUnit/EditSubUnit';
+import SetUpSensor from '../screens/AddNewAction/SetupSensor';
 
 const Stack = createStackNavigator();
 
@@ -63,7 +66,7 @@ export const UnitStack = memo((props) => {
       <Stack.Screen
         name={Route.UnitDetail}
         component={UnitDetail}
-        initialParams={_.get(props, 'route.params', null)}
+        initialParams={get(props, 'route.params', null)}
         options={{ headerShown: false }}
       />
       <Stack.Screen
@@ -101,11 +104,16 @@ export const UnitStack = memo((props) => {
         }}
       />
       <Stack.Screen
+        name={Route.ManageSubUnit}
+        component={ManageSubUnit}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={Route.EditSubUnit}
+        component={EditSubUnit}
         options={{
           headerTitle: '',
         }}
-        name={Route.ManageSubUnit}
-        component={ManageSubUnit}
       />
       <Stack.Screen
         name={Route.DeviceDetail}
@@ -208,6 +216,7 @@ export const UnitStack = memo((props) => {
         component={ScriptDetail}
         options={{
           headerShown: false,
+          gestureEnabled: false,
         }}
       />
       <Stack.Screen
@@ -218,15 +227,18 @@ export const UnitStack = memo((props) => {
         }}
       />
       <Stack.Screen
-        name={Route.AddNewScriptAction}
-        component={AddNewScriptAction}
-        options={{
-          headerShown: false,
-        }}
+        name={Route.SelectSensorDevices}
+        component={SelectSensorDevices}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={Route.SelectUnit}
+        component={SelectUnit}
+        options={{ headerShown: false }}
       />
       <Stack.Screen
-        name={Route.SelectDevice}
-        component={SelectDevice}
+        name={Route.SetUpSensor}
+        component={SetUpSensor}
         options={{ headerShown: false }}
       />
       <Stack.Screen
@@ -234,6 +246,13 @@ export const UnitStack = memo((props) => {
         component={SelectAction}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name={Route.SetSchedule}
+        component={SetSchedule}
+        options={{
+          headerShown: false,
+        }}
+      />
     </Stack.Navigator>
   );
 });

package/src/navigations/utils.js

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { CardStyleInterpolators } from '@react-navigation/stack';
+import { StackActions } from '@react-navigation/native';
 
 // NavigationContainer is referred here - Check NavigationStack
 export const navigationRef = React.createRef();
@@ -11,6 +13,12 @@ export function goBack() {
   navigationRef.current?.goBack();
 }
 
+export const screenOptions = {
+  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+};
+
+export const popAction = (value) => StackActions.pop(value);
+
 export default {
   navigate,
   goBack,

package/src/screens/AddNewAction/Components/LoadingSelectAction.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+import ContentLoader, { Rect } from 'react-content-loader/native';
+import { Constants } from '../../../configs';
+
+const LoadingSelectAction = ({ style }) => (
+  <View style={style}>
+    <ContentLoader>
+      <Rect x="16" y="40" rx="10" ry="10" width={120} height="20" />
+      <Rect
+        x="16"
+        y="76"
+        rx="10"
+        ry="10"
+        width={Constants.width - 32}
+        height="70"
+      />
+      <Rect x="16" y="178" rx="10" ry="10" width={120} height="20" />
+      <Rect
+        x="16"
+        y="214"
+        rx="10"
+        ry="10"
+        width={Constants.width - 32}
+        height="70"
+      />
+      <Rect x="16" y="316" rx="10" ry="10" width={120} height="20" />
+      <Rect
+        x="16"
+        y="352"
+        rx="10"
+        ry="10"
+        width={Constants.width - 32}
+        height="70"
+      />
+    </ContentLoader>
+  </View>
+);
+
+export default LoadingSelectAction;

package/src/screens/AddNewAction/Components/index.js

@@ -0,0 +1,3 @@
+import LoadingSelectAction from './LoadingSelectAction';
+
+export { LoadingSelectAction };

package/src/screens/AddNewAction/SelectAction.js

@@ -1,55 +1,80 @@
-import React, {
-  memo,
-  useCallback,
-  useEffect,
-  useState,
-  useContext,
-} from 'react';
-import { ScrollView, View } from 'react-native';
+import React, { memo, useCallback, useEffect, useState, useMemo } from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import { Icon } from '@ant-design/react-native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { SCContext } from '../../context';
-import { Action } from '../../context/actionType';
-import { HeaderCustom } from '../../commons/Header';
 import BottomButtonView from '../../commons/BottomButtonView';
 import Text from '../../commons/Text';
 import ActionTemplate from '../../commons/ActionTemplate';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
-import { API } from '../../configs';
+import { API, Images } from '../../configs';
 import { TESTID } from '../../configs/Constants';
 import Routes from '../../utils/Route';
 import styles from './Styles/SelectActionStyles';
 import moment from 'moment';
+import { Colors } from '../../configs';
+import { TitleCheckBox } from '../Sharing/Components';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { popAction } from '../../navigations/utils';
+import { LoadingSelectAction } from './Components';
 
 const SelectAction = memo(({ route }) => {
   const t = useTranslations();
-  const { navigate } = useNavigation();
-  const { unit, device, stationName, automateId, scriptName } = route.params;
-  const { setAction } = useContext(SCContext);
+  const { navigate, dispatch } = useNavigation();
+  const {
+    unit,
+    device,
+    automateId,
+    scriptName,
+    isScript = false,
+    type,
+  } = route.params;
   const [data, setData] = useState([]);
   const [actions, setActions] = useState({
     name: '',
     action: '',
   });
+  const [sensorData, setSensorData] = useState([]);
+  const [checkedItem, setCheckedItem] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
 
   const fetchData = useCallback(async () => {
+    setIsLoading(true);
     const { success, data } = await axiosGet(
-      API.SENSOR.DISPLAY_ACTIONS(device.id),
-      {},
-      true
+      isScript
+        ? API.AUTOMATE.GET_SENSOR_CONFIG(device.id)
+        : API.SENSOR.DISPLAY_ACTIONS(device.id),
+      isScript && {},
+      isScript && true
     );
     if (success) {
-      setData(data);
+      isScript ? setSensorData(data) : setData(data);
     }
-  }, [device.id]);
+    const to = setTimeout(() => {
+      setIsLoading(false);
+      clearTimeout(to);
+    }, 1000);
+  }, [device.id, isScript]);
 
   const onSave = useCallback(async () => {
-    if (automateId) {
+    if (isScript) {
+      const itemTemp = sensorData.find((i) => i.id === checkedItem?.id);
+      navigate(Routes.AddNewOneTap, {
+        automateData: {
+          condition: itemTemp?.conditionValue || '<',
+          value: itemTemp?.value,
+          config: itemTemp?.id,
+        },
+        type,
+        unit,
+      });
+    } else {
       const { success } = await axiosPost(
         API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
         {
           action: actions.action,
+          unit: unit.id,
         }
       );
       if (success) {
@@ -59,44 +84,52 @@ const SelectAction = memo(({ route }) => {
           havePermission: true,
           unit,
           dateNow: moment().valueOf(), // TODO will remove dateNow later
+          type: type,
         });
       }
-    } else {
-      setAction(Action.LIST_ACTION, {
-        action: actions.action,
-        unit_name: unit.name,
-        action_name: actions.name,
-        sensor_name: device.name,
-        sensor_icon_kit: device.icon_kit,
-        station_name: stationName,
-      });
-      navigate(Routes.AddNewScriptAction, {
-        automateType: 'one-tap',
-        name: scriptName,
-        unit,
-      });
     }
   }, [
     actions.action,
-    actions.name,
     automateId,
-    device.icon_kit,
-    device.name,
     navigate,
     scriptName,
-    setAction,
-    stationName,
+    type,
     unit,
+    isScript,
+    checkedItem,
+    sensorData,
   ]);
 
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
   const handleOnSelectAction = (action) => {
     setActions({ ...action });
   };
 
+  const handleClose = useCallback(() => {
+    isScript ? dispatch(popAction(3)) : alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isScript, t]);
+
+  const onChecked = useCallback(
+    (_, isChecked, id) => {
+      setCheckedItem(isChecked ? sensorData.find((i) => i?.id === id) : {});
+    },
+    [sensorData]
+  );
+
+  const onPressItem = (item) => () => {
+    navigate(Routes.SetUpSensor, { item, sensorData, setSensorData });
+  };
+
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
+        <Icon name={'close'} size={24} color={Colors.Black} />
+      </TouchableOpacity>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
   const RenderActionItem = ({ data }) => {
     const actionTemplate = [];
 
@@ -123,28 +156,80 @@ const SelectAction = memo(({ route }) => {
     );
   };
 
-  return (
-    <View style={styles.wrap}>
-      <HeaderCustom isShowClose />
-      <ScrollView
-        style={styles.wrap}
-        contentContainerStyle={styles.contentContainerStyle}
-      >
-        <Text bold type="H2" style={styles.title}>
-          {t('set_up {name}', {
-            name: device.name,
-          })}
-        </Text>
-
-        <RenderActionItem data={data} testID={TESTID.ACTION_ITEM} />
-      </ScrollView>
-
+  const renderBottomButtonView = useMemo(
+    () => (
       <BottomButtonView
         style={styles.bottomButtonView}
-        mainTitle={t('save')}
+        mainTitle={t(isScript ? 'continue' : 'save')}
         onPressMain={onSave}
-        typeMain={actions?.action ? 'primary' : 'disabled'}
+        typeMain={actions?.action || !!checkedItem?.id ? 'primary' : 'disabled'}
       />
+    ),
+    [onSave, actions, checkedItem, isScript, t]
+  );
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('set_up {name}', { name: device?.name })}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+      >
+        {isScript ? (
+          isLoading ? (
+            <LoadingSelectAction style={styles.container} />
+          ) : (
+            sensorData.map((item) => {
+              const isHasValue = !!item?.value;
+              return (
+                <View style={styles.wrapItem} key={item?.id}>
+                  <TitleCheckBox
+                    onPress={onChecked}
+                    id={item?.id}
+                    title={item?.name}
+                    titleStyle={styles.titleStyle}
+                    wrapStyle={styles.wrapStyleCheckBox}
+                    isChecked={checkedItem?.id === item?.id}
+                  />
+                  <TouchableOpacity
+                    onPress={onPressItem(item)}
+                    style={[styles.wrapCondition, styles.shadowView]}
+                  >
+                    <Text type="Body" color={Colors.Gray7}>
+                      {t('condition')}
+                    </Text>
+                    <Text
+                      numberOfLines={1}
+                      type="H4"
+                      semibold={isHasValue}
+                      style={styles.description}
+                    >
+                      {isHasValue
+                        ? `${item?.name} ${
+                            item?.title ? item.title : t('is_below') + ' (<)'
+                          } ${item.value} ${item?.unit}`
+                        : `${t('no')} ${t('condition')}`}
+                    </Text>
+                    {isHasValue && (
+                      <Image
+                        source={Images.arrowBack}
+                        style={styles.arrowRight}
+                      />
+                    )}
+                  </TouchableOpacity>
+                </View>
+              );
+            })
+          )
+        ) : (
+          <RenderActionItem data={data} testID={TESTID.ACTION_ITEM} />
+        )}
+      </WrapHeaderScrollable>
+      {renderBottomButtonView}
     </View>
   );
 });

package/src/screens/AddNewAction/{SelectDevice.js → SelectSensorDevices.js}

@@ -11,18 +11,27 @@ import Device from './Device';
 import BottomButtonView from '../../commons/BottomButtonView';
 import { HeaderCustom } from '../../commons/Header';
 import Routes from '../../utils/Route';
-import styles from './Styles/SelectDeviceStyles';
+import styles from './Styles/SelectSensorDevicesStyles';
+import { AUTOMATE_SELECT } from '../../configs/Constants';
+import { popAction } from '../../navigations/utils';
 
-const SelectDevice = memo(({ route }) => {
+const SelectSensorDevices = memo(({ route }) => {
   const t = useTranslations();
-  const { unit, automateId, scriptName } = route.params;
+  const {
+    unit,
+    automateId,
+    title = AUTOMATE_SELECT.SELECT_DEVICES,
+    type,
+    isScript,
+    scriptName,
+  } = route.params;
 
   const [listStation, setListStation] = useState([]);
   const [listMenuItem, setListMenuItem] = useState([]);
   const [indexStation, setIndexStation] = useState(0);
   const [station, setStation] = useState([]);
   const [selectedDevice, setSelectedDevice] = useState();
-  const { navigate } = useNavigation();
+  const { navigate, dispatch } = useNavigation();
 
   const onSnapToItem = useCallback(
     (item, index) => {
@@ -33,9 +42,13 @@ const SelectDevice = memo(({ route }) => {
   );
 
   const fetchDetails = useCallback(async () => {
-    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unit.id), {}, (response) => {
+    let callAPI = API.UNIT.DEVICE_CONTROL(unit.id);
+    if (title === AUTOMATE_SELECT.SELECT_SENSOR) {
+      // TODO will update API later
+      callAPI = API.UNIT.DEVICE_CONTROL(unit.id);
+    }
+    await fetchWithCache(callAPI, {}, (response) => {
       const { success, data } = response;
-
       if (success) {
         const listMenu = data.map((item, index) => ({
           text: item.name,
@@ -47,7 +60,7 @@ const SelectDevice = memo(({ route }) => {
         setListStation(listMenu.concat([{ text: '' }]));
       }
     });
-  }, [unit.id]);
+  }, [title, unit.id]);
 
   useEffect(() => {
     fetchDetails();
@@ -61,26 +74,43 @@ const SelectDevice = memo(({ route }) => {
     }
   };
 
-  const onPressContinue = () => {
+  const onPressContinue = useCallback(() => {
     navigate(Routes.SelectAction, {
       unit,
       device: selectedDevice,
       automateId: automateId,
       stationName: station[indexStation]?.name,
+      isScript,
+      type,
       scriptName,
     });
-  };
+  }, [
+    selectedDevice,
+    automateId,
+    station,
+    indexStation,
+    navigate,
+    unit,
+    type,
+    isScript,
+    scriptName,
+  ]);
+
+  const onClose = useCallback(() => {
+    isScript ? dispatch(popAction(2)) : alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isScript]);
 
   return (
     <View style={styles.wrap}>
-      <HeaderCustom isShowClose />
+      <HeaderCustom isShowClose onClose={onClose} />
 
       <ScrollView
         style={styles.wrap}
         contentContainerStyle={styles.contentContainerStyle}
       >
         <Text bold type="H2" style={styles.title}>
-          {t('select_devices')}
+          {t(title)}
         </Text>
 
         <NavBar
@@ -117,4 +147,4 @@ const SelectDevice = memo(({ route }) => {
   );
 });
 
-export default SelectDevice;
+export default SelectSensorDevices;