@eohjsc/react-native-smart-city 0.6.2-rc9 → 0.7.0

package/src/utils/Route/index.js

@@ -19,7 +19,6 @@ const Routes = {
   EditSubUnit: 'EditSubUnit',
   Language: 'Language',
   SubUnit: 'SubUnit',
-  SubUnitDetail: 'SubUnitDetail',
   DeviceDetail: 'DeviceDetail',
   HanetCameraStack: 'HanetCameraStack',
   HanetCameraDetail: 'HanetCameraDetail',

package/src/utils/Storage.js

@@ -1,4 +1,4 @@
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export const STORAGE_KEY = {
   FIREBASE_APP_CONFIG: 'app_config',

package/src/commons/Device/WindSpeed/LinearChart/__test__/LinearChart.test.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import Svg from 'react-native-svg';
-import LinearChart from '../';
-import renderer, { act } from 'react-test-renderer';
-import { SCProvider } from '../../../../../context';
-import { mockSCStore } from '../../../../../context/mockStore';
-
-Date.now = jest.fn(() => 1487076708000);
-
-const wrapComponent = (chartOptions, datasShow) => (
-  <SCProvider initState={mockSCStore({})}>
-    <LinearChart chartOptions={chartOptions} datasShow={datasShow} />
-  </SCProvider>
-);
-
-describe('Test LinearChart', () => {
-  let wrapper;
-
-  it('LinearChart render', async () => {
-    const chartOptions = {
-      showAll: true,
-    };
-    const datasShow = [
-      {
-        data: [
-          {
-            x: 0,
-            y: 1,
-          },
-          {
-            x: 1,
-            y: 2,
-          },
-          {
-            x: 2,
-            y: 3,
-          },
-        ],
-      },
-    ];
-    await act(async () => {
-      wrapper = renderer.create(wrapComponent(chartOptions, datasShow));
-    });
-    const instance = wrapper.root;
-    const Svgs = instance.findAllByType(Svg);
-    expect(Svgs).toHaveLength(1);
-  });
-});

package/src/commons/Device/WindSpeed/LinearChart/index.js

@@ -1,155 +0,0 @@
-import React, { memo } from 'react';
-import Svg, { G } from 'react-native-svg';
-import {
-  VictoryLine,
-  VictoryAxis,
-  VictoryScatter,
-  VictoryTooltip,
-} from 'victory-native';
-import { useTranslations } from '../../../../hooks/Common/useTranslations';
-
-import { Colors } from '../../../../configs';
-import ChartLoading from '../../../ChartLoading';
-import ValueBalloon from '../../../Device/WindSpeed/LinearChart/ValueBalloon';
-import { getMaxValueIndex } from '../../../../utils/chartHelper/getMaxValueIndex';
-import getTickValues from '../../../../utils/dateHelper/getTickValues';
-
-const LinearChart = memo(
-  ({
-    startTime,
-    endTime,
-    datasShow,
-    configuration,
-    datasColor,
-    chartOptions,
-  }) => {
-    const t = useTranslations();
-    const datas = chartOptions.showAll
-      ? datasShow
-      : datasShow.filter((item, index) => index === chartOptions.index);
-    if (!datasShow[0].data) {
-      return <ChartLoading />;
-    }
-    if (!datasShow[0].data.length) {
-      return <ChartLoading message={t('no_data')} />;
-    }
-    const chartTick = getTickValues(datas[0], configuration).stringArr;
-    const maxValue = getMaxValueIndex(datas[0].data);
-
-    return (
-      <Svg width={'100%'} height={300} style>
-        <G x={-12} y={-12}>
-          <VictoryAxis
-            dependentAxis
-            domain={[0, maxValue.max.y * 1.2]}
-            offsetX={50}
-            orientation="left"
-            standalone={false}
-            style={styleVerticalAxis}
-          />
-          <VictoryAxis
-            crossAxis
-            scale="time"
-            standalone={false}
-            style={styleHorizontalAxis}
-            tickValues={chartTick}
-          />
-          {datas.map((item, index) => {
-            const tickValues = getTickValues(item).arr;
-            const maxValueLine = getMaxValueIndex(item.data);
-            return (
-              <G key={index.toString()}>
-                <VictoryLine
-                  data={item.data}
-                  domain={{
-                    x: [tickValues[0], tickValues[tickValues.length - 1]],
-                    y: [0, maxValueLine.max.y * 1.2],
-                  }}
-                  style={{
-                    data: { stroke: item.color },
-                  }}
-                  interpolation="monotoneX"
-                  scale={{ x: 'time', y: 'linear' }}
-                  standalone={false}
-                />
-              </G>
-            );
-          })}
-          {datas.map((item, index) => {
-            const scatterValues = getTickValues(item).stringDataArr;
-            const maxValueLine = getMaxValueIndex(item.data);
-            return (
-              <G key={index}>
-                <VictoryScatter
-                  standalone={false}
-                  data={scatterValues}
-                  labels={(datum) => {
-                    if (item.measure === 'pH') {
-                      return `${item.measure} ${datum.y.toString()}`;
-                    }
-                    return `${datum.y.toString()} ${item.measure}`;
-                  }}
-                  labelComponent={
-                    <VictoryTooltip
-                      flyoutComponent={<ValueBalloon />}
-                      renderInPortal={false}
-                    />
-                  }
-                  domain={{ y: [0, maxValueLine.max.y * 1.2] }}
-                  samples={25}
-                  size={5}
-                  style={{ ...styleScatter, data: { fill: item.color } }}
-                />
-              </G>
-            );
-          })}
-        </G>
-      </Svg>
-    );
-  }
-);
-
-export default LinearChart;
-
-const styleVerticalAxis = {
-  axis: { stroke: Colors.Gray4, strokeWidth: 1 },
-  ticks: {
-    size: 5,
-    stroke: 'black',
-    strokeWidth: 0,
-  },
-  tickLabels: {
-    fill: Colors.Gray8,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 10,
-  },
-  grid: {
-    fill: 'none',
-    stroke: Colors.Gray4,
-    strokeDasharray: '5,5',
-    pointerEvents: 'painted',
-  },
-};
-
-const styleHorizontalAxis = {
-  axis: { stroke: 'black', strokeWidth: 0 },
-  ticks: {
-    size: 10,
-    stroke: 'black',
-    strokeWidth: 0,
-  },
-  tickLabels: {
-    fill: Colors.Gray8,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 10,
-  },
-};
-
-const styleScatter = {
-  labels: {
-    fill: Colors.White,
-    padding: 14,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 12,
-  },
-};

package/src/screens/AddNewGateway/hooks/__Tests__/index.test.js

@@ -1,27 +0,0 @@
-import { act, renderHook } from '@testing-library/react-hooks';
-import MockAdapter from 'axios-mock-adapter';
-import api from '../../../../utils/Apis/axios';
-import { useConnectGateway } from '..';
-
-import { API } from '../../../../configs';
-
-const mock = new MockAdapter(api.axiosInstance);
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      dangerouslyGetParent: () => ({
-        dangerouslyGetState: jest.fn(),
-      }),
-    }),
-  };
-});
-describe('Test useHomeAssistantConnection', () => {
-  it('test connectGoogleHome all connected', async () => {
-    const { result } = renderHook(() => useConnectGateway(1));
-    await act(async () => {
-      await result.current.onPressDone();
-    });
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, {});
-  });
-});

