@eohjsc/react-native-smart-city 0.3.29 → 0.3.32

package/src/commons/SelectGateway/index.js

@@ -0,0 +1,105 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
+
+import { API } from '../../configs';
+import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
+import { axiosGet } from '../../utils/Apis/axios';
+import Text from '../../commons/Text';
+import { AccessibilityLabel } from '../../configs/Constants';
+import styles from './styles';
+
+const GatewayItem = memo(({ index, item, selectedIndex, setSelectedIndex }) => {
+  const handleSelectIndex = useCallback(() => {
+    setSelectedIndex((currentIndex) => {
+      if (currentIndex !== index) {
+        return index;
+      }
+      return -1;
+    });
+  }, [index, setSelectedIndex]);
+
+  return (
+    <TouchableOpacity style={styles.rowContainer} onPress={handleSelectIndex}>
+      <RadioCircle
+        active={selectedIndex === index}
+        accessibilityLabel={`${AccessibilityLabel.SELECT_GATEWAY_RADIO_BUTTON}-${item.id}`}
+      />
+      <View
+        style={styles.row}
+        accessibilityLabel={`${AccessibilityLabel.SELECT_GATEWAY_NAME}-${item.id}`}
+      >
+        <Text
+          style={styles.text}
+          accessibilityLabel={`${AccessibilityLabel.SELECT_GATEWAY_NAME}-${item.id}`}
+        >
+          {item.name}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+const SelectGateway = ({ onPressNext, unitId, type, title, subTitle }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const isFocused = useIsFocused();
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const [gateways, setGateways] = useState([]);
+
+  const fetchDetails = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.CHIP.GET_CHIPS_FROM_UNIT(unitId),
+      {
+        type,
+      }
+    );
+    if (success) {
+      setGateways(data);
+    }
+  }, [type, unitId]);
+
+  useEffect(() => {
+    isFocused && fetchDetails();
+  }, [fetchDetails, isFocused]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text semibold style={styles.title}>
+        {title}
+      </Text>
+      <Text style={styles.subtitle}>{subTitle}</Text>
+      <View style={styles.contentContainer}>
+        <ScrollView
+          style={styles.scrollContainer}
+          showsVerticalScrollIndicator={false}
+          scrollIndicatorInsets={{ right: 1 }}
+        >
+          <Section type={'border'}>
+            {gateways.map((item, index) => (
+              <GatewayItem
+                key={index}
+                item={item}
+                setSelectedIndex={setSelectedIndex}
+                selectedIndex={selectedIndex}
+                index={index}
+              />
+            ))}
+          </Section>
+        </ScrollView>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={goBack}
+          rightTitle={t('next')}
+          rightDisabled={selectedIndex === -1}
+          onRightClick={() => onPressNext(gateways[selectedIndex])}
+          accessibilityLabelPrefix={AccessibilityLabel.PREFIX.SELECT_UNIT}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default SelectGateway;

package/src/commons/SelectGateway/styles.js

@@ -0,0 +1,55 @@
+import { Colors } from '../../configs';
+
+import { StyleSheet, StatusBar, Platform } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  scrollContainer: {
+    width: '100%',
+    flex: 1,
+  },
+  title: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    lineHeight: 28,
+    marginTop: 8,
+    marginBottom: 4,
+    marginLeft: 16,
+  },
+  subtitle: {
+    color: Colors.Gray8,
+    fontSize: 14,
+    lineHeight: 22,
+    marginLeft: 16,
+    marginBottom: 16,
+  },
+  row: {
+    flex: 1,
+    paddingVertical: 16,
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+    marginRight: 24,
+    marginLeft: 16,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 16,
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+  buttonAdd: {
+    marginHorizontal: 16,
+  },
+});

package/src/commons/SelectSubUnit/__test__/SelectSubUnit.test.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import SelectSubUnit from '../index';
+import { ViewButtonBottom } from '../../../commons';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { Platform } from 'react-native';
+import { API } from '../../../configs';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import Text from '../../Text';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../utils/Apis/axios';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockedGoBack = jest.fn();
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+    useIsFocused: () => true,
+  };
+});
+
+const wrapComponent = (unitId, title, subTitle, onPressNext) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectSubUnit {...{ unitId, title, subTitle, onPressNext }} />
+  </SCProvider>
+);
+
+describe('Test SelectSubUnit', () => {
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    mockedGoBack.mockClear();
+  });
+  let tree;
+
+  test('fetch sub-unit success', async () => {
+    Platform.OS = 'android';
+    const response = {
+      status: 200,
+      success: true,
+      data: {
+        stations: [
+          { id: 1, name: 'Station 1' },
+          { id: 2, name: 'Station 2' },
+        ],
+      },
+    };
+    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, response.data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(1));
+    });
+    const instance = tree.root;
+    const unitName = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_SUBUNIT_NAME
+        ) === 0 && item.type === Text
+    );
+    const radioButton = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_SUBUNIT_SELECT
+        ) === 0
+    );
+    expect(unitName[0].props.children).toBe('Station 1');
+    expect(unitName[1].props.children).toBe('Station 2');
+    expect(radioButton[0].props.active).toBeFalsy();
+    expect(radioButton[1].props.active).toBeFalsy();
+    const selectUnit = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.SELECT_SUBUNIT_SELECT}-1`
+    );
+    await act(async () => {
+      selectUnit.props.onPress();
+    });
+
+    const selectIcon = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.SELECT_SUBUNIT_RADIO_BUTTON}-1`
+    );
+
+    expect(selectIcon.props.active).toBeTruthy();
+  });
+
+  test('test ViewButtonBottom leftClick', async () => {
+    const route = { params: { addType: 'AddNewGateway' } };
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    act(() => {
+      viewButtonBottom.props.onLeftClick();
+    });
+    expect(mockedGoBack).toHaveBeenCalled();
+  });
+});

