@eohjsc/react-native-smart-city 0.4.98 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.98",
+  "version": "0.5.00",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -9,8 +9,6 @@ import OnOffButtonTemplate from './OnOffButtonTemplate';
 import OnOffSimpleTemplate from './OnOffSimpleTemplate';
 import styles from './styles';
 
-let temp;
-
 const getComponent = (template) => {
   switch (template) {
     case 'on_off_button_action_template': // todo refactor later with backend
@@ -52,18 +50,9 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   }, [config, configValues, is_on_value]);
 
   const [isOn, setIsOn] = useState(false);
-  const [tempIsOn, setTempIsOn] = useState(getIsOnValue());
-  const [timeoutId, setTimeoutId] = useState();
-
-  const updateStatusFromPusher = useCallback(() => {
-    const timeout = setTimeout(() => {
-      setTempIsOn(temp);
-    }, 7000);
-    setTimeoutId(timeout);
-  }, []);
 
   const triggerAction = useCallback(async () => {
-    const action_data = tempIsOn ? action_off_data : action_on_data;
+    const action_data = isOn ? action_off_data : action_on_data;
     if (!action_data) {
       return;
     }
@@ -78,11 +67,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
         config_value: isOn ? 0 : 1,
       };
     }
-    clearTimeout(timeoutId);
     await doAction(action_data, data);
-    setTempIsOn((prev) => !prev);
-    updateStatusFromPusher(); // todo Bang read about this magic
-
     if (
       is_managed_by_backend &&
       config &&
@@ -91,17 +76,14 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
       watchMultiConfigs([config]);
     }
   }, [
-    tempIsOn,
+    isOn,
     action_off_data,
     action_on_data,
     allow_config_store_value,
     config,
     device_type,
-    timeoutId,
     doAction,
-    updateStatusFromPusher,
     is_managed_by_backend,
-    isOn,
   ]);
 
   useUnwatchLGDeviceConfigControl(sensor, [config]);
@@ -110,16 +92,6 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
     setIsOn(getIsOnValue());
   }, [getIsOnValue]);
 
-  useEffect(() => {
-    temp = isOn;
-  }, [isOn]);
-
-  useEffect(() => {
-    if (device_type !== DEVICE_TYPE.LG_THINQ) {
-      setTempIsOn(getIsOnValue());
-    }
-  }, [getIsOnValue, device_type]);
-
   const Component = useMemo(() => {
     return getComponent(item.template);
   }, [item.template]);
