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

package/assets/images/Map/MarkerGeolocation.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="39" viewBox="0 0 24 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8.21875C11.0656 8.21875 10.1875 8.58125 9.525 9.24375C9.19945 9.56837 8.94129 9.95415 8.76538 10.3789C8.58947 10.8037 8.49928 11.259 8.5 11.7188C8.5 12.6531 8.86562 13.5312 9.525 14.1938C9.84962 14.5193 10.2354 14.7775 10.6602 14.9534C11.0849 15.1293 11.5403 15.2195 12 15.2188C12.9344 15.2188 13.8125 14.8531 14.475 14.1938C15.1375 13.5312 15.5 12.6531 15.5 11.7188C15.5 10.7844 15.1375 9.90625 14.475 9.24375C13.8125 8.58125 12.9344 8.21875 12 8.21875ZM22.7062 7.03438C22.1179 5.67775 21.2697 4.44944 20.2094 3.41875C19.1456 2.37875 17.8915 1.55331 16.5156 0.9875C15.0844 0.39375 13.5656 0.09375 12 0.09375C10.4344 0.09375 8.91562 0.39375 7.48438 0.984375C6.1 1.55625 4.85938 2.375 3.79063 3.41563C2.73101 4.44689 1.88286 5.67506 1.29375 7.03125C0.684375 8.4375 0.375 9.93125 0.375 11.4688C0.375 13.675 0.903125 15.8719 1.94063 17.9906C2.775 19.6938 3.94063 21.3531 5.40938 22.9312C7.91875 25.625 10.55 27.2719 11.2969 27.7125C11.5089 27.8377 11.7507 27.9036 11.9969 27.9031C12.2406 27.9031 12.4812 27.8406 12.6969 27.7125C13.4437 27.2719 16.075 25.625 18.5844 22.9312C20.0531 21.3562 21.2188 19.6938 22.0531 17.9906C23.0969 15.875 23.625 13.6812 23.625 11.4719C23.625 9.93437 23.3156 8.44063 22.7062 7.03438ZM12 17.2188C8.9625 17.2188 6.5 14.7563 6.5 11.7188C6.5 8.68125 8.9625 6.21875 12 6.21875C15.0375 6.21875 17.5 8.68125 17.5 11.7188C17.5 14.7563 15.0375 17.2188 12 17.2188Z" fill="#1890FF"/>
+<path d="M16.6666 30.2735L15.7266 29.3335L12 33.0602L8.27331 29.3335L7.33331 30.2735L11.06 34.0002L7.33331 37.7268L8.27331 38.6668L12 34.9402L15.7266 38.6668L16.6666 37.7268L12.94 34.0002L16.6666 30.2735Z" fill="#262626"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.57",
+  "version": "0.2.61",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -43,11 +43,7 @@
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "build": "sync-files ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "test:code-formatter": "prettier src/**/**/*.js --write",
-    "test:code-formatter-step-1": "prettier --check src/**/*.js",
-    "test:code-formatter-step-2": "prettier --check src/**/**/*.js",
-    "test:code-formatter-step-3": "prettier --check src/**/**/**/*.js"
+    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src"
   },
   "repository": {
     "type": "git",
@@ -85,7 +81,6 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-native": "^3.10.0",
     "factory-girl": "^5.0.4",
-    "husky": "^2.7.0",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
     "jetifier": "^1.6.6",
@@ -146,6 +141,7 @@
     "react-hooks-global-state": "^1.0.1",
     "react-i18next": "^11.8.12",
     "react-native-alert-async": "^1.0.5",
+    "react-native-android-wifi": "^0.0.41",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",
     "react-native-ble-plx": "^2.0.1",
@@ -161,7 +157,7 @@
     "react-native-geocoder": "^0.5.0",
     "react-native-gesture-handler": "^1.7.0",
     "react-native-get-location": "^2.0.0",
-    "react-native-image-picker": "^3.1.4",
+    "react-native-image-crop-picker": "^0.37.2",
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",
@@ -206,21 +202,6 @@
     "validator": "^13.1.1",
     "victory-native": "^35.0.1"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "yarn jest"
-    }
-  },
-  "lint-staged": {
-    "*.{js, ts}": [
-      "yarn lint",
-      "yarn test:code-formatter",
-      "yarn test:code-formatter-step-1",
-      "yarn test:code-formatter-step-2",
-      "yarn test:code-formatter-step-3"
-    ]
-  },
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"
   },

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -0,0 +1,139 @@
+import React, { memo, useCallback, useState } from 'react';
+import { TouchableOpacity, View, Switch, Image } from 'react-native';
+import { Icon } from '@ant-design/react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './CurtainButtonTemplateStyle';
+import Text from '../Text';
+import { TESTID } from '../../configs/Constants';
+import { Colors, Images } from '../../configs';
+import { Section } from '../../commons/Section';
+import { IconOutline } from '@ant-design/icons-react-native';
+
+const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
+  const t = useTranslations();
+  const { configuration } = actionGroup;
+  const [lock, setLock] = useState(false);
+
+  const onButtonOpenPress = useCallback(
+    () => doAction(configuration.open_action_data),
+    [configuration.open_action_data, doAction]
+  );
+  const onButtonStopPress = useCallback(
+    () => doAction(configuration.stop_action_data),
+    [configuration.stop_action_data, doAction]
+  );
+  const onButtonClosePress = useCallback(
+    () => doAction(configuration.close_action_data),
+    [configuration.close_action_data, doAction]
+  );
+  const onChangeSwitch = useCallback(() => {
+    if (lock) {
+      setLock(false);
+      doAction(configuration.action_off_data);
+      return;
+    }
+    doAction(configuration.action_on_data);
+    setLock(true);
+  }, [
+    configuration.action_off_data,
+    configuration.action_on_data,
+    doAction,
+    lock,
+  ]);
+
+  const RenderThreeButtonActions = () => {
+    const buttons = [
+      {
+        style: styles.buttonActionCurtain,
+        icon: Images.buttonLeftCurtain,
+        text: configuration.text1,
+        onPress: onButtonOpenPress,
+        testID: TESTID.BUTTON_TEMPLATE_1,
+      },
+      {
+        style: styles.buttonActionCurtainCenter,
+        icon: Images.buttonPauseCurtain,
+        text: configuration.text2,
+        onPress: onButtonStopPress,
+        testID: TESTID.BUTTON_TEMPLATE_2,
+      },
+      {
+        style: styles.buttonActionCurtain,
+        icon: Images.buttonRightCurtain,
+        text: configuration.text3,
+        onPress: onButtonClosePress,
+        testID: TESTID.BUTTON_TEMPLATE_3,
+      },
+    ];
+
+    return (
+      <>
+        {buttons.map((item, index) => (
+          <TouchableOpacity
+            testID={item.testID}
+            style={item.style}
+            onPress={item.onPress}
+            underlayColor={Colors.Gray2}
+          >
+            <Image source={item.icon} />
+          </TouchableOpacity>
+        ))}
+      </>
+    );
+  };
+  const itemLock = (icon, color) => {
+    return (
+      <>
+        <View style={styles.lockDoor}>
+          <Icon name={icon} size={15} color={color} style={styles.iconLock} />
+          <Text
+            style={styles.textLockDoor}
+            testID={TESTID.TEXT_DOOR_LOOK_ON_OFF}
+          >
+            {configuration.text_door_lock}{' '}
+          </Text>
+        </View>
+        <Switch
+          trackColor={{ false: Colors.Gray4, true: Colors.Primary }}
+          thumbColor={Colors.White}
+          ios_backgroundColor={Colors.Gray4}
+          onValueChange={onChangeSwitch}
+          value={lock}
+        />
+      </>
+    );
+  };
+  return (
+    <>
+      <View style={styles.wrap}>
+        <RenderThreeButtonActions />
+      </View>
+      <View style={styles.lockSwitch}>
+        {configuration.is_display_lock &&
+          itemLock(
+            lock ? 'lock' : 'unlock',
+            lock ? Colors.Primary : Colors.Gray6
+          )}
+      </View>
+      <Section style={styles.section}>
+        <View style={styles.reminderOption}>
+          <Text type="H4" color={Colors.Gray8}>
+            {t('schedule')}
+          </Text>
+          <TouchableOpacity>
+            <IconOutline name="plus" size={20} />
+          </TouchableOpacity>
+        </View>
+        <View>
+          <TouchableOpacity style={styles.tapToAddSchedule}>
+            <Text type="Body" color={Colors.Gray6} center>
+              {t('tap_to_add_new_schedule')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </Section>
+    </>
+  );
+});
+
+export default CurtainButtonTemplate;

