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

package/src/screens/SelectUnit/Styles/indexStyles.js

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  buttonClose: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 5,
+  },
+  wrapContent: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 32,
+    paddingBottom: getBottomSpace() + 10,
+  },
+  wrapItem: {
+    marginBottom: 32,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    marginHorizontal: 16,
+  },
+  notSelected: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.Gray5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  selected: {
+    borderColor: Colors.Primary,
+  },
+  childSelected: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.Primary,
+  },
+});

package/src/screens/SelectUnit/__test__/index.test.js

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import axios from 'axios';
+import SelectUnit from '../';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+jest.mock('axios');
+
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectUnit />
+  </SCProvider>
+);
+
+describe('Test Select unit screen', () => {
+  let tree;
+
+  beforeEach(() => {
+    mockSetState.mockClear();
+    axios.get.mockClear();
+  });
+
+  it('Test render', async () => {
+    const response = {
+      status: 200,
+      data: [
+        {
+          id: 178,
+          name: 'Unit 2',
+          is_owner: true,
+          number_sensor: 0,
+          icon: 'Simulator_Screen_Shot_-_iPhone_8_-_2021-09-21_at_09.16.58.png',
+        },
+      ],
+    };
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+    useState.mockImplementation((init) => [response.data, mockSetState]);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(TouchableOpacities).toHaveLength(3);
+    await act(async () => {
+      await TouchableOpacities[1].props.onPress();
+      await TouchableOpacities[2].props.onPress(response.data[0]);
+    });
+    expect(mockSetState).toBeCalledWith(response.data[0]);
+  });
+
+  it('Test SelectUnit getAllUnits fail', async () => {
+    const response = {
+      status: 400,
+    };
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(TouchableOpacities).toHaveLength(3);
+    await act(async () => {
+      await TouchableOpacities[1].props.onPress();
+      await TouchableOpacities[2].props.onPress();
+    });
+    expect(mockSetState).toBeCalledTimes(1);
+  });
+});

package/src/screens/SelectUnit/index.js

