@eohjsc/react-native-smart-city 0.2.43 → 0.2.47

package/index.js

@@ -12,6 +12,9 @@ import { AddLGDeviceStack } from './src/navigations/AddLGDeviceStack';
 import { initSCConfig } from './src/configs';
 import AutomateStack from './src/navigations/AutomateStack';
 import NotificationStack from './src/navigations/NotificationStack';
+import MyPinnedSharedUnit from './src/commons/Dashboard/MyPinnedSharedUnit';
+import MyUnit from './src/commons/Dashboard/MyUnit';
+import SharedUnit from './src/commons/Unit/SharedUnit';
 
 export {
   AddSubUnitStack,
@@ -29,4 +32,7 @@ export {
   initSCConfig,
   AutomateStack,
   NotificationStack,
+  MyPinnedSharedUnit,
+  SharedUnit,
+  MyUnit,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.43",
+  "version": "0.2.47",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -53,7 +53,7 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
-  }, 
+  },
   "resolutions": {
     "graceful-fs": "^4.2.4"
   },

package/src/commons/ActionTemplate/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useState, useCallback } from 'react';
+import React, { memo, useState, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -31,29 +31,44 @@ const ActionTemplate = memo(({ data, onSelectAction }) => {
     [onSelectAction]
   );
 
-  const renderAction = useCallback(
-    (data) => {
-      return data.map((item) => {
-        switch (item.template) {
-          case 'on_off_button_action_template':
-            return (
-              <OnOffButtonAction {...item} onPress={onPressSelectAction} />
-            );
-          case 'one_button_action_template':
-            return <OneButtonAction {...item} onPress={onPressSelectAction} />;
-          case 'three_button_action_template':
-            return (
-              <ThreeButtonAction {...item} onPress={onPressSelectAction} />
-            );
-          case 'OnOffSimpleActionTemplate':
-            return (
-              <OnOffSimpleAction {...item} onPress={onPressSelectAction} />
-            );
-        }
-      });
-    },
-    [onPressSelectAction]
-  );
+  const renderAction = useMemo(() => {
+    return data.map((item, index) => {
+      switch (item.template) {
+        case 'on_off_button_action_template':
+          return (
+            <OnOffButtonAction
+              {...item}
+              onPress={onPressSelectAction}
+              key={index}
+            />
+          );
+        case 'one_button_action_template':
+          return (
+            <OneButtonAction
+              {...item}
+              onPress={onPressSelectAction}
+              key={index}
+            />
+          );
+        case 'three_button_action_template':
+          return (
+            <ThreeButtonAction
+              {...item}
+              onPress={onPressSelectAction}
+              key={index}
+            />
+          );
+        case 'OnOffSimpleActionTemplate':
+          return (
+            <OnOffSimpleAction
+              {...item}
+              onPress={onPressSelectAction}
+              key={index}
+            />
+          );
+      }
+    });
+  }, [data, onPressSelectAction]);
 
   return (
     <>
@@ -69,7 +84,7 @@ const ActionTemplate = memo(({ data, onSelectAction }) => {
         onBackdropPress={onClose}
       >
         <View style={styles.popoverStyle}>
-          <View style={styles.modalHeader}>{renderAction(data)}</View>
+          <View style={styles.modalHeader}>{renderAction}</View>
         </View>
       </ModalCustom>
     </>

package/src/commons/Automate/ItemAutomate.js

@@ -24,7 +24,7 @@ const ItemAutomate = ({
     } else if (isSelected && isItemOneTap) {
       return t('quick_button_create_at_dashboard');
     } else {
-      return item?.explanation;
+      return t(item?.explanation);
     }
   }, [isItemOneTap, isSelected, item?.explanation, t, textCondition]);
 
@@ -40,7 +40,7 @@ const ItemAutomate = ({
         </View>
         <View>
           <Text type="H4" bold>
-            {item?.title}
+            {t(item?.title)}
           </Text>
           <Text type="Label" color={Colors.Gray8} numberOfLines={1}>
             {renderText}

package/src/commons/Dashboard/MyPinnedSharedUnit/index.js

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState, memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import styles from './styles';
+import { Section } from '../../Section';
+import Text from '../../Text';
+import { API, Colors } from '../../../configs';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
+import Routes from '../../../utils/Route';
+import { TESTID } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import SharedUnit from '../../Unit/SharedUnit';
+import { fetchWithCache } from '../../../utils/Apis/axios';
+
+const MyPinnedSharedUnit = () => {
+  const t = useTranslations();
+  const isFocused = useIsFocused();
+  const navigation = useNavigation();
+  const [sharedUnits, setSharedUnits] = useState([]);
+
+  const goToAllSharedUnits = () => {
+    navigation.navigate(Routes.SharedStack, {
+      screen: Routes.Shared,
+    });
+  };
+
+  const fetchSharedUnitDashboard = useCallback(async () => {
+    await fetchWithCache(API.UNIT.SHARED_UNITS(), {}, (response) => {
+      const { success, data } = response;
+
+      if (success) {
+        setSharedUnits(data);
+      }
+    });
+  }, [setSharedUnits]);
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchSharedUnitDashboard();
+    }
+  }, [fetchSharedUnitDashboard, isFocused]);
+
+  return (
+    <>
+      <Section>
+        <View style={styles.sharedUnitsHeading}>
+          <Text type="H5" color={Colors.Gray8}>
+            {t('text_shared_units')}
+          </Text>
+
+          <TouchableOpacity
+            onPress={goToAllSharedUnits}
+            testID={TESTID.DASHBOARD_VIEW_ALL_SHARED_UNITS}
+          >
+            <Text color={Colors.Primary} style={styles.viewAll}>
+              {t('view_all')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        {sharedUnits &&
+          Boolean(sharedUnits.length) &&
+          sharedUnits
+            .filter((sharedUnit) => sharedUnit.is_pin)
+            .map((item, index) => (
+              <View key={item.id}>
+                <SharedUnit
+                  item={item}
+                  index={index}
+                  navigation={navigation}
+                  isOptions={false}
+                />
+                {index !== sharedUnits.length - 1 && (
+                  <View style={styles.separator} />
+                )}
+              </View>
+            ))}
+      </Section>
+    </>
+  );
+};
+
+export default memo(MyPinnedSharedUnit);

package/src/commons/Dashboard/MyPinnedSharedUnit/styles.js

@@ -0,0 +1,78 @@
+import { Dimensions, StyleSheet } from 'react-native';
+import { Colors } from 'configs';
+
+const { width: widthScreen } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  wrap: {
+    backgroundColor: Colors.Gray2,
+    flex: 1,
+    paddingBottom: 20,
+  },
+  scrollViewContentContainerStyle: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  separator: {
+    height: 1,
+    width: '100%',
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  unitsHeading: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    paddingTop: 16,
+  },
+  sharedUnitsHeading: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingBottom: 8,
+  },
+  banner: {
+    marginTop: 8,
+    flex: 1,
+    width: widthScreen,
+    maxHeight: 140,
+    alignSelf: 'center',
+  },
+  btnLeftHeader: {
+    paddingRight: 16,
+    height: '100%',
+    justifyContent: 'center',
+  },
+  txtCopy: {
+    marginLeft: 16,
+    marginBottom: 10,
+    fontSize: 12,
+    color: Colors.Gray6,
+  },
+  boxTxtMyUnit: {
+    padding: 0,
+    paddingBottom: 30,
+    backgroundColor: Colors.White,
+  },
+  logo: {
+    marginLeft: 16,
+    marginTop: 24,
+  },
+  govSaleLogo: {
+    marginLeft: 16,
+    marginBottom: 8,
+    width: 120,
+    height: 40,
+  },
+  wrapCurrentLocationLoading: {
+    height: 170,
+  },
+});
+
+export default styles;

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import MyUnit from '..';
+import { TESTID } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import axios from 'axios';
+
+jest.mock('axios');
+const mockedNavigate = jest.fn();
+const mockUseIsFocused = jest.fn();
+const mockedDispatch = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+    useIsFocused: () => ({
+      isFocused: mockUseIsFocused,
+    }),
+  };
+});
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockedDispatch,
+}));
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <MyUnit />
+  </SCProvider>
+);
+
+describe('Test MyUnit', () => {
+  let tree;
+  beforeEach(() => {
+    axios.get.mockClear();
+  });
+  const getElement = (instance) => {
+    const goToDetail = instance.findAll(
+      (item) => item.props.testID === TESTID.MY_UNIT_GO_TO_DETAIL
+    );
+    const textNoUnit = instance.findAll(
+      (item) => item.props.testID === TESTID.MY_UNIT_NO_UNIT
+    );
+    return { goToDetail, textNoUnit };
+  };
+
+  test('create MyUnit no Unit', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const { textNoUnit } = getElement(instance);
+    expect(textNoUnit[0]).toBeDefined();
+  });
+});

