@eohjsc/react-native-smart-city 0.2.94 → 0.2.97

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.94",
+  "version": "0.2.97",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -81,10 +81,11 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-native": "^3.10.0",
     "factory-girl": "^5.0.4",
+    "husky": "^8.0.1",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
     "jetifier": "^1.6.6",
-    "lint-staged": "^8.2.1",
+    "lint-staged": "^12.4.1",
     "metro-react-native-babel-preset": "^0.66.2",
     "node-html-parser": "^2.0.2",
     "react": "17.0.2",
@@ -97,7 +98,8 @@
   "dependencies": {
     "@ant-design/icons-react-native": "^2.2.1",
     "@ant-design/react-native": "^4.0.5",
-    "@eohjsc/highcharts": "^1.0.6",
+    "@babel/helper-environment-visitor": "^7.16.7",
+    "@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",
@@ -209,5 +211,15 @@
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"
   },
-  "homepage": "https://github.com/github_account/react-native-smart-city#readme"
+  "homepage": "https://github.com/github_account/react-native-smart-city#readme",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js, ts}": [
+      "yarn lint"
+    ]
+  }
 }

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/Device/HistoryChart.js

@@ -234,7 +234,7 @@ const HistoryChart = memo(
         )}
         <DateTimePickerModal
           isVisible={eventPicker.showModalStart}
-          date={eventPicker.startTime.toDate()}
+          date={eventPicker.startTime.valueOf()}
           mode={formatType || 'datetime'}
           onConfirm={onConfirmStart}
           onCancel={onCancel}
@@ -242,7 +242,7 @@ const HistoryChart = memo(
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
-          date={eventPicker.endTime.toDate()}
+          date={eventPicker.endTime.valueOf()}
           mode={formatType || 'datetime'}
           onConfirm={onConfirmEnd}
           onCancel={onCancel}

package/src/commons/MenuActionMore/index.js

@@ -1,7 +1,6 @@
-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';
-import debounce from 'lodash.debounce';
 
 import styles from './MenuActionMoreStyles';
 import Text from '../Text';
@@ -20,26 +19,20 @@ const MenuActionMore = memo(
     wrapStyle,
     isTextCenter = true,
   }) => {
+    const [isDisable, setIsDisable] = useState(false);
     const onPress = useCallback(
-      (item, index) => {
+      (item, index) => () => {
+        setIsDisable(true);
         hideMore && hideMore();
         onItemClick && onItemClick(item, index);
+        const timeout = setTimeout(() => {
+          setIsDisable(false);
+          clearTimeout(timeout);
+        }, 500);
       },
       [hideMore, onItemClick]
     );
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedOnPress = useCallback(
-      debounce(
-        (item, index) => {
-          onPress(item, index);
-        },
-        500,
-        { leading: true, trailing: false }
-      ),
-      []
-    );
-
     useEffect(() => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useStatusBarPreview(
@@ -65,9 +58,10 @@ const MenuActionMore = memo(
                   styles.menuWrapper,
                   isTextCenter ? styles.modalHeaderCenter : styles.modalHeader,
                 ]}
-                onPress={() => debouncedOnPress(item, index)}
+                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/PreventAccess/index.js

@@ -0,0 +1,59 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import Modal from 'react-native-modal';
+import { useNavigation } from '@react-navigation/native';
+
+import t from '../../hooks/Common/useTranslations';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import { styles } from './styles';
+
+const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
+  const { goBack } = useNavigation();
+
+  const dataText = useMemo(() => {
+    return {
+      headerText: t('note'),
+      bodyText: t('This {name} was removed!', {
+        name: headerBodyText ? headerBodyText : '',
+      }),
+      endOfText: t('back'),
+    };
+  }, [headerBodyText]);
+
+  const handleBackPress = useCallback(() => {
+    hidePreventAccess();
+    goBack();
+  }, [goBack, hidePreventAccess]);
+
+  const handleDonePopup = useCallback(() => {
+    goBack();
+    hidePreventAccess();
+  }, [goBack, hidePreventAccess]);
+
+  return (
+    <Modal
+      isVisible={visible}
+      transparent={true}
+      onBackButtonPress={handleBackPress}
+      style={styles.container}
+    >
+      <View style={styles.popoverStyle}>
+        <View style={styles.actionTextWrap}>
+          <Text size={17} bold color={Colors.Gray9} style={styles.textHeader}>
+            {dataText?.headerText}
+          </Text>
+          <Text type="H4" color={Colors.Gray8} style={styles.textNotification}>
+            {dataText?.bodyText}
+          </Text>
+        </View>
+        <View style={styles.endOfText}>
+          <Text size={16} bold color={Colors.Primary} onPress={handleDonePopup}>
+            {dataText?.endOfText}
+          </Text>
+        </View>
+      </View>
+    </Modal>
+  );
+});
+export default PreventAccess;

package/src/commons/PreventAccess/styles.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  popoverStyle: {
+    flex: 1,
+    width: '100%',
+    backgroundColor: Colors.White,
+    position: 'absolute',
+    borderRadius: 10,
+  },
+  actionTextWrap: {
+    marginTop: 14,
+    marginHorizontal: 20,
+  },
+  textHeader: {
+    marginVertical: 10,
+  },
+  textNotification: {
+    lineHeight: 20,
+  },
+  endOfText: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 5,
+    marginBottom: 20,
+    marginRight: 20,
+  },
+});

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,
   },
 });