package/src/screens/AddNewGateway/hooks/index.js

@@ -1,31 +0,0 @@
-import { useCallback } from 'react';
-import { useNavigation } from '@react-navigation/native';
-import { axiosGet } from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
-
-const useConnectGateway = (unit_id) => {
-  const navigation = useNavigation();
-
-  const fetchDetails = useCallback(async () => {
-    const { success: fetchSuccess, data: unit } = await axiosGet(
-      API.UNIT.UNIT_DETAIL(unit_id),
-      {},
-      true
-    );
-    return { fetchSuccess, unit };
-  }, [unit_id]);
-
-  const onPressDone = useCallback(async () => {
-    const { fetchSuccess } = await fetchDetails();
-    if (!fetchSuccess) {
-      return;
-    }
-    navigation.dangerouslyGetParent().pop();
-  }, [fetchDetails, navigation]);
-
-  return {
-    onPressDone,
-  };
-};
-
-export { useConnectGateway };

package/src/screens/SubUnit/Detail.js

@@ -1,150 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import { get } from 'lodash';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-
-import Routes from '../../utils/Route';
-import { usePopover } from '../../hooks/Common';
-import Text from '../../commons/Text';
-import ItemDevice from '../../commons/Device/ItemDevice';
-import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
-import MediaPlayer from '../../commons/MediaPlayer';
-import { MenuActionMore } from '../../commons';
-import { useSCContextSelector } from '../../context';
-import styles from './DetailStyles';
-
-const SubUnitDetail = ({ route }) => {
-  const t = useTranslations();
-  const { unit, station } = route?.params || {};
-  const language = useSCContextSelector((state) => state.language);
-  const navigation = useNavigation();
-  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
-    usePopover();
-
-  const currentUserId = useSCContextSelector((state) =>
-    get(state, 'auth.account.user.id', 0)
-  );
-
-  const canManageSubUnit = useCallback(() => {
-    return currentUserId === unit.user_id;
-  }, [currentUserId, unit]);
-  const stationState = station;
-
-  const devices = stationState.sensors;
-
-  const listMenuItem = useMemo(
-    () => [
-      {
-        route: Routes.ManageSubUnit,
-        data: { station: stationState },
-        text: t('manage_sub_unit'),
-      },
-    ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [stationState, language]
-  );
-
-  const onItemClick = useCallback(
-    (routeName, data) => {
-      hidePopover();
-      routeName && navigation.navigate(routeName, data);
-    },
-    [navigation, hidePopover]
-  );
-
-  const onBack = useCallback(() => {
-    const { routes } = navigation.dangerouslyGetParent().dangerouslyGetState();
-    const calledByRoute = routes[routes.length - 1].name;
-    if (calledByRoute === Routes.AddSubUnitStack) {
-      // go from dashboard
-      navigation.dangerouslyGetParent().pop(2);
-    } else {
-      navigation.pop(2);
-    }
-  }, [navigation]);
-
-  const onItemClickAddMore = useCallback(
-    (item) => {
-      onItemClick(item.route, item.data);
-      item.onPress && item.onPress();
-    },
-    [onItemClick]
-  );
-
-  const onAdd = useCallback(() => {
-    navigation.navigate(Routes.AddGatewayStack, {
-      screen: Routes.SelectDeviceType,
-      params: {
-        stationName: station.name,
-        stationId: station.id,
-        unit,
-      },
-    });
-  }, [navigation, station, unit]);
-
-  return (
-    <WrapParallaxScrollView
-      uriImg={stationState.background}
-      title={stationState.name}
-      onBack={onBack}
-      onAdd={onAdd}
-      onMore={showPopoverWithRef}
-      childRef={childRef}
-      hideRight={!canManageSubUnit()}
-    >
-      <View style={styles.wrap}>
-        {stationState.camera && (
-          <>
-            <Text style={styles.subUnitTitle}>{t('camera')}</Text>
-            <View style={styles.boxCamera}>
-              <MediaPlayer
-                uri={stationState.camera.uri}
-                key={`camera-${stationState.camera.id}`}
-              />
-            </View>
-          </>
-        )}
-        {devices?.length !== 0 ? (
-          <View>
-            <Text style={styles.subUnitTitle}>
-              {t('text_all_devices')} ({devices?.length})
-            </Text>
-            <View style={styles.boxDevices}>
-              {devices?.map((item, index) => {
-                return (
-                  <ItemDevice
-                    key={`sensor-${item.id}`}
-                    id={item.id}
-                    statusIcon={item.action && item.action.icon}
-                    statusColor={item.action && item.action.color}
-                    title={item.name}
-                    description={item.value}
-                    index={index}
-                    sensor={item}
-                    unit={unit}
-                    station={station}
-                  />
-                );
-              })}
-            </View>
-          </View>
-        ) : (
-          <View style={styles.boxEmptyDevices}>
-            <Text style={styles.emptyDevice}>{t('empty_device')}</Text>
-          </View>
-        )}
-      </View>
-
-      <MenuActionMore
-        isVisible={showingPopover}
-        hideMore={hidePopover}
-        listMenuItem={listMenuItem}
-        childRef={childRef}
-        onItemClick={onItemClickAddMore}
-      />
-    </WrapParallaxScrollView>
-  );
-};
-
-export default SubUnitDetail;

package/src/screens/SubUnit/__test__/Detail.test.js

@@ -1,125 +0,0 @@
-import React from 'react';
-import { act, create } from 'react-test-renderer';
-import Toast from 'react-native-toast-message';
-import SubUnitDetail from '../Detail';
-import ItemDevice from '../../../commons/Device/ItemDevice';
-import Routes from '../../../utils/Route';
-import WrapParallaxScrollView from '../../../commons/WrapParallaxScrollView';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import { AccessibilityLabel } from '../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
-
-const mockedNavigate = jest.fn();
-const mockedDispatch = jest.fn();
-const mockedDangerouslyGetState = jest.fn();
-const mockedDangerouslyGetStatePop = jest.fn();
-const mockedPop = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-      dangerouslyGetParent: () => ({
-        dangerouslyGetState: mockedDangerouslyGetState,
-        pop: mockedDangerouslyGetStatePop,
-      }),
-      pop: mockedPop,
-    }),
-    useIsFocused: jest.fn(),
-  };
-});
-
-const wrapComponent = (route) => (
-  <SCProvider initState={mockSCStore({})}>
-    <SubUnitDetail route={route} />
-  </SCProvider>
-);
-
-describe('Test SubUnitDetail', () => {
-  let route;
-
-  beforeEach(() => {
-    route = {
-      params: {
-        unit: {
-          id: 1,
-          user_id: 1,
-          name: 'Unit name',
-        },
-        station: {
-          id: 2,
-          name: 'Station name',
-          background: '',
-        },
-      },
-    };
-  });
-
-  afterEach(() => {
-    mockedDispatch.mockClear();
-    Toast.show.mockClear();
-  });
-  let tree;
-
-  it('ItemDevice', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const itemDevices = instance.findAllByType(ItemDevice);
-    expect(itemDevices).toHaveLength(0);
-  });
-
-  it('onBack', async () => {
-    mockedDangerouslyGetState.mockImplementation(() => ({
-      routes: [
-        { name: 'route 1' },
-        { name: 'route 2' },
-        { name: Routes.AddSubUnitStack },
-      ],
-    }));
-
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const wrapScrollView = instance.findByType(WrapParallaxScrollView);
-    await act(async () => {
-      await wrapScrollView.props.onBack();
-    });
-    expect(mockedDangerouslyGetStatePop).toHaveBeenCalledWith(2);
-  });
-
-  it('click Menu ActionMore', async () => {
-    mockedDangerouslyGetState.mockImplementation(() => ({
-      routes: [
-        { name: 'route 1' },
-        { name: 'route 2' },
-        { name: Routes.AddSubUnitStack },
-      ],
-    }));
-
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const button = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-          AccessibilityLabel.HEADER_UNIT_BUTTON_BACK &&
-        el.type === TouchableOpacity
-    );
-    await act(async () => {
-      button.props.onPress();
-    });
-    const buttonOnActionPress = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-          AccessibilityLabel.HEADER_UNIT_BUTTON_MORE &&
-        el.type === TouchableOpacity
-    );
-    expect(buttonOnActionPress).toHaveLength(1);
-  });
-});

