@eohjsc/react-native-smart-city 0.2.86 → 0.2.89

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -0,0 +1,208 @@
+import React, { memo, useCallback, useState, useMemo } from 'react';
+import { View, TouchableOpacity, Alert } from 'react-native';
+import WrapHeaderScrollable from '../../../../commons/Sharing/WrapHeaderScrollable';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import SmartTiviActionTemplate from '../../../../commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate';
+import Text from '../../../../commons/Text';
+import { ModalCustom } from '../../../../commons/Modal';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Colors } from '../../../../configs';
+import TextInput from '../../../../commons/Form/TextInput';
+import { ButtonsBottom } from './ButtonsBottom';
+
+import { Remote, SmartIr, Union } from '../../../../Images/SmartIr';
+
+import styles from './GroupButtonByTypeStyles';
+
+const GroupButtonByType = memo(({ route }) => {
+  const t = useTranslations();
+  const [groupButton] = useState({ id: 1, template: 'tivi' });
+  const [isLearn, setIsLearn] = useState(false);
+  const [isShowModal, setIsShowModal] = useState(false);
+  const [learnSuccess, setLearnSuccess] = useState(false);
+  const [select, setSelect] = useState(false);
+  const [text, setText] = useState('');
+
+  const GroupButtonTemplate = useCallback(() => {
+    switch (groupButton?.template) {
+      case 'tivi':
+        return <SmartTiviActionTemplate />;
+      default:
+        return <></>;
+    }
+  }, [groupButton]);
+  const rightButtonHeader = useCallback(
+    (type) => () => {
+      switch (type) {
+        case 'reload':
+        case 'more':
+        case 'done':
+          return Alert.alert(t('feature_under_development'));
+        default:
+          return <></>;
+      }
+    },
+    [t]
+  );
+  const rightComponent = useMemo(
+    () => (
+      <View style={styles.rightComponent}>
+        {!isLearn ? (
+          <>
+            <TouchableOpacity
+              onPress={rightButtonHeader('reload')}
+              style={[styles.headerButton]}
+            >
+              <IconOutline name={'reload'} size={27} color={Colors.Black} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={rightButtonHeader('more')}
+              style={[styles.headerButton]}
+            >
+              <IconOutline name={'more'} size={27} color={Colors.Black} />
+            </TouchableOpacity>
+          </>
+        ) : (
+          <>
+            <TouchableOpacity
+              onPress={rightButtonHeader('done')}
+              style={[styles.headerButtonDone]}
+            >
+              <Text type="H4" bold color={Colors.Primary}>
+                {t('done')}
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+    ),
+    [isLearn, rightButtonHeader, t]
+  );
+  const selectButton = useCallback(() => {
+    setSelect(true);
+    setIsShowModal(false);
+  }, []);
+  const nextButton = useCallback(() => {
+    setIsLearn(true);
+    setIsShowModal(true);
+  }, []);
+
+  const cancelButton = useCallback(() => {
+    setIsShowModal(false);
+  }, []);
+  const ApplyButton = useCallback(() => {
+    setIsLearn(false);
+    setIsShowModal(false);
+    setLearnSuccess(true);
+    setSelect(true);
+  }, []);
+
+  const ContentModal = useCallback(() => {
+    if (learnSuccess) {
+      return (
+        <View style={[styles.popoverStyle, styles.popoverLearn]}>
+          <View style={styles.paddingBottom16}>
+            <SmartIr />
+          </View>
+          <Union />
+          <View style={[styles.paddingBottom16, styles.paddingLeft16]}>
+            <Remote />
+          </View>
+          <View>
+            <Text color={Colors.Gray8}>{t('point_at_center')}</Text>
+          </View>
+          <View>
+            <Text color={Colors.Gray8}>
+              {t('press')}
+              <Text bold color={Colors.Primary}>
+                {t('remote_control')}
+              </Text>
+              {t('same_key')}
+            </Text>
+          </View>
+          <View>
+            <Text color={Colors.Gray8}>{`(20s ${t('remained')})`}</Text>
+          </View>
+        </View>
+      );
+    } else {
+      return (
+        <View style={[styles.popoverStyle, styles.popoverDetected]}>
+          <View style={styles.modalHeader}>
+            <Text semibold style={styles.modalHeaderText}>
+              {t('detected_signal')}
+            </Text>
+          </View>
+          <TextInput
+            defaultValue={text}
+            onChange={(value) => setText(value)}
+            textInputStyle={styles.textInputStyle}
+            wrapStyle={styles.textInputWrapStyle}
+            selectionColor={Colors.Primary}
+          />
+          <ButtonsBottom
+            onPressLeft={cancelButton}
+            onPressRight={ApplyButton}
+            textLeft={t('cancel')}
+            textRight={t('apply')}
+            colorTextLeft={Colors.Gray8}
+            colorTextRight={Colors.White}
+            leftButtonStyle={styles.leftButtonModal}
+            rightButtonStyle={styles.rightButtonModal}
+          />
+        </View>
+      );
+    }
+  }, [ApplyButton, cancelButton, learnSuccess, t, text]);
+
+  const AlertBottom = useCallback(() => {
+    return (
+      <View style={styles.alertBottom}>
+        <View style={styles.alertContent}>
+          {!isLearn ? (
+            <>
+              <Text>{t('make_sure_3_button_available')}</Text>
+              <ButtonsBottom
+                onPressLeft={selectButton}
+                onPressRight={nextButton}
+                textLeft={t('select_this_one')}
+                textRight={t('next_one')}
+                buttonStyle={styles.widthAlertBottom}
+              />
+            </>
+          ) : (
+            <Text color={Colors.Gray8}>
+              {t('please')}
+              <Text bold color={Colors.Primary}>
+                {t('long_press')}
+              </Text>
+              {t('the_button_to_study')}
+            </Text>
+          )}
+        </View>
+      </View>
+    );
+  }, [isLearn, nextButton, selectButton, t]);
+
+  return (
+    <View style={styles.container}>
+      <WrapHeaderScrollable
+        title={t('Tivi')}
+        headerAniStyle={styles.header}
+        styleScrollView={styles.scrollView}
+        rightComponent={rightComponent}
+      >
+        <View style={styles.wrapItem}>
+          <GroupButtonTemplate />
+        </View>
+      </WrapHeaderScrollable>
+      {!select && <AlertBottom />}
+
+      <ModalCustom isVisible={isShowModal}>
+        <ContentModal />
+      </ModalCustom>
+    </View>
+  );
+});
+
+export default GroupButtonByType;

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByTypeStyles.js

@@ -0,0 +1,113 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../../configs';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+export const heightHeader = 44 + 44 + getStatusBarHeight() + 10;
+
+const flexCenter = {
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    borderBottomWidth: 0,
+  },
+  scrollView: {
+    backgroundColor: Colors.White,
+    position: 'relative',
+  },
+  wrapItem: {
+    flex: 1,
+  },
+  rightComponent: {
+    flexDirection: 'row',
+    paddingRight: 8,
+  },
+  headerButton: {
+    paddingHorizontal: 10,
+  },
+  headerButtonDone: {
+    paddingHorizontal: 10,
+    paddingTop: 8,
+  },
+  alertBottom: {
+    backgroundColor: Colors.White,
+    height: 120,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 10,
+  },
+  alertContent: {
+    flex: 1,
+    backgroundColor: Colors.Blue13,
+    ...flexCenter,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 20,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4.84,
+    elevation: 5,
+  },
+  popoverStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+    padding: 18,
+  },
+  popoverLearn: {
+    marginBottom: Constants.height / 2 - 136,
+  },
+  popoverDetected: {
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  paddingBottom16: {
+    paddingBottom: 16,
+  },
+  paddingLeft16: {
+    paddingLeft: 16,
+  },
+  textInputStyle: {
+    paddingHorizontal: 0,
+    borderWidth: 0,
+    fontSize: 16,
+    marginTop: 0,
+    borderRadius: 1,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  textInputWrapStyle: {
+    width: '100%',
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Primary,
+    borderTopWidth: 1,
+    borderTopColor: Colors.Gray4,
+    marginBottom: 20,
+    marginHorizontal: 0,
+  },
+  titleModal: {
+    paddingTop: 8,
+  },
+  widthAlertBottom: {
+    width: Constants.width / 2 - 32,
+  },
+  rightButtonModal: {
+    width: Constants.width / 2 - 52,
+    backgroundColor: Colors.Primary,
+  },
+  leftButtonModal: {
+    width: Constants.width / 2 - 52,
+    backgroundColor: Colors.Gray1,
+    borderColor: Colors.Gray5,
+    borderWidth: 1,
+  },
+});

package/src/screens/SmartIr/components/SelectBrand.js

@@ -0,0 +1,61 @@
+import React, { memo, useCallback, useState } from 'react';
+import { View, ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { HeaderCustom } from '../../../commons/Header';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Routes from '../../../utils/Route';
+import { RowItem } from '../../../commons/RowItem';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Colors } from '../../../configs';
+
+import styles from './SelectBrandStyles';
+
+const SelectDeviceType = memo(({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const tempBrand = [
+    { id: 1, name: 'Samsung' },
+    { id: 2, name: 'LG' },
+    { id: 3, name: 'Apple' },
+  ];
+  const [deviceBrand] = useState(tempBrand);
+
+  const handleOnPressItem = useCallback(
+    (item) => () => {
+      navigate(Routes.SmartIrStack, {
+        screen: Routes.GroupButtonByType,
+        params: {
+          device_type: item || {},
+          brand: item || {},
+        },
+      });
+    },
+    [navigate]
+  );
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={t('select_brand')} />
+      <ScrollView>
+        <View style={styles.listBrands}>
+          {!!deviceBrand &&
+            deviceBrand.map((item, index) => {
+              return (
+                <RowItem
+                  onPress={handleOnPressItem(item)}
+                  text={item?.name}
+                  key={index.toString()}
+                  isShowSubText={false}
+                  rightComponent={
+                    <IconOutline name="right" size={20} color={Colors.Gray7} />
+                  }
+                />
+              );
+            })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+});
+
+export default SelectDeviceType;

package/src/screens/SmartIr/components/SelectBrandStyles.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  listBrands: {
+    flex: 1,
+    paddingTop: 16,
+    paddingHorizontal: 16,
+  },
+});

package/src/screens/SmartIr/components/SelectDeviceType.js

@@ -0,0 +1,96 @@
+import React, { memo, useCallback, useState } from 'react';
+import { View, TouchableOpacity, ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Text from '../../../commons/Text';
+import { HeaderCustom } from '../../../commons/Header';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { AC, DIY, Fan, Fridge, TV, WM } from '../../../Images/SmartIr';
+import Routes from '../../../utils/Route';
+
+import styles from './SelectDeviceTypeStyles';
+
+const SelectDeviceType = memo(() => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const tempDeviceType = [
+    { id: 1, icon: 'tv', name: 'TV' },
+    { id: 2, icon: 'fan', name: 'Fan' },
+    { id: 3, icon: 'ac', name: 'AC' },
+    { id: 4, icon: 'wm', name: 'wm' },
+    { id: 5, icon: 'fridge', name: 'Fridge' },
+    { id: 6, icon: 'diy', name: 'DIY' },
+  ];
+  const [deviceType] = useState(tempDeviceType);
+
+  const handleOnPressItem = useCallback(
+    (item) => () => {
+      navigate(Routes.SmartIrStack, {
+        screen: Routes.SelectBrand,
+        params: {
+          device_type: item || {},
+        },
+      });
+    },
+    [navigate]
+  );
+
+  const IconDevice = ({ icon, width, height }) => {
+    switch (icon) {
+      case 'tv':
+        return <TV width={width} height={height} />;
+      case 'fan':
+        return <Fan width={width} height={height} />;
+      case 'ac':
+        return <AC width={width} height={height} />;
+      case 'wm':
+        return <WM width={width} height={height} />;
+      case 'fridge':
+        return <Fridge width={width} height={height} />;
+      case 'diy':
+        return <DIY width={width} height={height} />;
+      default:
+        return <></>;
+    }
+  };
+  const ItemDevice = useCallback(
+    ({ onPress, buttonStyle, textStyle, wrapStyle, name, icon }) => {
+      return (
+        <TouchableOpacity
+          style={[styles.buttonItem, buttonStyle]}
+          onPress={onPress}
+        >
+          <View style={[styles.wrapItem, wrapStyle]}>
+            {!!icon && <IconDevice width={60} height={60} icon={icon} />}
+            {!!name && (
+              <Text style={[styles.textDevice, textStyle]}> {name} </Text>
+            )}
+          </View>
+        </TouchableOpacity>
+      );
+    },
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={t('select_device_type')} />
+      <ScrollView>
+        <View style={styles.listDevices}>
+          {!!deviceType &&
+            deviceType.map((item, index) => {
+              return (
+                <ItemDevice
+                  onPress={handleOnPressItem(item)}
+                  name={item?.name}
+                  icon={item?.icon}
+                  key={index.toString()}
+                />
+              );
+            })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+});
+
+export default SelectDeviceType;

package/src/screens/SmartIr/components/SelectDeviceTypeStyles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrapItem: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 34,
+    paddingBottom: 60,
+    paddingHorizontal: 52,
+  },
+  listDevices: {
+    paddingTop: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    paddingHorizontal: 16,
+  },
+  buttonItem: {
+    width: Constants.width / 2 - 25,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    marginBottom: 15,
+  },
+});

