@eohjsc/react-native-smart-city 0.2.95 → 0.2.96

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.95",
+  "version": "0.2.96",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -97,7 +97,7 @@
   "dependencies": {
     "@ant-design/icons-react-native": "^2.2.1",
     "@ant-design/react-native": "^4.0.5",
-    "@eohjsc/highcharts": "^1.0.6",
+    "@eohjsc/highcharts": "^1.0.8",
     "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",

package/src/Images/Common/member.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z" fill="#262626"/>
+<path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7C13.32 7 12.11 7 10.99 7C8.24 6.99 6 4.75 6 2H4C4 5.16 6.11 7.84 9 8.71V22H11V16H13V22H15V10.05L18.95 14L20.36 12.59L15.89 8.11Z" fill="#262626"/>
+</svg>

package/src/Images/Common/owner.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.753 9.0184C21.753 9.66253 21.2308 10.1847 20.5867 10.1847C20.4682 10.1847 20.3559 10.1617 20.2483 10.1291L18.5961 15.808H5.15687L3.50472 10.1291C3.39711 10.1617 3.28483 10.1847 3.16633 10.1847C2.52221 10.1847 2 9.66253 2 9.0184C2 8.37428 2.52221 7.85207 3.16633 7.85207C3.81046 7.85207 4.33266 8.37428 4.33266 9.0184C4.33266 9.24732 4.26424 9.45912 4.15041 9.6392L7.88142 12.1939L8.36195 7.3196C7.78003 7.25367 7.32625 6.76567 7.32625 6.16633C7.32625 5.52221 7.84846 5 8.49258 5C9.13671 5 9.65892 5.52221 9.65892 6.16633C9.65892 6.59305 9.42752 6.96224 9.08539 7.16565L11.8765 11.7398L14.6863 7.13517C14.3743 6.92585 14.1687 6.57035 14.1687 6.16633C14.1687 5.52221 14.6909 5 15.3351 5C15.9792 5 16.5014 5.52221 16.5014 6.16633C16.5014 6.79118 16.0091 7.2969 15.392 7.32707L15.8716 12.1939L19.6026 9.6392C19.4888 9.45912 19.4203 9.24732 19.4203 9.0184C19.4203 8.37428 19.9425 7.85207 20.5867 7.85207C21.2308 7.85207 21.753 8.37428 21.753 9.0184ZM5.15782 16.6384H18.5962V18.712H5.15782V16.6384Z" fill="#262626"/>
+</svg>

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -39,7 +39,11 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
 
   const doActionAndWatchConfig = useCallback(
     (actionData, actionValue, actionName) => {
-      doAction(actionData, actionValue, actionName);
+      doAction(
+        actionData,
+        JSON.stringify({ temperature: actionValue }),
+        actionName
+      );
       if (!sensor?.is_managed_by_backend) {
         return;
       }

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -61,7 +61,11 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     const value = getOptionValue(newOption);
     let actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
     actionName = actionName.replace(/\s+/g, ' ').trim();
-    doAction(action_data, value, actionName);
+    doAction(
+      action_data,
+      JSON.stringify({ level: value, key_code: newOption?.value_int }),
+      actionName
+    );
     if (sensor?.is_managed_by_backend) {
       configuration.config && watchMultiConfigs([configuration.config]);
     }

package/src/commons/ActionGroup/__test__/OptionsDropdownTemplate.test.js

@@ -152,7 +152,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
-      1,
+      JSON.stringify({ level: 1, key_code: 1 }),
       'Sensor name fan speed 1'
     );
     is_managed_by_backend
@@ -221,7 +221,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
-      'level-1',
+      JSON.stringify({ level: 'level-1', key_code: 1 }),
       'Sensor name fan speed level-1'
     ); // doAction with text instead of int
 

package/src/commons/Connecting /__test__/Connecting.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import Connecting from '../index';
+import Text from '../../Text';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Connecting route={route} />
+  </SCProvider>
+);
+describe('Test Connecting', () => {
+  let tree;
+  test('create Connecting', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const text = instance.findAllByType(Text);
+    expect(text).toHaveLength(4);
+  });
+});