package/src/commons/ActionGroup/CurtainButtonTemplateStyle.js

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 30,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  lockSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 7,
+  },
+  iconLock: {
+    paddingBottom: 7,
+  },
+  textLockDoor: {
+    paddingLeft: 12,
+    height: 24,
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  lockDoor: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingLeft: 5,
+  },
+  section: {
+    marginHorizontal: 20,
+    borderRadius: 10,
+  },
+  reminderOption: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  tapToAddSchedule: {
+    paddingVertical: 50,
+  },
+  buttonActionCurtain: {
+    flex: 1,
+    aspectRatio: 1,
+    marginHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonActionCurtainCenter: {
+    flex: 1,
+    aspectRatio: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 15,
+  },
+});

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import CurtainButtonTemplate from '../CurtainButtonTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <CurtainButtonTemplate actionGroup={actionGroup} doAction={jest.fn()} />
+  </SCProvider>
+);
+
+describe('Test CurtainButtonTemplate', () => {
+  const actionGroup = {
+    configuration: {
+      action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
+      action1_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'caret-up',
+        id: 9,
+        key: '2b949045-8e03-4c07-a855-7794ade2e69c',
+      },
+      action2: '38347d5e-4418-4ab0-978c-c82f4c034897',
+      action2_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'stop',
+        id: 11,
+        key: '38347d5e-4418-4ab0-978c-c82f4c034897',
+      },
+      action3: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+      action3_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'caret-down',
+        id: 10,
+        key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+      },
+      icon1: 'caret-up',
+      icon2: 'stop',
+      icon3: 'caret-down',
+      text1: 'UP',
+      text2: 'STOP/UNLOCK',
+      text3: 'DOWN',
+      id: 1,
+      template: 'curtain_button_action_template',
+    },
+  };
+
+  let wrapper;
+
+  test('render CurtainButtonTemplate', async () => {
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities.length).toEqual(5);
+  });
+});