package/src/screens/SmartIr/index.js

@@ -1,14 +1,19 @@
 import React, { memo, useCallback } from 'react';
-import { View, Alert } from 'react-native';
+import { View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import ItemAddNew from '../../commons/Device/ItemAddNew';
+import Routes from '../../utils/Route';
+import { useNavigation } from '@react-navigation/native';
 import styles from './styles';
 
 const SmartIr = memo(({ item }) => {
   const t = useTranslations();
+  const { navigate } = useNavigation();
   const AddRemoteControl = useCallback(() => {
-    Alert.alert(t('feature_under_development'));
-  }, [t]);
+    navigate(Routes.SmartIrStack, {
+      screen: Routes.SelectDeviceType,
+    });
+  }, [navigate]);
   return (
     <View style={styles.container}>
       <ItemAddNew

package/src/screens/Unit/Detail.js

@@ -2,7 +2,6 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useNetInfo } from '@react-native-community/netinfo';
 
 import styles from './styles';
 import AddMenu from './AddMenu';
@@ -76,20 +75,18 @@ const UnitDetail = ({ route }) => {
     automates: [],
   });
   const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
-  const [isNetworkConnected, setIsNetworkConnected] = useState(true);
   const [station, setStation] = useState({});
   const [indexStation, setIndexStation] = useState(0);
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [dataFullScreen, setDataFullScreen] = useState();
+  const [serverDown, setServerDown] = useState(false);
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
 
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
 