package/src/screens/UnitSummary/components/Temperature/ChartAverage/index.js

@@ -1,62 +0,0 @@
-import React, { memo } from 'react';
-import { View } from 'react-native';
-import {
-  VictoryChart,
-  VictoryLine,
-  VictoryTheme,
-  VictoryScatter,
-  VictoryGroup,
-  VictoryAxis,
-  VictoryArea,
-} from 'victory-native';
-import { Colors } from '../../../../../configs';
-
-const ChartAverage = memo(({ labels, tempData, humiData }) => {
-  const dataChartTemp = tempData;
-  const dataChartHumidity = humiData;
-  return (
-    <View style={{}}>
-      <VictoryChart
-        theme={VictoryTheme.material}
-        padding={{ top: 10, bottom: 30, left: 36, right: 36 }}
-        height={135}
-      >
-        <VictoryAxis
-          style={axisX}
-          tickFormat={(t, index) => {
-            if (index % 4 === 0) {
-              return t;
-            }
-            return null;
-          }}
-        />
-        <VictoryAxis dependentAxis style={axisY} />
-        <VictoryGroup color={'rgba(255,34,45,1)'} data={dataChartTemp}>
-          <VictoryLine />
-          <VictoryArea style={{ data: { fill: 'rgba(255,34,45,0.3)' } }} />
-          <VictoryScatter size={5} />
-        </VictoryGroup>
-        <VictoryGroup color={'rgba(24,144,255,1)'} data={dataChartHumidity}>
-          <VictoryLine />
-          <VictoryArea style={{ data: { fill: 'rgba(24,144,255,0.3)' } }} />
-          <VictoryScatter size={5} />
-        </VictoryGroup>
-      </VictoryChart>
-    </View>
-  );
-});
-
-const axisX = {
-  axis: { fill: Colors.Gray4, stroke: Colors.Gray4, strokeWidth: 2 },
-  grid: { fill: 'none', stroke: 'none' },
-  ticks: { size: 0 },
-  tickLabels: { fontSize: 12, fill: Colors.Gray8, padding: 13 },
-};
-const axisY = {
-  axis: { stroke: Colors.Gray4 },
-  axisLabel: { fontSize: 20, padding: 30 },
-  grid: { fill: 'none', stroke: 'none' },
-  ticks: { size: 0 },
-  tickLabels: { fontSize: 0 },
-};
-export default ChartAverage;