@@ -127,7 +99,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   return (
     <View style={styles.wrap}>
       <Component
-        isOn={tempIsOn}
+        isOn={isOn}
         triggerAction={triggerAction}
         actionGroup={configuration}
         disabled={!action_on_data && !action_off_data}

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -20,7 +20,7 @@ import _TextInput from '../Form/TextInput';
 const SliderRangeTemplate = memo(
   ({ item = {}, doAction, sensor, isWidgetOrder }) => {
     const t = useTranslations();
-    const { configuration = {} } = item;
+    const { configuration = {}, title, label } = item;
     const [configValues] = useConfigGlobalState('configValues');
     const {
       config = undefined,
@@ -91,7 +91,7 @@ const SliderRangeTemplate = memo(
       <View
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
-        <Text type="H4">{item?.title || item?.label || t('brightness')}</Text>
+        <Text type="H4">{title || label || t('brightness')}</Text>
         <View style={styles.wrap}>
           <Slider
             step={1}

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -0,0 +1,182 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import Text from '../../commons/Text';
+import { useConfigGlobalState } from '../../iot/states';
+import styles from './TerminalBoxTemplateStyle';
+import _TextInput from '../Form/TextInput';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import moment from 'moment';
+import { useFetchConfigHistory } from '../UnitSummary/ConfigHistoryChart';
+import { ScrollView } from 'react-native';
+import { API } from '../../configs';
+
+const useNewMessage = (
+  newValue,
+  latestUpdatedFromMessage,
+  setAllMessages,
+  setLatestUpdatedFromMessage,
+  type
+) => {
+  useEffect(() => {
+    if (
+      !newValue ||
+      !newValue.last_updated ||
+      moment(newValue.last_updated).isSameOrBefore(latestUpdatedFromMessage)
+    ) {
+      return;
+    }
+    setAllMessages((prev) => [
+      ...prev,
+      { x: moment(), y: newValue.value, type },
+    ]);
+    setLatestUpdatedFromMessage(moment(newValue.last_updated));
+  }, [
+    newValue,
+    latestUpdatedFromMessage,
+    setAllMessages,
+    setLatestUpdatedFromMessage,
+    type,
+  ]);
+};
+
+const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
+  const { label, configuration } = item;
+  const { action_data, from_config, to_config } = configuration;
+  const [configValues] = useConfigGlobalState('configValues');
+  const [value, setValue] = useState();
+  const [allMessages, setAllMessages] = useState([]);
+  const [latestUpdatedFromMessage, setLatestUpdatedFromMessage] = useState(
+    moment()
+  );
+  const [latestUpdatedToMessage, setLatestUpdatedToMessage] = useState(
+    moment()
+  );
+  const scrollViewRef = useRef();
+  const sendCommand = useCallback(() => {
+    doAction(action_data, JSON.stringify({ value: value }));
+    setValue('');
+  }, [doAction, action_data, value]);
+
+  const onInputChange = (e) => {
+    setValue(e);
+  };
+
+  const toValue = useMemo(() => {
+    return configValues[to_config?.id];
+  }, [configValues, to_config]);
+
+  const fromValue = useMemo(() => {
+    return configValues[from_config?.id];
+  }, [configValues, from_config]);
+
+  const configs = useMemo(() => {
+    if (!from_config || !to_config) {
+      return [];
+    }
+    return [from_config, to_config];
+  }, [from_config, to_config]);
+
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      scrollViewRef.current.scrollToEnd({ animated: true });
+    }, 100);
+  };
+
+  const setMessages = useCallback(
+    (configMessages) => {
+      let messages = [];
+      configMessages.map((configMessage) => {
+        const type = configMessage.id === from_config.id ? 'from' : 'to';
+        messages = [
+          ...messages,
+          ...configMessage.data.map((item) => {
+            return { x: item.x, y: item.y, type };
+          }),
+        ];
+      });
+      messages = messages.sort((a, b) => {
+        return moment(a.x).diff(moment(b.x));
+      });
+      setAllMessages(messages);
+      scrollToBottom();
+    },
+    [from_config]
+  );
+
+  const fetchDataDisplayHistory = useFetchConfigHistory(
+    configs,
+    setMessages,
+    API.CONFIG.DISPLAY_HISTORY_V4()
+  );
+
+  useEffect(() => {
+    fetchDataDisplayHistory(moment().subtract(7, 'days'), moment());
+  }, [fetchDataDisplayHistory]);
+
+  useNewMessage(
+    fromValue,
+    latestUpdatedFromMessage,
+    setAllMessages,
+    setLatestUpdatedFromMessage,
+    'from'
+  );
+
+  useNewMessage(
+    toValue,
+    latestUpdatedToMessage,
+    setAllMessages,
+    setLatestUpdatedToMessage,
+    'to'
+  );
+  return (
+    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
+      <View>
+        <Text type="H4">{label}</Text>
+      </View>
+      <ScrollView
+        ref={scrollViewRef}
+        onContentSizeChange={() =>
+          scrollViewRef.current.scrollToEnd({ animated: true })
+        }
+        style={styles.scrollView}
+      >
+        {allMessages.map((item, index) => {
+          return (
+            <View
+              key={index}
+              style={item.type === 'to' ? styles.to : styles.from}
+            >
+              <Text>{item.y}</Text>
+              <Text>{moment(item.x).format('DD/MM/YYYY HH:mm:ss')}</Text>
+            </View>
+          );
+        })}
+      </ScrollView>
+      <View style={styles.iconAndText}>
+        <_TextInput
+          wrapStyle={styles.wrapInputStyle}
+          value={value}
+          onChange={onInputChange}
+          maxLength={255}
+        />
+        <TouchableOpacity
+          style={styles.iconAndTextOption}
+          onPress={sendCommand}
+          accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
+          disabled={!value}
+        >
+          <IconOutline name="send" size={25} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default TerminalBoxTemplate;

package/src/commons/ActionGroup/TerminalBoxTemplateStyle.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrapOrderItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16,
+  },
+  wrap: {
+    padding: 16,
+    marginHorizontal: 16,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
+    flex: 1,
+    flexDirection: 'column',
+  },
+  iconAndText: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  iconAndTextOption: {
+    justifyContent: 'center',
+    marginTop: 25,
+    width: 40,
+    height: 40,
+  },
+  wrapInputStyle: {
+    marginRight: 14,
+    width: '90%',
+  },
+  scrollView: {
+    marginTop: 13,
+    height: 250,
+  },
+  to: {
+    padding: 5,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
+    marginBottom: 5,
+  },
+  from: {
+    alignItems: 'flex-end',
+    marginRight: 0,
+    backgroundColor: Colors.Blue18,
+    padding: 5,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
+    marginBottom: 5,
+  },
+});

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
@@ -19,7 +19,6 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
   const { action_data, config } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
   const [value, setValue] = useState();