-  const netInfo = useNetInfo();
-
   const handleFullScreen = (data) => {
     setIsFullScreen(!isFullScreen);
     setDataFullScreen(data);
@@ -128,10 +125,13 @@ const UnitDetail = ({ route }) => {
   const fetchDetails = useCallback(async () => {
     getAutomates();
     await fetchWithCache(API.UNIT.UNIT_DETAIL(unitId), {}, (response) => {
-      const { success, data } = response;
+      const { success, data, resp_status } = response;
       if (success) {
+        setServerDown(false);
         prepareData(data);
         setUnit(data);
+      } else if (resp_status >= 500) {
+        setServerDown(true);
       }
     });
   }, [setUnit, unitId, prepareData, getAutomates]);
@@ -192,10 +192,6 @@ const UnitDetail = ({ route }) => {
     };
   }, [handleAppStateChange]);
 
-  useEffect(() => {
-    setIsNetworkConnected(netInfo.isConnected);
-  }, [netInfo.isConnected]);
-
   const handleGoogleHomeConnect = useCallback(
     async (options) => {
       let isConnected = await googleHomeConnect(options); // this may wrong if have multiple connection
@@ -311,7 +307,7 @@ const UnitDetail = ({ route }) => {
           isOwner={isOwner}
           favorites={favorites}
           wrapItemStyle={styles.wrapItemStyle}
-          isNetworkConnected={isNetworkConnected}
+          serverDown={serverDown}
           isGGHomeConnected={isGGHomeConnected}
         />
       );
@@ -338,7 +334,7 @@ const UnitDetail = ({ route }) => {
         <ShortDetailSubUnit
           unit={unit}
           station={station}
-          isNetworkConnected={isNetworkConnected}
+          serverDown={serverDown}
           isGGHomeConnected={isGGHomeConnected}
         />
       );

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

@@ -62,16 +62,6 @@ jest.mock('home-assistant-js-websocket', () => {
   };
 });
 
-jest.mock('@react-native-community/netinfo', () => {
-  return {
-    useNetInfo: () => {
-      return {
-        isConnected: true,
-      };
-    },
-  };
-});
-
 jest.mock('axios');
 
 describe('Test UnitDetail', () => {

package/src/screens/Unit/components/MyUnitDevice/index.js

@@ -16,10 +16,8 @@ const MyUnitDevice = ({ sensor, unit }) => {
     navigate(Routes.UnitStack, {
       screen: Routes.DeviceDetail,
       params: {
-        unit,
-        sensor,
-        title: sensor?.name,
-        station: sensor?.station,
+        unitData: unit,
+        sensorData: sensor,
       },
     });
   }, [navigate, sensor, unit]);