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

package/src/screens/ScriptDetail/index.js

@@ -0,0 +1,241 @@
+import React, {
+  useCallback,
+  useMemo,
+  useState,
+  useRef,
+  useEffect,
+} from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import { Icon } from '@ant-design/react-native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './Styles/indexStyles';
+import Text from '../../commons/Text';
+import HowToStart from '../../../assets/images/HowToStart.svg';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { API, Colors, Images } from '../../configs';
+import { usePopover } from '../../hooks/Common';
+import MenuActionMore from '../../commons/MenuActionMore';
+import Add from '../../../assets/images/Add.svg';
+import { useNavigation, useRoute } from '@react-navigation/core';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import FImage from '../../commons/FImage';
+import Routes from '../../utils/Route';
+import { ToastBottomHelper } from '../../utils/Utils';
+
+const ScriptDetail = () => {
+  const { navigate } = useNavigation();
+  const { params = {} } = useRoute();
+  const refMenuAction = useRef();
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+  const t = useTranslations();
+  const { id, name = '' } = params;
+  const [isFavourite, setIsFavourite] = useState(false);
+  const [data, setData] = useState([]);
+
+  const listMenuItem = [
+    { text: 'Rename' },
+    { text: 'Activity Log' },
+    { text: 'Delete Script' },
+  ];
+
+  const onPressFavourite = useCallback(() => {
+    setIsFavourite(!isFavourite);
+  }, [isFavourite]);
+
+  const handleShowMenuAction = useCallback(
+    () => showPopoverWithRef(refMenuAction),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onItemClick = useCallback((item) => {
+    // eslint-disable-next-line no-alert
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onPressAdd = useCallback(() => {
+    // eslint-disable-next-line no-alert
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getOneTapDetail = useCallback(async () => {
+    const { success, data } = await axiosGet(API.AUTOMATE.ONE_TAP_DETAIL(id));
+    success && setData(data?.script_actions || []);
+  }, [id]);
+
+  const onPressEdit = useCallback(() => {
+    navigate(Routes.EditActionsList, { data, id, setData });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const onPressAddAction = useCallback(() => {
+    navigate(Routes.SelectDevice, {
+      unitId: 5,
+    });
+  }, [navigate]);
+
+  const handleScriptAction = useCallback(async () => {
+    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+    if (success) {
+      ToastBottomHelper.success(t('Activated successfully.'));
+    } else {
+      ToastBottomHelper.error(t('Activation failed.'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  const Item = useCallback(({ item, index }) => {
+    return (
+      <View style={styles.wrapItem}>
+        <View style={styles.leftItem}>
+          <Text color={Colors.Gray9} type="H4" semibold>
+            {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+          </Text>
+        </View>
+        <View style={styles.rightItem}>
+          <FImage
+            source={{ uri: item?.sensor_icon_kit }}
+            style={styles.iconItem}
+          />
+          <View style={styles.contentItem}>
+            <Text numberOfLines={1} type="Label" color={Colors.Gray7}>
+              {item?.station_name}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+              {item?.sensor_name}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+              {item?.action_name}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }, []);
+
+  const ItemAdd = useCallback(({ item, index }) => {
+    return (
+      <View style={styles.wrapItem}>
+        <View style={styles.leftItemAdd}>
+          <Text style={styles.number} type="H4" semibold color={Colors.Gray7}>
+            {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+          </Text>
+        </View>
+        <TouchableOpacity
+          onPress={onPressAddAction}
+          style={[styles.rightItemAdd]}
+        >
+          <Add />
+          <Text type="H4" color={Colors.Gray8} style={styles.addAction}>
+            {t('add_action')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const renderButtonStar = useMemo(() => {
+    return (
+      <TouchableOpacity
+        style={[styles.buttonStar, styles.headerButton]}
+        onPress={onPressFavourite}
+      >
+        {isFavourite ? (
+          <IconFill name="star" size={25} color={Colors.Yellow6} />
+        ) : (
+          <IconOutline name="star" size={25} />
+        )}
+      </TouchableOpacity>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFavourite]);
+
+  const rightComponent = useMemo(
+    () => (
+      <View style={styles.rightComponent}>
+        {renderButtonStar}
+        <TouchableOpacity onPress={onPressAdd} style={styles.headerButton}>
+          <Icon name={'plus'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={handleShowMenuAction}
+          ref={refMenuAction}
+          style={[styles.headerButton, styles.moreButton]}
+        >
+          <Icon name={'more'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isFavourite]
+  );
+
+  useEffect(() => {
+    getOneTapDetail();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={name}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+      >
+        <View style={styles.wrapContent}>
+          <Text type="H3" semibold>
+            {t('how_to_start')}
+          </Text>
+          <View style={styles.box}>
+            <HowToStart />
+            <View style={styles.wrapText}>
+              <Text type="H4" color={Colors.Gray9} semibold>
+                {t('launch_one_tap')}
+              </Text>
+              <Text type="Label" color={Colors.Gray8}>
+                {t('des_launch_one_tap')}
+              </Text>
+            </View>
+          </View>
+          <TouchableOpacity
+            onPress={handleScriptAction}
+            style={styles.activeButton}
+          >
+            <Image source={Images.activeButton} />
+          </TouchableOpacity>
+          <View style={styles.row}>
+            <Text type="H3" color={Colors.Gray9} semibold>
+              {t('active_list')}
+            </Text>
+            <TouchableOpacity onPress={onPressEdit} style={styles.editButton}>
+              <Text type="Label" hilight>
+                {t('edit')}
+              </Text>
+            </TouchableOpacity>
+          </View>
+          {data.map((item, index) => (
+            <Item key={item?.id} item={item} index={index} />
+          ))}
+          <ItemAdd index={data.length} />
+        </View>
+      </WrapHeaderScrollable>
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        onItemClick={onItemClick}
+        isTextCenter={false}
+        wrapStyle={styles.wrapStyle}
+      />
+    </View>
+  );
+};
+
+export default ScriptDetail;

package/src/screens/SharedUnit/TabHeader.js

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import Text from '../../commons/Text';
 
 import styles from './styles';
 
 const TabHeader = ({ current, getCurrentTab, showModal, textFilter }) => {
+  const t = useTranslations();
   const [currentTab, setCurrentTabState] = useState(current);
 
   useEffect(() => {

package/src/screens/SharedUnit/index.js

@@ -3,7 +3,7 @@ import { View, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import Modal from 'react-native-modal';
 import { axiosGet } from '../../utils/Apis/axios';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API } from '../../configs';
 import Text from '../../commons/Text';
@@ -21,6 +21,7 @@ import { useSCContextSelector } from '../../context';
 const Shared = () => {
   useBlockBackAndroid();
   useTitleHeader(t('text_shared_with_me'));
+  const t = useTranslations();
   const navigation = useNavigation();
   const [tab, setTabActiveState] = useState(0);
 
@@ -102,7 +103,7 @@ const Shared = () => {
         textFilter: t('text_can_edit'),
       },
     ],
-    []
+    [t]
   );
 
   return (

package/src/screens/Sharing/MemberList.js

@@ -7,7 +7,7 @@ import {
   View,
   ActivityIndicator,
 } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Routes from '../../utils/Route';
@@ -21,6 +21,7 @@ import { TESTID } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 
 const MemberList = ({ route }) => {
+  const t = useTranslations();
   const { navigate } = useNavigation();
   const account = useSCContextSelector((state) => state.auth.account);
   const { unitId, unit } = route.params;

package/src/screens/Sharing/SelectPermission.js

@@ -8,7 +8,7 @@ import {
   Platform,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
 import ViewButtonBottom from '../../commons/ViewButtonBottom';
@@ -23,6 +23,7 @@ import { TESTID } from '../../configs/Constants';
 let dataStationTemp = [];
 
 const SelectPermission = ({ route }) => {
+  const t = useTranslations();
   const { unit } = route.params;
   const navigation = useNavigation();
   const [dataStations, setDataStations] = useState([]);

package/src/screens/Sharing/SelectUser.js

@@ -7,7 +7,7 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors, Theme } from '../../configs';
 import AccountList from '../../commons/Auth/AccountList';
@@ -22,6 +22,7 @@ import { TESTID } from '../../configs/Constants';
 import Text from '../../commons/Text';
 
 const SelectUser = ({ route }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
   const { unit, permissions } = route.params;
   const [errorText, setErrorText] = useState('');
@@ -64,7 +65,7 @@ const SelectUser = ({ route }) => {
     }
     setErrorText('');
     sharePermissions(phone, email);
-  }, [content, sharePermissions]);
+  }, [content, sharePermissions, t]);
 
   const onPressNext = useCallback(() => {
     navigation.dangerouslyGetParent().goBack();

package/src/screens/Sharing/__test__/MemberList.test.js

@@ -8,7 +8,7 @@ import MemberList from '../MemberList';
 import { AlertAction } from '../../../commons';
 import SharingMembers from '../../../commons/Sharing/MemberList';
 import API from '../../../configs/API';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { TESTID } from '../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
 import Routes from '../../../utils/Route';
@@ -42,6 +42,7 @@ jest.mock('react-redux', () => {
 });
 
 describe('test MemberList', () => {
+  const t = useTranslations();
   let route;
   let account;
 

package/src/screens/Sharing/__test__/SelectUser.test.js

@@ -3,7 +3,7 @@ import { create, act } from 'react-test-renderer';
 import axios from 'axios';
 
 import SelectUser from '../SelectUser';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { TESTID } from '../../../configs/Constants';
 import { ViewButtonBottom, Button } from '../../../commons';
 import _TextInput from '../../../commons/Form/TextInput';
@@ -40,6 +40,7 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('test SelectUser container', () => {
+  const t = useTranslations();
   let tree;
   let route;
 

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { API } from '../../../configs';
 import Routes from '../../../utils/Route';
@@ -8,6 +8,7 @@ import { axiosDelete, axiosGet } from '../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../utils/Utils';
 
 const useDataMember = (unitId) => {
+  const t = useTranslations();
   const { navigate, addListener } = useNavigation();
   const [dataMembers, setDataMembers] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -30,7 +31,7 @@ const useDataMember = (unitId) => {
       );
       setDataMembers(dataMembers.filter((item) => item.share_id !== id));
     },
-    [dataMembers, unitId]
+    [dataMembers, t, unitId]
   );
   const leaveUnit = useCallback(
     (unitName) => async () => {
@@ -39,7 +40,7 @@ const useDataMember = (unitId) => {
       setDataMembers([]);
       navigate(Routes.Dashboard);
     },
-    [navigate, unitId]
+    [navigate, t, unitId]
   );
 
   const onRefresh = useCallback(async () => {
@@ -74,6 +75,7 @@ const useDataMember = (unitId) => {
 };
 
 const useStateAlertAction = () => {
+  const t = useTranslations();
   const [stateAlertAction, setStateAlertAction] = useState({
     visible: false,
     title: '',
@@ -85,19 +87,22 @@ const useStateAlertAction = () => {
   const hideAlertAction = useCallback(() => {
     setStateAlertAction({ ...stateAlertAction, visible: false });
   }, [stateAlertAction]);
-  const onPressRemoveUser = useCallback((member) => {
-    setStateAlertAction((action) => {
-      let name = member.name || 'N/A';
-      return {
-        ...action,
-        visible: true,
-        title: t('sharing_remove_user', { name: name }),
-        message: t('sharing_remove_user_message', { name: name }),
-        rightButton: t('remove'),
-        member: member,
-      };
-    });
-  }, []);
+  const onPressRemoveUser = useCallback(
+    (member) => {
+      setStateAlertAction((action) => {
+        let name = member.name || 'N/A';
+        return {
+          ...action,
+          visible: true,
+          title: t('sharing_remove_user', { name: name }),
+          message: t('sharing_remove_user_message', { name: name }),
+          rightButton: t('remove'),
+          member: member,
+        };
+      });
+    },
+    [t]
+  );
   const stateLeaveUnit = useCallback(() => {
     setStateAlertAction((action) => {
       return {
@@ -109,7 +114,7 @@ const useStateAlertAction = () => {
         member: null,
       };
     });
-  }, []);
+  }, [t]);
 
   return {
     stateAlertAction,

package/src/screens/SubUnit/AddSubUnit.js

@@ -2,15 +2,14 @@ import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import {
   View,
   Image,
-  StyleSheet,
   Keyboard,
   TouchableWithoutFeedback,
   SafeAreaView,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { API, Colors, Theme } from '../../configs';
+import { API, Colors } from '../../configs';
 import { ViewButtonBottom, ImagePicker } from '../../commons';
 import Text from '../../commons/Text';
 import _TextInput from '../../commons/Form/TextInput';
@@ -18,10 +17,12 @@ import Routes from '../../utils/Route';
 import { axiosPost, createFormData } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
 import { TESTID } from '../../configs/Constants';
+import styles from './AddSubUnitStyles';
 
 const AddSubUnit = ({ route }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
-  const { unit } = route.params;
+  const { unit, addType } = route.params;
   const [roomName, setRoomName] = useState('');
   const [wallpaper, setWallpaper] = useState('');
   const [imageUrl, setImageUrl] = useState('');
@@ -38,8 +39,14 @@ const AddSubUnit = ({ route }) => {
       }
     );
     if (success) {
-      //TODO remove redux
-      //dispatch(createSubUnit(data));
+      ToastBottomHelper.success(t('text_create_sub_unit_success'));
+
+      if (addType === 'AddNewGateway') {
+        navigation.navigate(Routes.AddCommonSelectSubUnit, {
+          ...route.params,
+        });
+        return;
+      }
       navigation.navigate(Routes.UnitStack, {
         screen: Routes.SubUnitDetail,
         params: {
@@ -47,11 +54,10 @@ const AddSubUnit = ({ route }) => {
           station: data,
         },
       });
-      ToastBottomHelper.success(t('text_create_sub_unit_success'));
     } else {
       ToastBottomHelper.error(t('text_create_sub_unit_fail'));
     }
-  }, [navigation, roomName, unit, wallpaper]);
+  }, [addType, navigation, roomName, route.params, t, unit, wallpaper]);
 
   const onChoosePhoto = useCallback(() => {
     setShowImagePicker(true);
@@ -132,68 +138,4 @@ const AddSubUnit = ({ route }) => {
   );
 };
 
-const styles = StyleSheet.create({
-  commonWrap: {
-    flex: 1,
-  },
-  wrap: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-  },
-  padding: {
-    paddingHorizontal: 16,
-  },
-  title: {
-    fontSize: 20,
-    marginTop: 20,
-    lineHeight: 28,
-    marginBottom: 16,
-  },
-  textInput: {
-    marginTop: 0,
-  },
-  formWrapper: {
-    ...Theme.whiteBoxRadius,
-    paddingTop: 0,
-    paddingBottom: 24,
-  },
-  roomName: {
-    borderWidth: 0,
-    borderBottomWidth: 1,
-    borderBottomColor: Colors.Primary,
-    paddingLeft: 0,
-    fontSize: 16,
-    lineHeight: 24,
-    margin: 0,
-    padding: 0,
-  },
-  wrapWallpaper: {
-    marginTop: 6,
-    borderBottomWidth: 1,
-    borderColor: Colors.Gray4,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  addWallpaper: {
-    fontSize: 16,
-    lineHeight: 24,
-    paddingBottom: 14,
-    paddingTop: 14,
-  },
-  wallpaper: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    marginRight: 8,
-  },
-  wallpaperEmpty: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    marginRight: 8,
-    backgroundColor: Colors.Pink1,
-  },
-});
-
 export default AddSubUnit;

package/src/screens/SubUnit/AddSubUnitStyles.js

@@ -0,0 +1,66 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Theme } from '../../configs';
+
+export default StyleSheet.create({
+  commonWrap: {
+    flex: 1,
+  },
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+  },
+  padding: {
+    paddingHorizontal: 16,
+  },
+  title: {
+    fontSize: 20,
+    marginTop: 20,
+    lineHeight: 28,
+    marginBottom: 16,
+  },
+  textInput: {
+    marginTop: 0,
+  },
+  formWrapper: {
+    ...Theme.whiteBoxRadius,
+    paddingTop: 0,
+    paddingBottom: 24,
+  },
+  roomName: {
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Primary,
+    paddingLeft: 0,
+    fontSize: 16,
+    lineHeight: 24,
+    margin: 0,
+    padding: 0,
+  },
+  wrapWallpaper: {
+    marginTop: 6,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  addWallpaper: {
+    fontSize: 16,
+    lineHeight: 24,
+    paddingBottom: 14,
+    paddingTop: 14,
+  },
+  wallpaper: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    marginRight: 8,
+  },
+  wallpaperEmpty: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    marginRight: 8,
+    backgroundColor: Colors.Pink1,
+  },
+});