package/src/commons/Dashboard/MyUnit/index.js

@@ -0,0 +1,111 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { View, Image, TouchableOpacity, Dimensions } from 'react-native';
+import { API, Colors, Images } from '../../../configs';
+import Text from '../../Text';
+import { fetchWithCache } from '../../../utils/Apis/axios';
+
+import styles from './styles';
+import { Section } from '../../Section';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
+
+import Carousel from 'react-native-snap-carousel';
+import { TESTID } from '../../../configs/Constants';
+import Routes from '../../../utils/Route';
+import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
+
+let screenWidth = Dimensions.get('window').width;
+const MyUnit = () => {
+  const t = useTranslations();
+  const isFocused = useIsFocused();
+  const navigation = useNavigation();
+  const [myUnits, setMyUnits] = useState([]);
+
+  const fetchMyUnitDashboard = useCallback(async () => {
+    await fetchWithCache(API.UNIT.MY_UNITS(), {}, (response) => {
+      const { success, data } = response;
+      if (success) {
+        setMyUnits(data);
+      }
+    });
+  }, [setMyUnits]);
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchMyUnitDashboard();
+    }
+  }, [fetchMyUnitDashboard, isFocused]);
+  const goToDetail = useCallback(
+    (item) => {
+      navigation.navigate(Routes.UnitStack, {
+        screen: Routes.UnitDetail,
+        params: {
+          unitId: item.id,
+          unitData: item,
+        },
+      });
+    },
+    [navigation]
+  );
+  const _renderItem = useCallback(
+    ({ item, index }) => {
+      const paddingLeft = index === 0 ? 0 : 8;
+      const paddingRight = index === myUnits.length - 1 ? 0 : 8;
+      return (
+        <View
+          style={{
+            paddingLeft: paddingLeft,
+            paddingRight: paddingRight,
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => goToDetail(item)}
+            style={styles.btnItem}
+            activeOpacity={0.75}
+            testID={TESTID.MY_UNIT_GO_TO_DETAIL}
+          >
+            <View style={styles.overlay} />
+            <Image
+              style={styles.bgMyUnit}
+              source={{ uri: item.background }}
+              defaultSource={Images.BgUnit}
+              resizeMode="cover"
+            />
+            <Text style={styles.title}>{item.name}</Text>
+          </TouchableOpacity>
+          {item.abstract_sensors.map((sensor, indexSensor) => (
+            <MyUnitDevice key={indexSensor} sensor={sensor} unit={item} />
+          ))}
+        </View>
+      );
+    },
+    [myUnits.length, goToDetail]
+  );
+  return (
+    <>
+      <Section style={styles.boxTxtMyUnit}>
+        <Text style={styles.unitsHeading} type="H5" color={Colors.Gray8}>
+          {t('text_my_units')}
+        </Text>
+        <View style={styles.container}>
+          {myUnits.length ? (
+            <Carousel
+              layout={'default'}
+              data={myUnits}
+              sliderWidth={screenWidth}
+              itemWidth={screenWidth - 32}
+              renderItem={_renderItem}
+              inactiveSlideScale={1}
+            />
+          ) : (
+            <View>
+              <Text testID={TESTID.MY_UNIT_NO_UNIT}>{t('text_no_units')}</Text>
+            </View>
+          )}
+        </View>
+      </Section>
+    </>
+  );
+};
+
+export default memo(MyUnit);