package/src/commons/SelectSubUnit/index.js

@@ -0,0 +1,124 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+
+import { API } from '../../configs';
+import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
+import { axiosGet } from '../../utils/Apis/axios';
+import Text from '../../commons/Text';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import styles from './styles.js';
+import Button from '../../commons/Button';
+import Alert from '../Alert';
+
+const SubUnitItem = memo(({ item, index, selectedIndex, setSelectedIndex }) => {
+  const handleSelectIndex = useCallback(() => {
+    setSelectedIndex((currentIndex) => {
+      if (currentIndex !== index) {
+        return index;
+      }
+      return -1;
+    });
+  }, [index, setSelectedIndex]);
+
+  return (
+    <TouchableOpacity
+      style={styles.rowContainer}
+      onPress={handleSelectIndex}
+      accessibilityLabel={`${AccessibilityLabel.SELECT_SUBUNIT_SELECT}-${item.id}`}
+    >
+      <RadioCircle
+        active={selectedIndex === index}
+        accessibilityLabel={`${AccessibilityLabel.SELECT_SUBUNIT_RADIO_BUTTON}-${item.id}`}
+      />
+      <View style={styles.row}>
+        <Text
+          style={styles.text}
+          accessibilityLabel={`${AccessibilityLabel.SELECT_SUBUNIT_NAME}-${item.id}`}
+        >
+          {item.name}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+const SelectSubUnit = ({ unitId, title, subTitle, onPressNext }) => {
+  const t = useTranslations();
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [unit, setUnit] = useState([]);
+  const { goBack } = useNavigation();
+  const isFocused = useIsFocused();
+
+  const fetchDetails = useCallback(async () => {
+    // todo Bang: switch to use simpler APIs
+    const { success, data } = await axiosGet(API.UNIT.UNIT_DETAIL(unitId));
+    if (success) {
+      setUnit(data);
+    }
+  }, [unitId]);
+
+  useEffect(() => {
+    isFocused && fetchDetails();
+  }, [fetchDetails, isFocused]);
+
+  const subUnits = useMemo(() => unit.stations || [], [unit]);
+
+  const onRightClick = useCallback(() => {
+    onPressNext(unit, subUnits[selectedIndex]);
+  }, [onPressNext, selectedIndex, subUnits, unit]);
+
+  const addSubUnit = useCallback(() => {
+    Alert.alert('add subunit');
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text semibold style={styles.title}>
+        {title}
+      </Text>
+      <Text style={styles.subtitle}>{subTitle}</Text>
+      <View style={styles.contentContainer}>
+        <ScrollView
+          style={styles.scrollContainer}
+          showsVerticalScrollIndicator={false}
+          scrollIndicatorInsets={{ right: 1 }}
+        >
+          <Section type={'border'}>
+            {subUnits.map((item, index) => (
+              <SubUnitItem
+                key={item?.id?.toString()}
+                item={item}
+                index={index}
+                selectedIndex={selectedIndex}
+                setSelectedIndex={setSelectedIndex}
+              />
+            ))}
+          </Section>
+          <View style={styles.buttonAdd}>
+            <Button
+              type="primaryBorder"
+              title={`${t('add_new_sub_unit')} +`}
+              onPress={addSubUnit}
+              width="auto"
+              height={32}
+              textType="setupBorder"
+              textSemiBold={false}
+            />
+          </View>
+        </ScrollView>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={goBack}
+          rightTitle={t('next')}
+          rightDisabled={selectedIndex === -1}
+          onRightClick={onRightClick}
+          accessibilityLabelPrefix={AccessibilityLabel.PREFIX.SELECT_UNIT}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default SelectSubUnit;

package/src/commons/SelectSubUnit/styles.js

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+import { getStatusBarHeight } from '../../configs/Constants';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+    paddingTop: getStatusBarHeight(),
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  scrollContainer: {
+    width: '100%',
+    flex: 1,
+  },
+  title: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    lineHeight: 28,
+    marginTop: 8,
+    marginBottom: 4,
+    marginLeft: 16,
+  },
+  subtitle: {
+    color: Colors.Gray8,
+    fontSize: 14,
+    lineHeight: 22,
+    marginLeft: 16,
+    marginBottom: 16,
+  },
+  row: {
+    flex: 1,
+    paddingVertical: 16,
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+    marginRight: 24,
+    marginLeft: 16,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 16,
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+  buttonAdd: {
+    marginHorizontal: 16,
+  },
+});

package/src/commons/SelectUnit/__test__/SelectUnit.test.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { Platform } from 'react-native';
+import MockAdapter from 'axios-mock-adapter';
+
+import SelectUnit from '../index';
+import Text from '../../../commons/Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockedGoBack = jest.fn();
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+  };
+});
+
+const wrapComponent = (title, subTitle, onPressNext) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectUnit {...{ title, subTitle, onPressNext }} />
+  </SCProvider>
+);
+
+describe('test single SelectUnit', () => {
+  let tree;
+
+  test('fetch Unit success', async () => {
+    Platform.OS = 'android';
+    const response = {
+      status: 200,
+      success: true,
+      data: [
+        { id: 1, name: 'Unit 1' },
+        { id: 2, name: 'Unit 2' },
+      ],
+    };
+    mock.onGet(API.SHARE.UNITS()).reply(200, response.data);
+    await act(async () => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const unitName = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_NAME
+        ) === 0 && item.type === Text
+    );
+    const radioButton = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_RADIO_BUTTON
+        ) === 0
+    );
+    expect(unitName[0].props.children).toBe('Unit 1');
+    expect(unitName[1].props.children).toBe('Unit 2');
+    expect(radioButton[0].props.active).toBeFalsy();
+    expect(radioButton[1].props.active).toBeFalsy();
+    const selectUnit = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.SELECT_UNIT_SELECT}-1`
+    );
+    await act(async () => {
+      selectUnit[0].props.onPress();
+    });
+    expect(radioButton[0].props.active).toBeTruthy();
+  });
+
+  test('fetch Unit not success', async () => {
+    Platform.OS = 'ios';
+    mock.onGet(500);
+    await act(async () => {
+      tree = renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const unitName = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_NAME
+        ) === 0 && item.type === Text
+    );
+    const radioButton = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_RADIO_BUTTON
+        ) === 0
+    );
+    expect(unitName).toHaveLength(2);
+    expect(radioButton).toHaveLength(2);
+  });
+
+  test('click goBack', async () => {
+    await act(async () => {
+      tree = renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const goBack = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.PREFIX.SELECT_UNIT}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_LEFT_BUTTON}`
+    );
+
+    await act(async () => {
+      goBack.props.onPress();
+    });
+    expect(mockedGoBack).toBeCalled();
+  });
+});