-
   const { stateAlert, hideAlertAction, onShowAlert } = useDropdownAction();
 
   const onDone = useCallback(() => {
@@ -27,9 +26,13 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
     hideAlertAction();
   }, [doAction, action_data, value, hideAlertAction]);
 
-  const onInputChange = (value) => {
-    setValue(value);
+  const onInputChange = (e) => {
+    setValue(e);
   };
+  const valueText = useMemo(() => {
+    return configValues[config.id]?.value || '';
+  }, [config.id, configValues]);
+
   return (
     <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
       <View>
@@ -37,33 +40,35 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
       </View>
 
       <View style={styles.iconAndText}>
-        <Text type="H4">{configValues[config.id]?.value}</Text>
+        <Text style={styles.textValue} type="H4">
+          {valueText}
+        </Text>
         <TouchableOpacity
           style={styles.iconAndTextOption}
           onPress={onShowAlert}
           accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
         >
-          <IconOutline name="edit" size={20} />
+          <IconOutline name="edit" size={25} />
         </TouchableOpacity>
-        <AlertAction
-          visible={stateAlert.visible}
-          hideModal={hideAlertAction}
-          title={t('enter_parameters')}
-          message={stateAlert.message}
-          leftButtonTitle={stateAlert.leftButton}
-          leftButtonClick={hideAlertAction}
-          rightButtonTitle={stateAlert.rightButton}
-          rightButtonClick={onDone}
-          rightDisabled={!value}
-          transY={transY}
-        >
-          <_TextInput
-            wrapStyle={styles.wrapInputStyle}
-            value={value}
-            onChange={onInputChange}
-          />
-        </AlertAction>
       </View>
+      <AlertAction
+        visible={stateAlert.visible}
+        hideModal={hideAlertAction}
+        title={t('enter_parameters')}
+        message={stateAlert.message}
+        leftButtonTitle={stateAlert.leftButton}
+        leftButtonClick={hideAlertAction}
+        rightButtonTitle={stateAlert.rightButton}
+        rightButtonClick={onDone}
+        rightDisabled={!value}
+        transY={transY}
+      >
+        <_TextInput
+          wrapStyle={styles.wrapInputStyle}
+          value={value}
+          onChange={onInputChange}
+        />
+      </AlertAction>
     </View>
   );
 };

package/src/commons/ActionGroup/TextBoxTemplateStyle.js