package/src/commons/Connecting /index.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { View } from 'react-native';
+import * as Progress from 'react-native-progress';
+import Text from '../Text';
+import { Colors, Constants } from '../../configs';
+import styles from './styles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { HeaderCustom } from '../Header';
+
+const Connecting = ({ isLoading, isConnect, isPercentConnect }) => {
+  const t = useTranslations();
+  const [percent, setPercent] = useState(0);
+
+  useEffect(() => {
+    processLoading();
+  }, [processLoading]);
+
+  const processLoading = useCallback(() => {
+    let interval;
+    if (isLoading) {
+      interval = setInterval(() => {
+        setPercent((prev) => {
+          if (prev === 1) {
+            clearInterval(interval);
+            return 1;
+          } else if (prev === 0.8 && isConnect) {
+            clearInterval(interval);
+            return 0.8;
+          } else {
+            return prev + 0.2;
+          }
+        });
+      }, 180);
+    } else {
+      clearInterval(interval);
+    }
+  }, [isConnect, isLoading]);
+  return (
+    <View style={styles.screen}>
+      <HeaderCustom title={t('connect_device')} isShowSeparator />
+      <View style={styles.body}>
+        <View style={styles.connecting}>
+          <Text type="H4" bold>
+            {t('connecting')}
+          </Text>
+        </View>
+        <View style={styles.percentLoad}>
+          <Progress.Bar
+            progress={isPercentConnect || percent}
+            animated={true}
+            color={Colors.Primary}
+            indeterminateAnimationDuration={1000}
+            height={7}
+            width={Constants.width - 80}
+            useNativeDriver={true}
+          />
+          <Text style={styles.textPercentLoad}>{`${parseInt(
+            (isPercentConnect || percent) * 100,
+            10
+          )}%`}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default Connecting;

package/src/commons/Connecting /styles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { Constants } from '../../configs';
+
+export default StyleSheet.create({
+  screen: {
+    flex: 1,
+    width: '100%',
+  },
+  body: {
+    width: '100%',
+    height: Constants.height - 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  connecting: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  percentLoad: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textPercentLoad: {
+    marginLeft: 10,
+  },
+});

package/src/commons/ConnectingProcess/index.js

@@ -3,14 +3,14 @@ import { SafeAreaView, View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
-import * as Progress from 'react-native-progress';
 import ImageSuccessfully from '../../Images/Common/SuccessfullyConnected.svg';
 
 import Text from '../Text';
 import { axiosPost } from '../../utils/Apis/axios';
-import { API, Colors, Constants } from '../../configs';
+import { API, Colors } from '../../configs';
 import styles from './styles';
 import DeviceItem from './DeviceItem/DeviceItem';
+import Connecting from '../Connecting ';
 import { useSCContextSelector } from '../../context';
 
 const ConnectingProcess = ({ route }) => {
@@ -29,31 +29,9 @@ const ConnectingProcess = ({ route }) => {
     wifi_pass,
     chip_id,
   } = route.params;
-  const [percent, setPercent] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [sensor, setSensor] = useState(null);
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
-  useEffect(() => {
-    processLoading();
-  }, [processLoading]);
-
-  const processLoading = useCallback(() => {
-    let interval;
-    if (isLoading) {
-      interval = setInterval(() => {
-        setPercent((prev) => {
-          if (prev === 1) {
-            clearInterval(interval);
-            return 1;
-          } else {
-            return prev + 0.2;
-          }
-        });
-      }, 180);
-    } else {
-      clearInterval(interval);
-    }
-  }, [isLoading]);
 
   const ConnectingDevice = useCallback(async () => {
     setIsLoading(true);
@@ -120,35 +98,6 @@ const ConnectingProcess = ({ route }) => {
     chip_id,
   ]);
 
-  const Connecting = useCallback(() => {
-    return (
-      <>
-        <View style={styles.progressBar}>
-          <View style={styles.connecting}>
-            <Text type="H4" bold>
-              {t('connecting')}
-            </Text>
-          </View>
-        </View>
-        <View style={styles.percentLoad}>
-          <Progress.Bar
-            progress={percent}
-            animated={true}
-            color={Colors.Primary}
-            indeterminateAnimationDuration={1000}
-            height={7}
-            width={Constants.width - 80}
-            useNativeDriver={true}
-          />
-          <Text style={styles.textPercentLoad}>{`${parseInt(
-            percent * 100,
-            10
-          )}%`}</Text>
-        </View>
-      </>
-    );
-  }, [percent, t]);
-
   const ConnectingSuccess = useCallback(() => {
     return (
       <View style={styles.ConnectingSuccess}>
@@ -188,7 +137,7 @@ const ConnectingProcess = ({ route }) => {
         <Text bold style={styles.connectingText}>
           {t('connect_device')}
         </Text>
-        {!!isLoading && <Connecting />}
+        {!!isLoading && <Connecting isLoading={isLoading} />}
         {!isLoading && <ConnectingSuccess />}
       </View>
       {!isLoading && (

package/src/commons/MenuActionMore/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { TouchableOpacity, ScrollView } from 'react-native';
 import Popover from 'react-native-popover-view';
 
@@ -19,10 +19,16 @@ const MenuActionMore = memo(
     wrapStyle,
     isTextCenter = true,
   }) => {
+    const [isDisable, setIsDisable] = useState(false);
     const onPress = useCallback(
       (item, index) => () => {
+        setIsDisable(true);
         hideMore && hideMore();
         onItemClick && onItemClick(item, index);
+        const timeout = setTimeout(() => {
+          setIsDisable(false);
+          clearTimeout(timeout);
+        }, 500);
       },
       [hideMore, onItemClick]
     );
@@ -55,6 +61,7 @@ const MenuActionMore = memo(
                 onPress={onPress(item, index)}
                 key={index}
                 testID={TESTID.TOUCHABLE_ACTION_ADD_MORE}
+                disabled={isDisable}
               >
                 <Text style={styles.modalHeaderText}>{item.text}</Text>
               </TouchableOpacity>

package/src/commons/Sharing/MemberList.js

@@ -1,29 +1,27 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-
 import RowMember from './RowMember';
 
 const MemberList = ({
   dataMember,
   ownerId,
+  unit,
   currentUserId, //user is using app
-  onPressRemove,
 }) => {
   const t = useTranslations();
-
   return (
     <View style={styles.box}>
       {!!dataMember.length &&
         dataMember.map((item, index) => (
           <RowMember
             member={item}
+            unit={unit}
             index={index}
             ownerId={ownerId}
             currentUserId={currentUserId}
-            onPressRemove={onPressRemove}
             key={index.toString()}
           />
         ))}
@@ -33,13 +31,10 @@ const MemberList = ({
     </View>
   );
 };
-export default MemberList;
+export default memo(MemberList);
+
 const styles = StyleSheet.create({
   box: {
-    paddingBottom: 16,
-    borderRadius: 20,
     backgroundColor: Colors.White,
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
   },
 });

package/src/commons/Sharing/RowMember.js

@@ -1,13 +1,12 @@
 import React, { memo, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { shortEmailName } from '../../utils/Utils';
-
-import BtnRemoveMember from './BtnRemoveMember';
+import { CircleView } from '../CircleView';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../utils/Route';
 
 const arrColor = [
   Colors.GeekBlue3,
@@ -19,46 +18,88 @@ const arrColor = [
   Colors.Cyan2,
 ];
 const RowMember = memo(
-  ({ member, index, ownerId, currentUserId, onPressRemove }) => {
+  ({
+    member,
+    index,
+    ownerId,
+    unit,
+    currentUserId,
+    type,
+    leftIcon = true,
+    rightComponent = true,
+  }) => {
     const t = useTranslations();
-    const canRemoveMember = useMemo(
-      () => ownerId === currentUserId && member.id !== ownerId,
-      [currentUserId, member.id, ownerId]
-    );
+    const { navigate } = useNavigation();
     const [role, roleColor] = useMemo(
       () =>
-        member.id === ownerId
+        member?.id === ownerId
           ? [t('owner'), Colors.Primary]
-          : member.id === currentUserId
-          ? [t('me'), Colors.Gray6]
-          : ['', ''],
-      [currentUserId, member.id, ownerId, t]
+          : member?.id === currentUserId
+          ? [t('me'), Colors.Primary]
+          : [t('member'), Colors.Gray6],
+      [currentUserId, member?.id, ownerId, t]
     );
-    const paddingBottom = role ? 16 : 23;
+    const firstWordsInName = useMemo(() => {
+      const wordTemp = member?.name || shortEmailName(member?.email) || '';
+      return wordTemp?.charAt();
+    }, [member?.email, member?.name]);
+
     if (member?.id === ownerId && member?.share_id) {
       return null;
     }
+    const circleColorTypes = {
+      primary: 'primary',
+      disable: 'disable',
+      noneBG: 'none',
+    };
+    const circleColor = type
+      ? circleColorTypes[type]
+      : arrColor[index % arrColor.length];
+
+    const onPressInfo = () => {
+      navigate(Routes.UnitMemberInformation, {
+        member,
+        ownerId,
+        unit,
+      });
+    };
     return (
       <View style={styles.rowContainer}>
-        <View
-          style={[
-            styles.iconContainer,
-            { backgroundColor: arrColor[index % arrColor.length] },
-          ]}
-        >
-          <IconOutline name={'user'} size={20} color={Colors.White} />
-        </View>
-        <View style={[styles.infoContainer, { paddingBottom: paddingBottom }]}>
-          <Text style={styles.textName}>
-            {member?.name || shortEmailName(member.email) || ''}
-          </Text>
-          {!!role && (
-            <Text style={[styles.textRole, { color: roleColor }]}>{role}</Text>
-          )}
-          {canRemoveMember && (
-            <BtnRemoveMember onPressRemove={onPressRemove} member={member} />
-          )}
-        </View>
+        <TouchableOpacity onPress={onPressInfo} disabled={type === 'disable'}>
+          <View style={styles.Border}>
+            {!!leftIcon && (
+              <View style={styles.paddingLeft16}>
+                {member?.avatar ? (
+                  <Image
+                    source={{ uri: member?.avatar }}
+                    style={styles.avatar}
+                  />
+                ) : (
+                  <CircleView size={40} backgroundColor={circleColor} center>
+                    <Text color={Colors.White}>{firstWordsInName}</Text>
+                  </CircleView>
+                )}
+              </View>
+            )}
+            <View style={styles.columnFlex}>
+              <Text style={styles.titleName}>
+                {member?.name || shortEmailName(member?.email) || ''}
+              </Text>
+              {member?.phone_number && (
+                <Text style={styles.status}> {member?.phone_number}</Text>
+              )}
+            </View>
+            {!!rightComponent && (
+              <View style={styles.endFlex}>
+                {!!role && (
+                  <Text style={[styles.textRole, { color: roleColor }]}>
+                    {role}
+                  </Text>
+                )}
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -68,9 +109,7 @@ export default RowMember;
 
 const styles = StyleSheet.create({
   rowContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
+    flex: 1,
   },
   iconContainer: {
     alignItems: 'center',
@@ -107,4 +146,55 @@ const styles = StyleSheet.create({
   textCenter: {
     alignSelf: 'center',
   },
+  columnFlex: {
+    paddingLeft: 16,
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  rowFlex: {
+    flexDirection: 'row',
+  },
+  endFlex: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+    paddingRight: 16,
+  },
+  Border: {
+    display: 'flex',
+    width: '100%',
+    borderWidth: 0,
+    borderColor: Colors.Gray4,
+    borderBottomWidth: 1,
+    borderStyle: 'solid',
+    flexDirection: 'row',
+    paddingTop: 16,
+    paddingBottom: 16,
+  },
+  titleName: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    color: Colors.Gray9,
+  },
+  status: {
+    fontSize: 12,
+    lineHeight: 20,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    color: Colors.Gray7,
+  },
+  container: {
+    paddingTop: 0,
+  },
+  paddingLeft16: {
+    paddingLeft: 16,
+  },
+  avatar: {
+    height: 40,
+    width: 40,
+    borderRadius: 40,
+    backgroundColor: Colors.Primary,
+  },
 });

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

@@ -27,7 +27,7 @@ describe('MemberList', () => {
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
-    expect(textInputs.length).toBe(4);
+    expect(textInputs.length).toBe(5);
   });
   test('MemberList snapshot id dataMember !== ownerId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
@@ -36,7 +36,7 @@ describe('MemberList', () => {
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
-    expect(textInputs.length).toBe(3);
+    expect(textInputs.length).toBe(5);
   });
   test('MemberList snapshot id dataMember === currentUserId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
@@ -45,7 +45,7 @@ describe('MemberList', () => {
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
-    expect(textInputs.length).toBe(4);
+    expect(textInputs.length).toBe(5);
   });
   test('MemberList dataMember null', () => {
     const dataMember = [];

package/src/commons/Sharing/__test__/RowMember.test.js

@@ -26,8 +26,8 @@ describe('RowMember', () => {
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
-    expect(textInputs.length).toBe(4);
-    expect(textInputs[0].props.children).toEqual('CEO');
+    expect(textInputs.length).toBe(5);
+    expect(textInputs[1].props.children).toEqual('CEO');
   });
   test('RowMember owner dont have name show start of email ', () => {
     const dataMember = { id: 1, name: '', email: 'abc@gmail.com' };
@@ -36,7 +36,7 @@ describe('RowMember', () => {
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
-    expect(textInputs.length).toBe(4);
-    expect(textInputs[0].props.children).toEqual('abc');
+    expect(textInputs.length).toBe(5);
+    expect(textInputs[1].props.children).toEqual('abc');
   });
 });

package/src/configs/API.js

@@ -39,6 +39,8 @@ const API = {
       SCConfig.apiRoot + `/property_manager/units/${id}/add_gateway/`,
     SENSORS_STATUS: (id) =>
       SCConfig.apiRoot + `/property_manager/units/${id}/sensors_status/`,
+    CHANGE_OWNER: (id) =>
+      SCConfig.apiRoot + `/property_manager/units/${id}/change_owner/`,
     FAVOURITE_DEVICES: (id) =>
       SCConfig.apiRoot + `/property_manager/units/${id}/favourite_devices/`,
   },
@@ -150,6 +152,12 @@ const API = {
     UNITS_MEMBER_DETAIL: (id, shareId) =>
       SCConfig.apiRoot +
       `/property_manager/sharing/units/${id}/members/${shareId}/`,
+    UNIT_MEMBER_INFO: (unit_id, member_id) =>
+      SCConfig.apiRoot +
+      `/property_manager/sharing/units/${unit_id}/member/${member_id}/information/`,
+    UNIT_MEMBER_SHARE_DEVICE: (unit_id, member_id) =>
+      SCConfig.apiRoot +
+      `/property_manager/sharing/units/${unit_id}/member/${member_id}/shared_devices/`,
     SHARE: () => SCConfig.apiRoot + '/property_manager/sharing/share/',
   },
   EMERGENCY: {
@@ -157,6 +165,8 @@ const API = {
   },
   EMERGENCY_BUTTON: {
     CREATE_CONTACT: () => SCConfig.apiRoot + '/emergency_button/contacts/',
+    CREATE_BATCH: () =>
+      SCConfig.apiRoot + '/emergency_button/contacts/create_batch/',
     CONTACTS: () => SCConfig.apiRoot + '/emergency_button/contacts/',
     REMOVE_CONTACTS: (id) =>
       SCConfig.apiRoot + `/emergency_button/contacts/${id}/`,