package/src/commons/SelectUnit/index.js

@@ -0,0 +1,106 @@
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
+
+import { API } from '../../configs';
+import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
+import { axiosGet } from '../../utils/Apis/axios';
+import Text from '../../commons/Text';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import styles from './styles';
+
+const UnitItem = memo(({ index, item, setSelectedIndex, selectedIndex }) => {
+  const handleSelectIndex = useCallback(() => {
+    setSelectedIndex((currentIndex) => {
+      if (currentIndex !== index) {
+        return index;
+      }
+      return -1;
+    });
+  }, [index, setSelectedIndex]);
+
+  return (
+    <TouchableOpacity
+      key={index}
+      style={styles.rowContainer}
+      onPress={handleSelectIndex}
+      accessibilityLabel={`${AccessibilityLabel.SELECT_UNIT_SELECT}-${item.id}`}
+    >
+      <RadioCircle
+        active={selectedIndex === index}
+        accessibilityLabel={`${AccessibilityLabel.SELECT_UNIT_RADIO_BUTTON}-${item.id}`}
+      />
+      <View style={styles.row}>
+        <Text
+          style={styles.text}
+          accessibilityLabel={`${AccessibilityLabel.SELECT_UNIT_NAME}-${item.id}`}
+        >
+          {item.name}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+const SelectUnit = ({ title, subTitle, onPressNext }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [units, setUnits] = useState([]);
+
+  const onRightClick = useCallback(() => {
+    onPressNext(units[selectedIndex]);
+  }, [onPressNext, selectedIndex, units]);
+
+  useEffect(() => {
+    (async () => {
+      const { data, success } = await axiosGet(API.SHARE.UNITS());
+      if (success) {
+        const normalizeData = data.map((unit) => ({
+          name: unit.name,
+          id: unit.id,
+        }));
+        setUnits(normalizeData);
+      }
+    })();
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text semibold style={styles.title}>
+        {title}
+      </Text>
+      <Text style={styles.subtitle}>{subTitle}</Text>
+      <View style={styles.contentContainer}>
+        <ScrollView
+          style={styles.scrollContainer}
+          showsVerticalScrollIndicator={false}
+          scrollIndicatorInsets={{ right: 1 }}
+        >
+          <Section type={'border'}>
+            {units.map((item, index) => (
+              <UnitItem
+                key={item?.id?.toString()}
+                item={item}
+                index={index}
+                setSelectedIndex={setSelectedIndex}
+                selectedIndex={selectedIndex}
+              />
+            ))}
+          </Section>
+        </ScrollView>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={goBack}
+          rightTitle={t('next')}
+          rightDisabled={selectedIndex === -1}
+          onRightClick={onRightClick}
+          accessibilityLabelPrefix={AccessibilityLabel.PREFIX.SELECT_UNIT}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default SelectUnit;