@eohjsc/react-native-smart-city 0.2.19 → 0.2.23

package/src/iot/RemoteControl/__test__/GoogleHome.test.js

@@ -1,6 +1,6 @@
 import { createConnection, getStates } from 'home-assistant-js-websocket';
 import Toast from 'react-native-toast-message';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import axios from 'axios';
 import {
   googleHomeConnect,
@@ -30,6 +30,7 @@ getStates.mockImplementation(() => []);
 createConnection.mockImplementation(() => connection);
 
 describe('Remote Control Google Home', () => {
+  const t = useTranslations();
   const options = [
     {
       auth: {},

package/src/iot/RemoteControl/__test__/Internet.test.js

@@ -1,4 +1,4 @@
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import Toast from 'react-native-toast-message';
 import axios from 'axios';
@@ -7,6 +7,7 @@ import { sendCommandOverInternet } from '../Internet';
 jest.mock('axios');
 
 describe('Test IOT Remote Control Internet', () => {
+  const t = useTranslations();
   beforeEach(() => {
     Toast.show.mockClear();
     axios.post.mockClear();

package/src/iot/RemoteControl/__test__/index.test.js

@@ -6,10 +6,11 @@ import {
 } from './index.mock.js'; // need to be imported first in the file
 import { sendRemoteCommand } from '../index';
 import Toast from 'react-native-toast-message';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { SEND_COMMAND_OVER_BLUETOOTH_FAIL } from '../Bluetooth';
 
 describe('Test Remote Control', () => {
+  const t = useTranslations();
   beforeEach(() => {
     Toast.show.mockClear();
     mockSendCommandOverBluetooth.mockClear();

package/src/iot/RemoteControl/index.js

@@ -5,7 +5,7 @@ import {
 import { sendCommandOverInternet } from './Internet';
 import { sendCommandOverGoogleHome } from './GoogleHome';
 import { ToastBottomHelper } from '../../utils/Utils';
-import { t } from 'i18n-js';
+import t from '../../hooks/Common/useTranslations';
 import { sendCommandOverLGThinq } from './LG';
 
 export const sendRemoteCommand = async (sensor, action, data) => {

package/src/iot/states.js

@@ -2,6 +2,7 @@ import { createGlobalState } from 'react-hooks-global-state';
 
 const { useGlobalState, setGlobalState, getGlobalState } = createGlobalState({
   configValues: {},
+  lang: 'en',
 });
 
 export const useConfigGlobalState = useGlobalState;

package/src/navigations/AddGatewayStack.js

@@ -7,6 +7,7 @@ import Route from '../utils/Route';
 import ConnectedGateway from '../screens/AddNewGateway/ConnectedGateway';
 import ConnectingGateway from '../screens/AddNewGateway/ConnectingGateway';
 import SetupGatewayWifi from '../screens/AddNewGateway/SetupGatewayWifi';
+import AddCommonSelectSubUnit from '../screens/AddCommon/SelectSubUnit';
 
 const Stack = createStackNavigator();
 
@@ -22,6 +23,10 @@ export const AddGatewayStack = memo(() => {
         component={SetupGatewayWifi}
       />
       <Stack.Screen name={Route.AddNewGateway} component={AddNewGateway} />
+      <Stack.Screen
+        name={Route.AddCommonSelectSubUnit}
+        component={AddCommonSelectSubUnit}
+      />
       <Stack.Screen name={Route.ScanChipQR} component={ScanChipQR} />
       <Stack.Screen
         name={Route.ConnectingGateway}

package/src/navigations/AddNewActionStack.js

@@ -0,0 +1,23 @@
+import { createStackNavigator } from '@react-navigation/stack';
+import React, { memo } from 'react';
+
+import SelectDevice from '../screens/AddNewAction/SelectDevice';
+import Route from '../utils/Route';
+
+const Stack = createStackNavigator();
+
+export const AddNewActionStack = memo((props) => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen
+        name={Route.SelectDevice}
+        component={SelectDevice}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  );
+});

package/src/navigations/SharedStack.js

@@ -3,7 +3,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { Icon } from '@ant-design/react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../hooks/Common/useTranslations';
 
 import Shared from '../screens/SharedUnit';
 import { Colors } from '../configs';
@@ -11,6 +11,7 @@ import Routes from '../utils/Route';
 
 const Stack = createStackNavigator();
 const SharedStack = memo(() => {
+  const t = useTranslations();
   const navigation = useNavigation();
   return (
     <Stack.Navigator>

package/src/navigations/UnitStack.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { createStackNavigator } from '@react-navigation/stack';
-import { t } from 'i18n-js';
+import { useTranslations } from '../hooks/Common/useTranslations';
 import { Colors, Device } from '../configs';
 import Route from '../utils/Route';
 import ActivityLogScreen from '../screens/ActivityLog';
@@ -21,12 +21,22 @@ import UVIndexGuide from '../screens/UVIndexGuide';
 import TDSGuide from '../screens/TDSGuide';
 import WaterQualityGuide from '../screens/WaterQualityGuide';
 import DeviceInfo from '../screens/DeviceInfo';
+import AddNewOneTap from '../screens/AddNewOneTap';
+import AddNewScriptAction from '../screens/AddNewScriptAction';
+import PlaybackCamera from '../screens/PlayBackCamera';
+import AllCamera from '../screens/AllCamera';
+import ManageAccessScreen from '../screens/ManageAccess';
+import GuestInfo from '../screens/GuestInfo';
+import ScriptDetail from '../screens/ScriptDetail';
+import EditActionsList from '../screens/EditActionsList';
+import SelectDevice from '../screens/AddNewAction/SelectDevice';
 
 import _ from 'lodash';
 
 const Stack = createStackNavigator();
 
 export const UnitStack = memo((props) => {
+  const t = useTranslations();
   return (
     <Stack.Navigator
       screenOptions={{
@@ -149,6 +159,67 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.PlaybackCamera}
+        component={PlaybackCamera}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.AllCamera}
+        component={AllCamera}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.ManageAccess}
+        component={ManageAccessScreen}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.GuestInfo}
+        component={GuestInfo}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.AddNewOneTap}
+        component={AddNewOneTap}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.ScriptDetail}
+        component={ScriptDetail}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.EditActionsList}
+        component={EditActionsList}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.AddNewScriptAction}
+        component={AddNewScriptAction}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.SelectDevice}
+        component={SelectDevice}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 });

package/src/screens/AQIGuide/index.js

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   SafeAreaView,
 } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors, Theme } from '../../configs';
 import useTitleHeader from '../../hooks/Common/useTitleHeader';
@@ -23,7 +23,7 @@ import { useSCContextSelector } from '../../context';
 const AQIGuide = memo(() => {
   useTitleHeader(t('AQI Guide'));
   const language = useSCContextSelector((state) => state.language);
-
+  const t = useTranslations();
   const data = useMemo(
     () => ({
       titles: [

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

@@ -53,8 +53,8 @@ export default (sensor) => {
       } else {
         dataTemp = dataTemp.concat(results);
         setData(getDataForList(dataTemp));
-        setIsCanLoadMore(page < Math.ceil(data.count / 20));
       }
+      setIsCanLoadMore(page < Math.ceil(data.count / 20));
     }
     page === 1 ? setIsRefreshing(false) : setIsLoading(false);
   };

package/src/screens/ActivityLog/index.js

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 import { View, Text, SectionList, ActivityIndicator } from 'react-native';
 import moment from 'moment';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import { HeaderCustom } from '../../commons/Header';
 import { getTitleFromTime } from '../../utils/Converter/time';
@@ -13,6 +13,7 @@ import styles from './Styles/indexStyles';
 const keyExtractor = (item) => item.id;
 
 const ActivityLogScreen = () => {
+  const t = useTranslations();
   const { params = {} } = useRoute();
   const { sensor } = params;
   const { data, isLoading, isRefreshing, onLoadMore, onRefresh } =

package/src/screens/AddCommon/SelectSubUnit.js

@@ -0,0 +1,143 @@
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import React, { useCallback, useEffect, useState } from 'react';
+import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
+
+import { API } from '../../configs';
+import { Section, RadioCircle, ViewButtonBottom } from '../../commons';
+import { axiosGet } from '../../utils/Apis/axios';
+import Text from '../../commons/Text';
+import Routes from '../../utils/Route';
+import { TESTID } from '../../configs/Constants';
+import styles from './SelectSubUnitStyles';
+import Button from '../../commons/Button';
+
+const AddCommonSelectSubUnit = ({ route }) => {
+  const t = useTranslations();
+  const navigation = useNavigation();
+  const isFocused = useIsFocused();
+  const { addType, unit_id } = route.params;
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [unit, setUnit] = useState([]);
+  const [title, setTitle] = useState('');
+  const [subTitle, setSubTitle] = useState('');
+
+  useEffect(() => {
+    switch (addType) {
+      case 'AddNewGateway':
+        setTitle(t('add_new_gateway'));
+        setSubTitle(t('select_a_sub_unit'));
+        break;
+      default:
+        setTitle(t('add_new_gateway'));
+        setSubTitle(t('select_a_sub_unit'));
+        break;
+    }
+  }, [title, subTitle, addType, t]);
+
+  const fetchDetails = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.UNIT.UNIT_DETAIL(unit_id),
+      {},
+      true
+    );
+    if (success) {
+      setUnit(data);
+    }
+  }, [unit_id]);
+
+  useEffect(() => {
+    isFocused && fetchDetails();
+  }, [fetchDetails, isFocused]);
+
+  const subUnits = unit.stations || [];
+
+  const onPressNext = useCallback(() => {
+    switch (addType) {
+      case 'AddNewGateway':
+        navigation.navigate(Routes.ScanChipQR, {
+          station: subUnits[selectedIndex].id,
+          unit_name: unit.name,
+          ...route.params,
+        });
+        break;
+      default:
+        break;
+    }
+  }, [addType, navigation, subUnits, selectedIndex, unit.name, route.params]);
+
+  const handleSelectIndex = (index) => {
+    if (index !== selectedIndex) {
+      setSelectedIndex(index);
+    } else {
+      setSelectedIndex(-1);
+    }
+  };
+
+  const addSubUnit = useCallback(() => {
+    navigation.navigate(Routes.AddSubUnitStack, {
+      screen: Routes.AddSubUnit,
+      params: { unit, ...route.params },
+    });
+  }, [navigation, unit, route.params]);
+
+  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}
+        >
+          <Section type={'border'}>
+            {subUnits.map((item, index) => (
+              <TouchableOpacity
+                key={index}
+                style={styles.rowContainer}
+                onPress={() => handleSelectIndex(index)}
+              >
+                <RadioCircle
+                  active={selectedIndex === index}
+                  testID={TESTID.SELECT_UNIT_RADIO_BUTTON}
+                />
+                <TouchableOpacity
+                  style={styles.row}
+                  onPress={() => handleSelectIndex(index)}
+                  testID={TESTID.SELECT_UNIT_SELECT}
+                >
+                  <Text style={styles.text} testID={TESTID.SELECT_UNIT_NAME}>
+                    {item.name}
+                  </Text>
+                </TouchableOpacity>
+              </TouchableOpacity>
+            ))}
+          </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={() => navigation.goBack()}
+          rightTitle={t('next')}
+          rightDisabled={selectedIndex === -1}
+          onRightClick={onPressNext}
+          testIDPrefix={TESTID.PREFIX.SELECT_UNIT}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default AddCommonSelectSubUnit;

package/src/screens/AddCommon/SelectSubUnitStyles.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/screens/AddCommon/SelectUnit.js

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
   SafeAreaView,
@@ -19,6 +19,7 @@ import Routes from '../../utils/Route';
 import { TESTID } from '../../configs/Constants';
 
 const AddCommonSelectUnit = ({ route }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
   const { addType } = route.params;
   const [selectedIndex, setSelectedIndex] = useState(-1);
@@ -49,7 +50,7 @@ const AddCommonSelectUnit = ({ route }) => {
         setSubTitle(t('add_new_subunit_select_unit'));
         break;
     }
-  }, [title, subTitle, addType]);
+  }, [title, subTitle, addType, t]);
 
   useEffect(() => {
     (async () => {

package/src/screens/AddLocationMaps/index.js

@@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native';
 import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -17,6 +17,7 @@ const initialRegion = {
 };
 
 const AddLocationMaps = memo(() => {
+  const t = useTranslations();
   const { goBack } = useNavigation();
   const [color, setColor] = useState(Colors.Black);
   useEffect(() => {

package/src/screens/AddNewAction/Device/DeviceStyles.js

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 16;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 96;
+
+export default StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 4,
+    width: widthItem,
+    height: heightItem,
+    backgroundColor: Colors.White,
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  active: {
+    borderColor: Colors.Primary,
+    borderWidth: 2,
+  },
+  boxIcon: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  lineHeight22: {
+    lineHeight: 22,
+  },
+  iconSensor: {
+    width: 40,
+    height: 40,
+    resizeMode: 'contain',
+  },
+});

package/src/screens/AddNewAction/Device/index.js

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { Colors } from '../../../configs';
+import Text from '../../../commons/Text';
+import IconComponent from '../../../commons/IconComponent';
+import styles from './DeviceStyles';
+
+const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
+  const isActive = isSelectDevice && styles.active;
+
+  const onPressDevice = () => {
+    onPress && onPress(sensor);
+  };
+
+  return (
+    <TouchableWithoutFeedback onPress={onPressDevice}>
+      <View style={[styles.container, isActive]}>
+        <View style={styles.boxIcon}>
+          <IconComponent
+            icon={svgMain}
+            iconKit={sensor.icon_kit}
+            style={styles.iconSensor}
+          />
+        </View>
+        <Text numberOfLines={1} semibold type="Body" color={Colors.Gray9}>
+          {title}
+        </Text>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+});
+
+export default Device;