@@ -24,6 +24,9 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  textValue: {
+    width: '80%',
+  },
   iconAndTextOption: {
     flex: 1,
     flexDirection: 'row',

package/src/commons/ActionGroup/__test__/TerminalBoxTemplate.test.js

@@ -0,0 +1,232 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+import _TextInput from '../../Form/TextInput';
+import { API, Colors } from '../../../configs';
+import TerminalBoxTemplate from '../TerminalBoxTemplate';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../utils/Apis/axios';
+import { ScrollView } from 'react-native';
+
+const mock = new MockAdapter(api.axiosInstance);
+const wrapComponent = (item, mockDoAction, isWidgetOrder = false) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TerminalBoxTemplate
+      item={item}
+      doAction={mockDoAction}
+      isWidgetOrder={isWidgetOrder}
+    />
+  </SCProvider>
+);
+
+jest.mock('../../../iot/Monitor');
+
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: () => [{ 5: { value: 2 } }, null],
+}));
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useFocusEffect: jest.fn(),
+  };
+});
+
+describe('Test TerminalBoxTemplate', () => {
+  let displayItem;
+  let sensor;
+  let wrapper;
+  let data;
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    jest.useFakeTimers();
+    displayItem = {
+      id: 33909,
+      configuration_error: null,
+      is_configuration_ready: true,
+      configuration: {
+        from_config: {
+          id: 35490,
+          sensor_id: 18310,
+          chip_id: 4129,
+          color: '#000000',
+          standard: '',
+          measure: '',
+          unit: '',
+          data: [
+            {
+              x: '2024-02-28T07:53:57.828537Z',
+              y: null,
+            },
+          ],
+        },
+        to_config: {
+          id: 35491,
+          sensor_id: 18310,
+          chip_id: 4129,
+          color: '#000000',
+          standard: '',
+          measure: '',
+          unit: '',
+          data: [
+            {
+              x: '2024-02-28T07:53:57.828537Z',
+              y: null,
+            },
+          ],
+        },
+        action: 'e8d1de74-7609-4e04-b63d-e6a19389d608',
+        action_data: {
+          id: 33283,
+          name: 'String V4',
+          key: 'e8d1de74-7609-4e04-b63d-e6a19389d608',
+          icon: '',
+          icon_kit: null,
+          color: '#00979D',
+          home_assistant_action: null,
+          lg_action: null,
+          arduino_action: {
+            id: 8025,
+            pin: null,
+            value: 0,
+          },
+          modbus_action: null,
+          zigbee_action: null,
+          command_prefer_over_internet: true,
+          command_prefer_over_bluetooth: false,
+          command_prefer_over_googlehome: false,
+          allow_config_store_value_id: null,
+          end_device: {
+            id: 10161,
+            name: 'Terminal Box',
+            device_type: '',
+          },
+          sensor_id: 18310,
+          chip_id: 4129,
+          is_only_bluetooth: false,
+          googlehome_action: null,
+        },
+      },
+      template: 'TerminalBoxTemplate',
+      order: 0,
+      label: 'String Box',
+    };
+    sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+    data = {
+      configs: [
+        {
+          id: 35490,
+          head: [
+            {
+              x: '2024-02-28T07:53:57.787788Z',
+              y: null,
+            },
+          ],
+          tail: [
+            {
+              x: '2024-02-29T07:30:01.940166Z',
+              y: null,
+            },
+          ],
+          middle: {
+            ready: [],
+            not_ready: [],
+            channel: 'cache-4e37a226-c61c-4708-a00c-c22bd192b845',
+          },
+        },
+        {
+          id: 35491,
+          head: [
+            {
+              x: '2024-02-28T07:53:57.828537Z',
+              y: null,
+            },
+          ],
+          tail: [
+            {
+              x: '2024-02-29T01:42:14.488233Z',
+              y: null,
+            },
+          ],
+          middle: {
+            ready: [],
+            not_ready: [],
+            channel: 'cache-2d0806d7-5c15-4af0-8443-6ec6b54ba9cf',
+          },
+        },
+      ],
+    };
+  });
+
+  it('render template', async () => {
+    const mockDoAction = jest.fn();
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V4()).reply(200, data);
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction));
+    });
+    jest.runAllTimers();
+
+    const instance = wrapper.root;
+    const views = instance.findAllByType(View);
+
+    expect(views[0].props.style).toEqual({
+      padding: 16,
+      marginHorizontal: 16,
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: Colors.Gray4,
+      borderRadius: 10,
+      flex: 1,
+      flexDirection: 'column',
+    });
+    const scroll = instance.findByType(ScrollView);
+    await act(async () => {
+      await scroll.props.onContentSizeChange();
+    });
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('123');
+    });
+    const buttonSend = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonSend.props.onPress();
+    });
+
+    expect(mockDoAction).toHaveBeenCalledWith(
+      displayItem.configuration.action_data,
+      JSON.stringify({ value: '123' })
+    );
+  });
+  it('render template isWidgetOrder change position', async () => {
+    const mockDoAction = jest.fn();
+    sensor.is_managed_by_backend = true;
+    displayItem.configuration.from_config = null;
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V4()).reply(200, data);
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, true));
+    });
+    const instance = wrapper.root;
+    const views = instance.findAllByType(View);
+
+    expect(views[0].props.style).toEqual({
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      padding: 16,
+    });
+  });
+});

package/src/commons/ActionGroup/__test__/TextBoxTemplate.test.js

@@ -34,7 +34,7 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-describe('Test OptionsDropdownActionTemplate', () => {
+describe('Test TextBoxTemplate', () => {
   const actionData = {
     color: '#00979D',
     command_prefer_over_bluetooth: true,