package/src/commons/Dashboard/MyUnit/styles.js

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+import { colorOpacity } from '../../../utils/Converter/color';
+
+const styles = StyleSheet.create({
+  boxTxtMyUnit: {
+    padding: 0,
+    paddingBottom: 30,
+    backgroundColor: Colors.White,
+  },
+  unitsHeading: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    paddingTop: 16,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingBottom: 16,
+  },
+  overlay: {
+    backgroundColor: colorOpacity(Colors.Black, 0.4),
+    zIndex: 2,
+    left: 0,
+    top: 0,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    borderRadius: 10,
+  },
+  bgMyUnit: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    width: '100%',
+    height: '100%',
+    borderRadius: 10,
+  },
+  title: {
+    position: 'absolute',
+    zIndex: 3,
+    fontWeight: 'bold',
+    fontSize: 20,
+    lineHeight: 28,
+    color: Colors.White,
+    bottom: 16,
+    left: 16,
+  },
+  btnItem: {
+    height: 121,
+    marginBottom: 16,
+  },
+});
+
+export default styles;

package/src/commons/Device/ConnectedViewHeader.js

@@ -14,8 +14,11 @@ const DisplayTextConnected = memo(({ type }) => {
     case 'GoogleHome':
       text = t('ggHomeConnected');
       break;
+    case 'Bluetooth':
+      text = t('connected_via_bluetooth');
+      break;
     default:
-      text = t('connected');
+      text = t('connected_via_internet');
       break;
   }
   return <Text style={styles.greenStatus}>{text}</Text>;

package/src/commons/Form/TextInput.js

@@ -79,7 +79,7 @@ const styles = StyleSheet.create({
     marginTop: 7,
     borderRadius: 2,
     paddingTop: 12,
-    paddingBottom: 12,
+    paddingBottom: 15,
     paddingHorizontal: 20,
     backgroundColor: Colors.White,
     // ...Theme.shadow,

package/src/commons/MediaPlayer/index.js

@@ -105,6 +105,7 @@ const MediaPlayer = memo(
     style,
     ratioWidth = standardizeWidth,
     ratioHeight = standardizeHeight,
+    background,
   }) => {
     const t = useTranslations();
     const [started, setStarted] = useState(false);
@@ -116,7 +117,11 @@ const MediaPlayer = memo(
     }, []);
 
     const imageSource =
-      !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
+      thumbnail || thumbnail?.uri
+        ? thumbnail
+        : background
+        ? background
+        : Images.BgDevice;
     return (
       <View style={styles.wrap}>
         <View style={styles.loadingWrap}>

package/src/commons/OneTapTemplate/OptionsDropdownActionTemplate.js

@@ -14,7 +14,7 @@ const OptionsDropdownActionTemplate = memo(({ data, onSelectAction }) => {
   const t = useTranslations();
   const [visible, setVisible] = useState(false);
   const [actionName, setActionName] = useState(null);
-  const [activeAction, setActiveAction] = useState();
+  const [activeAction, setActiveAction] = useState(-1);
   const onClose = () => setVisible(false);
   const onPress = () => setVisible(true);
   const { title, configuration, template } = data;
@@ -91,12 +91,12 @@ const OptionsDropdownActionTemplate = memo(({ data, onSelectAction }) => {
               <TouchableOpacity
                 onPress={onPressDone}
                 testID={TESTID.OPTIONS_DROPDOWN_ACTION_DONE}
-                disabled={!activeAction}
+                disabled={activeAction < 0}
               >
                 <Text
                   type="H4"
                   bold
-                  color={activeAction ? Colors.Primary : Colors.Disabled}
+                  color={activeAction >= 0 ? Colors.Primary : Colors.Disabled}
                   style={styles.textButton}
                 >
                   {t('done')}

package/src/{screens/Unit/components → commons}/SearchLocation/RowLocation.js

@@ -1,8 +1,8 @@
 import React, { memo, useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 
-import { Colors } from '../../../../configs';
-import Text from '../../../../commons/Text';
+import { Colors } from '../../configs';
+import Text from '../Text';
 import styles from './RowLocationStyles';
 
 const RowLocation = memo(({ item, onPress }) => {

package/src/{screens/Unit/components → commons}/SearchLocation/RowLocationStyles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../../../configs';
+import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   container: {

package/src/{screens/Unit/components → commons}/SearchLocation/SearchBarLocationStyles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Colors, Fonts } from '../../../../configs';
+import { Colors, Fonts } from '../../configs';
 
 export default StyleSheet.create({
   container: {

package/src/{screens/Unit/components → commons}/SearchLocation/__test__/RowLocation.test.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import RowLocation from '../RowLocation';
-import { SCProvider } from '../../../../../context';
-import { mockSCStore } from '../../../../../context/mockStore';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockFunc = jest.fn();
 

package/src/{screens/Unit/components → commons}/SearchLocation/index.js

@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 import { View, TextInput } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors } from '../../../../configs';
+import { Colors } from '../../configs';
 import styles from './SearchBarLocationStyles';
 
 const SearchBarLocation = memo(({ input, onTextInput }) => {