package/src/commons/ActionGroup/index.js

@@ -8,6 +8,7 @@ import NumberUpDownActionTemplate from './NumberUpDownActionTemplate';
 import OptionsDropdownActionTemplate from './OptionsDropdownActionTemplate';
 import OnOffTemplate from './OnOffTemplate';
 import TimerActionTemplate from './TimerActionTemplate';
+import CurtainButtonTemplate from './CurtainButtonTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -29,6 +30,8 @@ export const getActionComponent = (template) => {
       return OptionsDropdownActionTemplate;
     case 'TimerActionTemplate':
       return TimerActionTemplate;
+    case 'curtain_action_template':
+      return CurtainButtonTemplate;
     default:
       return null;
   }

package/src/commons/Auth/__test__/AccountList.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import AccountList from '../AccountList';
+
+describe('Test AccountList', () => {
+  let tree;
+  const accounts = [
+    {
+      id: 1,
+      name: 'test',
+      phone_number: 123456677,
+    },
+  ];
+
+  it('test render has data', async () => {
+    await act(() => {
+      tree = create(<AccountList accounts={accounts} />);
+    });
+    const instance = tree.root;
+    const scrollViews = instance.findAllByType(ScrollView);
+    expect(scrollViews).toHaveLength(1);
+  });
+
+  it('test render has no data', async () => {
+    await act(() => {
+      tree = create(<AccountList accounts={[]} />);
+    });
+    const instance = tree.root;
+    const scrollViews = instance.findAllByType(ScrollView);
+    expect(scrollViews).toHaveLength(1);
+  });
+});

package/src/commons/CameraDevice/index.js

@@ -59,6 +59,8 @@ const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
             cameraName={device.configuration.name}
             handleFullScreen={handleFullScreen}
             goToPlayBack={goToPlayBack(device, { uri: station?.background })}
+            width={standardizeWidth}
+            height={standardizeHeight}
           />
         </View>
       ))}

package/src/commons/CardShadow/index.js

@@ -7,7 +7,7 @@ const Card = memo(({ title, children, style }) => {
   return (
     <View style={[styles.card, style]}>
       {title && <Text style={styles.headerTitle}>{title}</Text>}
-      <View>{children}</View>
+      {children}
     </View>
   );
 });

package/src/commons/CardShadow/styles.js

@@ -3,11 +3,9 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   card: {
-    marginTop: 14,
-    marginBottom: 14,
+    marginVertical: 14,
     marginHorizontal: 16,
     padding: 16,
-    flexDirection: 'column',
     backgroundColor: Colors.White,
     borderRadius: 10,
     shadowColor: Colors.Shadow,

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -7,7 +7,7 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 
 const DateTimeButton = memo(({ onPress, time, date, formatType, style }) => {
-  let format = 'DD.MM.YY hh:mm';
+  let format = 'DD.MM.YY HH:mm';
   if (formatType === 'date') {
     format = 'DD.MM.YY';
   }

package/src/commons/Device/HistoryChart.js

@@ -11,7 +11,7 @@ import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import LinearChart from './LinearChart';
-import ThreeButtonHistory from '../ThreeButtonHistory';
+import FourButtonFilterHistory from '../FourButtonFilterHistory';
 import { formatMoney } from '../../utils/Utils';
 
 export const dateTimeType = {
@@ -33,98 +33,102 @@ const HistoryChart = memo(
     endDate,
     setEndDate,
     setStartDate,
+    groupBy,
     setGroupBy,
     configuration,
   }) => {
     const t = useTranslations();
-    const dateNow = moment().valueOf();
     const [chartOptions, setChartOptions] = useState({
       index: -1,
       showAll: true,
     });
     const [eventPicker, setEventPicker] = useState({
-      currentChangeTime: '',
       showModalEnd: false,
       showModalStart: false,
       startTime: startDate ? startDate : moment().subtract(1, 'day').valueOf(),
-      endTime: dateNow,
+      endTime: endDate ? endDate : moment().valueOf(),
     });
     const [price, setPrice] = useState(null);
 
     const onStart = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: 'start',
+      setEventPicker((state) => ({
+        ...state,
         showModalStart: true,
         showModalEnd: false,
-      });
-    }, [eventPicker]);
+      }));
+    }, []);
     const onEnd = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: 'end',