@@ -0,0 +1,100 @@
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import { View, TouchableOpacity, FlatList } from 'react-native';
+import { Icon } from '@ant-design/react-native';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { API, Colors } from '../../configs';
+import Text from '../../commons/Text';
+import styles from './Styles/indexStyles';
+import { axiosGet } from '../../utils/Apis/axios';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import FImage from '../../commons/FImage';
+
+const SelectUnit = () => {
+  const t = useTranslations();
+  const [data, setData] = useState([]);
+  const [selectedItem, setSelectedItem] = useState(data[0]);
+
+  const onPressItem = (item) => () => {
+    setSelectedItem(item);
+  };
+
+  const getAllUnits = useCallback(async () => {
+    const { success, data } = await axiosGet(API.AUTOMATE.GET_ALL_UNITS());
+    if (success) {
+      setData(data);
+    }
+  }, []);
+
+  const handleClose = useCallback(() => {
+    // eslint-disable-next-line no-alert
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const renderItem = ({ item = {} }) => {
+    const {
+      id,
+      name = '',
+      is_owner = false,
+      number_sensor = 0,
+      icon = '',
+    } = item;
+    const isSelectedItem = selectedItem?.id === id;
+    return (
+      <TouchableOpacity onPress={onPressItem(item)} style={styles.wrapItem}>
+        <View style={[styles.notSelected, isSelectedItem && styles.selected]}>
+          {isSelectedItem && <View style={styles.childSelected} />}
+        </View>
+        <FImage source={icon} style={styles.icon} />
+        <View style={styles.wrap}>
+          <Text numberOfLines={1} type="H4">
+            {name}
+          </Text>
+          <Text numberOfLines={2} type="Body" color={Colors.Gray7}>
+            {`${t(
+              is_owner ? 'owner_unit' : 'shared_unit'
+            )} - ${number_sensor} ${t(
+              number_sensor > 0 ? 'sensor_devices' : 'sensor_device'
+            )}`}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity style={styles.buttonClose} onPress={handleClose}>
+        <Icon name={'close'} size={24} color={Colors.Black} />
+      </TouchableOpacity>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  useEffect(() => {
+    getAllUnits();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('select_unit')}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+        onRefresh={getAllUnits}
+      >
+        <View style={styles.wrapContent}>
+          <FlatList
+            keyExtractor={(item) => item.id}
+            data={data}
+            renderItem={renderItem}
+          />
+        </View>
+      </WrapHeaderScrollable>
+    </View>
+  );
+};
+
+export default SelectUnit;

package/src/screens/SetSchedule/__test__/index.test.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import SetSchedule from '..';
+import RowItem from '../components/RowItem';
+import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import RepeatOptionsPopup from '../components/RepeatOptionsPopup';
+import Calendar from '../../../commons/Calendar';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import Routes from '../../../utils/Route';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SetSchedule route={route} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
+describe('Test SetSchedule', () => {
+  let tree;
+  let route = {
+    params: {
+      type: 'schedule',
+      unit: { id: 1 },
+    },
+  };
+
+  beforeEach(() => {
+    mockNavigate.mockClear();
+    Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
+  });
+
+  test('test render SetSchedule', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const rowItems = instance.findAllByType(RowItem);
+    const timePicker = instance.findByType(WheelDateTimePicker);
+    const popup = instance.findByType(RepeatOptionsPopup);
+    const calendar = instance.findByType(Calendar);
+
+    await act(async () => {
+      await rowItems[0].props.onPress();
+    });
+    expect(timePicker.props.isVisible).toBeTruthy();
+
+    await act(async () => {
+      await rowItems[1].props.onPress();
+    });
+    expect(popup.props.isVisible).toBeTruthy();
+
+    await act(async () => {
+      await rowItems[2].props.onPress();
+    });
+    expect(calendar.props.isVisible).toBeTruthy();
+  });
+
+  test('test save', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.findByType(BottomButtonView);
+
+    await act(async () => {
+      await button.props.onPressMain();
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.AddNewOneTap, {
+      type: route.params.type,
+      unit: route.params.unit,
+      automateData: {
+        repeat: 'once',
+        time_repeat: '00:00',
+        date_repeat: '2021-01-24',
+        weekday_repeat: [],
+      },
+    });
+  });
+});

package/src/screens/SetSchedule/components/RepeatOptionsPopup.js

@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Modal from 'react-native-modal';
+
+import Text from '../../../commons/Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import styles from '../styles/RepeatOptionsPopupStyles';
+import { Colors } from '../../../configs';
+
+export const REPEAT_OPTIONS = {
+  ONCE: 'once',
+  EVERYDAY: 'every_day',
+  EVERYWEEK: 'every_week',
+};
+
+const RepeatOptionsPopup = ({ isVisible, onHide, onSetRepeat }) => {
+  const t = useTranslations();
+
+  const ItemRepeatOption = useCallback(
+    ({ item }) => {
+      return (
+        <TouchableOpacity
+          style={styles.rowRepeatOption}
+          onPress={() => onSetRepeat(item)}
+        >
+          <Text type="H4" color={Colors.Gray9} style={styles.textRepeatOption}>
+            {t(`${item}`)}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [t, onSetRepeat]
+  );
+
+  return (
+    <Modal
+      isVisible={isVisible}
+      onBackButtonPress={onHide}
+      onBackdropPress={onHide}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      animationIn={'zoomIn'}
+      animationOut={'zoomOut'}
+      style={styles.wrapPopup}
+    >
+      <View style={styles.popup}>
+        {Object.values(REPEAT_OPTIONS).map((item, index) => (
+          <ItemRepeatOption item={item} key={index} />
+        ))}
+      </View>
+    </Modal>
+  );
+};
+
+export default RepeatOptionsPopup;

package/src/screens/SetSchedule/components/RowItem.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import Text from '../../../commons/Text';
+import styles from '../styles/RowItemStyles';
+import { Colors } from '../../../configs';
+
+const RowItem = ({ title, value, icon = null, arrow = false, onPress }) => {
+  return (
+    <TouchableOpacity style={styles.item} onPress={onPress}>
+      <View style={styles.itemLeft}>
+        <Text type="Body" color={Colors.Gray7}>
+          {title}
+        </Text>
+        <Text type="H4" color={Colors.Gray9} bold>
+          {value}
+        </Text>
+      </View>
+      <View style={[styles.itemRight, arrow && styles.center]}>
+        {arrow && <IconOutline name="right" color={Colors.Gray7} />}
+        {icon && <IconOutline name={icon} size={17} color={Colors.Black} />}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default RowItem;

package/src/screens/SetSchedule/components/SelectWeekday.js

@@ -0,0 +1,65 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import styles from '../styles/SelectWeekdayStyles';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const WEEKDAY_ITEMS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+const SelectWeekday = ({ weekday, setWeekday }) => {
+  const t = useTranslations();
+
+  const onSetWeekday = useCallback(
+    (value) => {
+      const index = weekday.indexOf(value);
+      if (index !== -1) {
+        setWeekday([...weekday.slice(0, index), ...weekday.slice(index + 1)]);
+      } else {
+        setWeekday([...weekday, value]);
+      }
+    },
+    [weekday, setWeekday]
+  );
+
+  const WeekdayItem = useCallback(
+    ({ item, index, isSelected }) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          onPress={() => onSetWeekday(`${index}`)}
+          style={[styles.item, isSelected && styles.selected]}
+        >
+          <Text
+            type="Body"
+            color={isSelected ? Colors.White : Colors.Black}
+            style={styles.text}
+            semibold
+          >
+            {item}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [onSetWeekday]
+  );
+
+  return (
+    <View style={styles.wrap}>
+      <Text type="Body" Colors={Colors.Gray7}>
+        {t('select_date')}
+      </Text>
+      <View style={styles.row}>
+        {WEEKDAY_ITEMS.map((item, index) => (
+          <WeekdayItem
+            item={item}
+            index={index}
+            isSelected={weekday.includes(`${index}`)}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default SelectWeekday;

package/src/screens/SetSchedule/index.js

@@ -0,0 +1,139 @@
+import React, { memo, useState, useCallback } from 'react';
+import { View, ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import moment from 'moment';
+
+import Text from '../../commons/Text';
+import { HeaderCustom } from '../../commons/Header';
+import WheelDateTimePicker from '../../commons/WheelDateTimePicker';
+import BottomButtonView from '../../commons/BottomButtonView';
+import Calendar from '../../commons/Calendar';
+import RepeatOptionsPopup from './components/RepeatOptionsPopup';
+import RowItem from './components/RowItem';
+import SelectWeekday from './components/SelectWeekday';
+import { useBoolean } from '../../hooks/Common';
+import t, { useTranslations } from '../../hooks/Common/useTranslations';
+
+import styles from './styles/indexStyles';
+import { REPEAT_OPTIONS } from './components/RepeatOptionsPopup';
+import Routes from '../../utils/Route';
+
+const getDateString = (date) => {
+  const today = moment();
+  if (date.isSame(today, 'day')) {
+    return date.format(`[${t('today')}], D MMMM YYYY `);
+  }
+  return date.format('ddd, D MMMM YYYY');
+};
+
+const SetSchedule = ({ route }) => {
+  const t = useTranslations();
+  const { type, unit } = route.params;
+  const { navigate } = useNavigation();
+  const [repeat, setRepeat] = useState(REPEAT_OPTIONS.ONCE);
+  const [time, setTime] = useState(moment().hour(0).minute(0));
+  const [date, setDate] = useState(moment());
+  const [weekday, setWeekday] = useState([]);
+
+  const [showRepeatOptions, setShowRepeatOptions, setHideRepeatOptions] =
+    useBoolean();
+  const [showTimePicker, setShowTimePicker, setHideTimePicker] = useBoolean();
+  const [showCalendar, setShowCalendar, setHideCalendar] = useBoolean();
+
+  const handleOnSave = useCallback(() => {
+    navigate(Routes.AddNewOneTap, {
+      type: type,
+      unit: unit,
+      automateData: {
+        repeat: repeat,
+        time_repeat: time.format('HH:mm'),
+        date_repeat: date.format('YYYY-MM-DD'),
+        weekday_repeat: weekday,
+      },
+    });
+  }, [navigate, type, unit, repeat, time, date, weekday]);
+
+  const onSetRepeatOption = useCallback(
+    (value) => {
+      setRepeat(value);
+      setHideRepeatOptions();
+    },
+    [setRepeat, setHideRepeatOptions]
+  );
+
+  const onTimePicked = useCallback(
+    (timeData) => {
+      setTime(moment(timeData));
+    },
+    [setTime]
+  );
+
+  const onDatePicked = useCallback(
+    (datePicked) => {
+      setDate(datePicked);
+    },
+    [setDate]
+  );
+
+  return (
+    <>
+      <View style={styles.container}>
+        <HeaderCustom isShowClose />
+        <ScrollView contentContainerStyle={styles.scollView}>
+          <Text type="H2" bold style={styles.title}>
+            {t('set_schedule')}
+          </Text>
+          <RowItem
+            title={t('set_time')}
+            value={time.format('HH:mm')}
+            icon="clock-circle"
+            onPress={setShowTimePicker}
+          />
+          <RowItem
+            title={t('repeat')}
+            value={t(`${repeat}`)}
+            arrow
+            onPress={setShowRepeatOptions}
+          />
+          {repeat === REPEAT_OPTIONS.ONCE && (
+            <RowItem
+              title={t('select_date')}
+              value={getDateString(date)}
+              icon="calendar"
+              onPress={setShowCalendar}
+            />
+          )}
+          {repeat === REPEAT_OPTIONS.EVERYWEEK && (
+            <SelectWeekday weekday={weekday} setWeekday={setWeekday} />
+          )}
+        </ScrollView>
+        <BottomButtonView
+          style={styles.viewBottom}
+          mainTitle={t('save')}
+          onPressMain={handleOnSave}
+        />
+      </View>
+      <RepeatOptionsPopup
+        isVisible={showRepeatOptions}
+        onHide={setHideRepeatOptions}
+        onSetRepeat={onSetRepeatOption}
+      />
+      <WheelDateTimePicker
+        mode="time"
+        isVisible={showTimePicker}
+        defaultValue={time.valueOf()}
+        onHide={setHideTimePicker}
+        onPicked={onTimePicked}
+      />
+      <Calendar
+        isVisible={showCalendar}
+        defaultDate={date}
+        minDate={moment()}
+        onHide={setHideCalendar}
+        onConfirm={onDatePicked}
+      />
+    </>
+  );
+};
+
+export default memo(SetSchedule);

package/src/screens/SetSchedule/styles/RepeatOptionsPopupStyles.js

@@ -0,0 +1,22 @@
+import { Colors } from '../../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrapPopup: {
+    marginHorizontal: 16,
+  },
+  popup: {
+    backgroundColor: Colors.White,
+    width: '100%',
+    paddingHorizontal: 16,
+    borderRadius: 10,
+  },
+  rowRepeatOption: {
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 0.5,
+    paddingVertical: 16,
+  },
+  textRepeatOption: {
+    marginBottom: -4,
+  },
+});

package/src/screens/SetSchedule/styles/RowItemStyles.js

@@ -0,0 +1,29 @@
+import { Colors } from '../../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  item: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+    padding: 12,
+    borderRadius: 10,
+    backgroundColor: Colors.White,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 6,
+  },
+  itemLeft: {},
+  itemRight: {
+    justifyContent: 'flex-end',
+    paddingVertical: 4,
+  },
+  center: {
+    justifyContent: 'center',
+  },
+});