package/src/screens/UnitSummary/components/Temperature/__test__/ChartAverage.test.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { act, create } from 'react-test-renderer';
-
-import ChartAverage from '../ChartAverage';
-
-describe('Test ChartAverage', () => {
-  let tree;
-  it('render ChartAverage', async () => {
-    await act(async () => {
-      tree = await create(<ChartAverage />);
-    });
-    const instance = tree.root;
-    const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(3);
-  });
-});

package/src/utils/dateHelper/getTickValues.js

@@ -1,22 +0,0 @@
-import moment from 'moment';
-
-const getTickValues = (chart, configuration) => {
-  const dateFormat = configuration ? configuration.date_format : null;
-  let arr = [];
-  let stringArr = [];
-  let stringDataArr = [];
-  for (let i = 0; i < chart.data.length; i++) {
-    let checkHad = arr.findIndex((item) => item === chart.data[i].x);
-    if (checkHad < 0) {
-      arr.push(chart.data[i].x);
-      stringArr.push(moment(chart.data[i].x).format(dateFormat));
-      stringDataArr.push({
-        x: moment(chart.data[i].x).format(dateFormat),
-        y: chart.data[i].y,
-      });
-    }
-  }
-  return { arr, stringArr, stringDataArr };
-};
-
-export default getTickValues;