-        show: true,
+      setEventPicker((state) => ({
+        ...state,
         showModalStart: false,
         showModalEnd: true,
-      });
-    }, [eventPicker]);
-    const onConfirmStart = (date) => {
-      if (typeof date === 'number') {
-        onCancel();
-        return;
-      }
-      if (moment(date).valueOf() < eventPicker.endTime) {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalStart: false,
-          startTime: moment(date).valueOf(),
-        });
-      } else {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalStart: false,
-          startTime: moment(date).valueOf(),
-          endTime: moment(date).add(1, 'day').valueOf(),
+      }));
+    }, []);
+    const onConfirmStart = useCallback(
+      (date) => {
+        setEventPicker((state) => {
+          if (typeof date === 'number') {
+            onCancel();
+            return state;
+          }
+          if (moment(date).valueOf() < state.endTime) {
+            setStartDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalStart: false,
+              startTime: moment(date).valueOf(),
+            };
+          } else {
+            setStartDate(moment(date).valueOf());
+            setEndDate(moment(date).add(1, 'day').valueOf());
+            return {
+              ...state,
+              showModalStart: false,
+              startTime: moment(date).valueOf(),
+              endTime: moment(date).add(1, 'day').valueOf(),
+            };
+          }
         });
-      }
-
-      setStartDate(moment(date).valueOf());
-    };
+      },
+      [onCancel, setStartDate, setEndDate]
+    );
 
-    const onConfirmEnd = (date) => {
-      if (typeof date === 'number') {
-        onCancel();
-        return;
-      }
-      if (moment(date).valueOf() >= eventPicker.startTime) {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalEnd: false,
-          endTime: moment(date).valueOf(),
+    const onConfirmEnd = useCallback(
+      (date) => {
+        setEventPicker((state) => {
+          if (typeof date === 'number') {
+            onCancel();
+            return state;
+          }
+          if (moment(date).valueOf() > state.startTime) {
+            setEndDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalEnd: false,
+              endTime: moment(date).valueOf(),
+            };
+          } else {
+            setStartDate(moment(date).add(-1, 'day').valueOf());
+            setEndDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalEnd: false,
+              startTime: moment(date).add(-1, 'day').valueOf(),
+              endTime: moment(date).valueOf(),
+            };
+          }
         });
-      } else {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalEnd: false,
-          endTime: moment(date).valueOf(),
-          startTime: moment(date).subtract(1, 'day').valueOf(),
-        });
-      }
-      setEndDate(moment(date).valueOf());
-    };
+      },
+      [onCancel, setStartDate, setEndDate]
+    );
 
     const onCancel = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: '',
+      setEventPicker((state) => ({
+        ...state,
         showModalEnd: false,
         showModalStart: false,
-      });
-    }, [eventPicker]);
+      }));
+    }, []);
     const onShowOneChart = useCallback(
       (index) => {
         if (index === chartOptions.index) {
@@ -179,25 +183,19 @@ const HistoryChart = memo(
               {t('history')}
             </Text>
             {configuration.type === 'horizontal_bar_chart' && (
-              <ThreeButtonHistory
-                setStartDate={setStartDate}
-                setEndDate={setEndDate}
+              <FourButtonFilterHistory
+                groupBy={groupBy}
                 setGroupBy={setGroupBy}
-                startDate={startDate}
-                endDate={endDate}
               />
             )}
           </View>
-          {configuration.type !== 'horizontal_bar_chart' && (
-            <DateTimeRangeChange
-              startTime={eventPicker.startTime}
-              onStart={onStart}
-              onEnd={onEnd}
-              endTime={eventPicker.endTime}
-              date={dateNow}
-              formatType={formatType}
-            />
-          )}
+          <DateTimeRangeChange
+            startTime={eventPicker.startTime}
+            onStart={onStart}
+            onEnd={onEnd}
+            endTime={eventPicker.endTime}
+            formatType={formatType}
+          />
         </View>
         {configuration.config === 'power_consumption' && (
           <View style={styles.wrapCalculateCost}>