@eohjsc/react-native-smart-city 0.3.30 → 0.3.31

package/src/commons/Device/WindSpeed/Anemometer/index.js

@@ -15,7 +15,7 @@ const AnimatedPath = Animated.createAnimatedComponent(Path);
 
 const Anemometer = memo(
   ({
-    data,
+    data = [],
     maxValue,
     width = 240,
     size = 170,

package/src/commons/Header/HeaderCustom.js

@@ -21,6 +21,9 @@ const HeaderCustom = ({
   rightComponent,
   onGoBack,
   onClose,
+  iconLeft,
+  wrapTitleStyle,
+  iconBackStyle,
 }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
@@ -41,9 +44,12 @@ const HeaderCustom = ({
   return (
     <View style={[styles.wrap, isShowSeparator && styles.separator]}>
       <TouchableOpacity style={styles.buttonBack} onPress={handleGoback}>
-        <Image source={Images.arrowBack} style={styles.iconBack} />
+        <Image
+          source={iconLeft || Images.arrowBack}
+          style={[styles.iconBack, iconBackStyle]}
+        />
       </TouchableOpacity>
-      <View style={styles.wrapTitle}>
+      <View style={[styles.wrapTitle, wrapTitleStyle]}>
         <Text
           style={[styles.title, titleStyles, !isShowRight && styles.title2]}
           numberOfLines={1}

package/src/commons/MenuActionMore/index.js

@@ -71,7 +71,9 @@ const MenuActionMore = memo(
                 }`}
                 disabled={isDisable}
               >
-                <Text style={styles.modalHeaderText}>{item.text}</Text>
+                <Text style={[styles.modalHeaderText, item?.textStyle]}>
+                  {item?.text}
+                </Text>
               </TouchableOpacity>
             );
           })}

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -29,9 +29,12 @@ const WrapHeaderScrollable = ({
   headerAniCenterStyle,
   onGoBack,
   disableLoadMore = false,
+  scrollEnabled = true,
 }) => {
   const animatedScrollYValue = useRef(new Animated.Value(0)).current;
   const [loadingMore, setLoadingMore] = useState(false);
+  const [contentHeight, setContentHeight] = useState(0);
+
   const loadMore = useCallback(() => {
     if (onLoadMore) {
       setLoadingMore(true);
@@ -39,8 +42,6 @@ const WrapHeaderScrollable = ({
     }
   }, [onLoadMore]);
 
-  const [contentHeight, setContentHeight] = useState(0);
-
   const onContentSizeChange = useCallback(
     (_, height) => {
       setContentHeight(height);
@@ -61,6 +62,7 @@ const WrapHeaderScrollable = ({
       />
       <Animated.ScrollView
         testID={TESTID.ANIMATED_SCROLL}
+        scrollEnabled={scrollEnabled}
         scrollEventThrottle={16}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: animatedScrollYValue } } }],

package/src/configs/API.js

@@ -200,6 +200,12 @@ const API = {
   PUSHER: {
     AUTH: () => '/smart_parking/pusher/auth/',
   },
+  // NOTE: DEV MODE
+  DEV_MODE: {
+    GET_TEMPLATES: '/property_manager/iot_dashboard/dev_mode/templates/',
+    GET_WIDGETS: (templateId) =>
+      `/property_manager/iot_dashboard/dev_mode/templates/${templateId}/list_widgets/`,
+  },
 };
 
 export default API;

package/src/configs/Colors.js

@@ -135,6 +135,10 @@ export const Colors = {
   BlueTransparent5: 'rgba(230, 247, 255, 0.5)',
   Neutral: {
     Neutral3: '#E6E6E6',
+    Neutral4: '#B3B3B3',
     Neutral5: '#595959',
   },
+  BlackRussian: '#1D2129',
+  Salem: '#008040',
+  LightGreen: '#8AE699',
 };

package/src/configs/Images.js

@@ -19,4 +19,7 @@ export default {
   gateway: require('../Images/DevMode/gateway.png'),
   menu: require('../Images/DevMode/menu.png'),
   search: require('../Images/DevMode/search.png'),
+  close: require('../Images/DevMode/close.png'),
+  plus: require('../Images/DevMode/plus.png'),
+  removeCircle: require('../Images/DevMode/remove_circle.png'),
 };

package/src/context/actionType.ts

@@ -24,6 +24,11 @@ export const Action = {
   ON_RECEIVE_NOTIFICATION: 'ON_RECEIVE_NOTIFICATION',
   SET_DEVICES_STATUS: 'SET_DEVICES_STATUS',
   SET_POPOVER_ANIMATING: 'SET_POPOVER_ANIMATING',
+  SET_LOCK_VIEW_PICK_COLOR: 'SET_LOCK_VIEW_PICK_COLOR',
+  // NOTE: DEV MODE
+  SET_WIDGET_DRAGGING: 'SET_WIDGET_DRAGGING',
+  SET_IS_EDITING_TEMPLATE: 'SET_IS_EDITING_TEMPLATE',
+  SET_IS_IN_EDIT_TEMPLATE_SCREEN: 'SET_IS_IN_EDIT_TEMPLATE_SCREEN',
 };
 
 export type AuthData = {
@@ -82,6 +87,7 @@ export type AppType = {
   camera_opened: any[];
   notificationData: any;
   popoverAnimating: boolean;
+  isLockWhenPickColor: boolean;
 };
 
 export type IoTType = {
@@ -92,3 +98,9 @@ export type IoTType = {
     statuses: {};
   };
 };
+
+export type DevModeType = {
+  itemDraggingId: any;
+  isEditingTemplate: boolean;
+  isInEditTemplateScreen: boolean;
+};

package/src/context/mockStore.ts

@@ -38,6 +38,7 @@ export const mockDataStore: ContextData = {
     isBluetoothEnabled: true,
     isNetworkConnected: true,
     camera_opened: [],
+    isLockWhenPickColor: false,
   },
   iot: {
     googlehome: {
@@ -49,6 +50,11 @@ export const mockDataStore: ContextData = {
   },
   valueEvaluations: {},
   fetchedValueEvaluationUnits: [],
+  devMode: {
+    itemDraggingId: null,
+    isEditingTemplate: false,
+    isInEditTemplateScreen: false,
+  },
 };
 
 export const mockSCStore = (data: ContextData): ContextData => {
@@ -76,6 +82,7 @@ export const mockSCStore = (data: ContextData): ContextData => {
       isConnectWifiGateway: false,
       isBluetoothEnabled: true,
       isNetworkConnected: true,
+      isLockWhenPickColor: false,
     },
     unit: {
       favoriteDeviceIds: [
@@ -104,5 +111,10 @@ export const mockSCStore = (data: ContextData): ContextData => {
       ...data.valueEvaluations,
     },
     fetchedValueEvaluationUnits: [],
+    devMode: {
+      itemDraggingId: null,
+      isEditingTemplate: false,
+      isInEditTemplateScreen: false,
+    },
   };
 };

package/src/context/reducer.ts

@@ -11,6 +11,7 @@ import {
   AutomateType,
   AppType,
   IoTType,
+  DevModeType,
 } from './actionType';
 import { uniq, reduce } from 'lodash';
 
@@ -26,6 +27,7 @@ export type ContextData = {
   iot: IoTType;
   valueEvaluations: {};
   fetchedValueEvaluationUnits: Array<number>;
+  devMode: DevModeType;
 };
 
 export type Action = {
@@ -61,6 +63,7 @@ export const initialState = {
     camera_opened: [],
     notificationData: null,
     popoverAnimating: false,
+    isLockWhenPickColor: false,
   },
   iot: {
     googlehome: {
@@ -72,6 +75,11 @@ export const initialState = {
   },
   valueEvaluations: {},
   fetchedValueEvaluationUnits: [],
+  devMode: {
+    itemDraggingId: null,
+    isEditingTemplate: false,
+    isInEditTemplateScreen: false,
+  },
 };
 
 export const reducer = (currentState: ContextData, action: Action) => {
@@ -317,7 +325,6 @@ export const reducer = (currentState: ContextData, action: Action) => {
         valueEvaluations: reduce(
           data,
           (dict, item) => {
-            // eslint-disable-next-line no-param-reassign
             dict[item.config] = item;
             return dict;
           },
@@ -351,6 +358,41 @@ export const reducer = (currentState: ContextData, action: Action) => {
           popoverAnimating: payload,
         },
       };
+    case Action.SET_LOCK_VIEW_PICK_COLOR:
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          isLockWhenPickColor: payload,
+        },
+      };
+    // NOTE: DEV MODE
+    case Action.SET_WIDGET_DRAGGING:
+      return {
+        ...currentState,
+        devMode: {
+          ...currentState.devMode,
+          itemDraggingId: payload,
+        },
+      };
+
+    case Action.SET_IS_EDITING_TEMPLATE:
+      return {
+        ...currentState,
+        devMode: {
+          ...currentState.devMode,
+          isEditingTemplate: payload,
+        },
+      };
+
+    case Action.SET_IS_IN_EDIT_TEMPLATE_SCREEN:
+      return {
+        ...currentState,
+        devMode: {
+          ...currentState.devMode,
+          isInEditTemplateScreen: payload,
+        },
+      };
 
     default:
       return currentState;

package/src/navigations/Main.js

@@ -10,6 +10,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+import { createStackNavigator } from '@react-navigation/stack';
 
 import Tabbar from '../commons/Tabbar';
 import { Colors, Constants, Images } from '../configs';
@@ -21,9 +22,15 @@ import TemplateStack from './TemplateStack';
 import DrawerContainer from '../screens/Drawer';
 import { TESTID } from '../configs/Constants';
 import Text from '../commons/Text';
+import { screenOptions } from './utils';
+import TemplateDetail from '../screens/Template/detail';
+import Information from '../screens/Template/Information';
+import GatewayList from '../screens/Template/GatewayList';
+import EditTemplate from '../screens/Template/EditTemplate';
 
 const Tab = createBottomTabNavigator();
 const Drawer = createDrawerNavigator();
+const Stack = createStackNavigator();
 
 const getWidth = () => {
   const Width = Constants.width - 12;
@@ -103,18 +110,35 @@ const MainDevMode = () => {
   );
 };
 
-const DevModeStack = () => {
+const DrawerScreen = () => {
   return (
     <Drawer.Navigator
       backBehavior="none"
       drawerContent={(props) => <DrawerContainer {...props} />}
       drawerStyle={{ paddingTop: getStatusBarHeight() }}
     >
-      <Drawer.Screen name={Routes.DrawerMain} component={MainDevMode} />
+      <Drawer.Screen name={Routes.MainDevMode} component={MainDevMode} />
     </Drawer.Navigator>
   );
 };
 
+const DevModeStack = () => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen component={DrawerScreen} name={Routes.DrawerScreen} />
+      <Stack.Screen component={TemplateDetail} name={Routes.TemplateDetail} />
+      <Stack.Screen component={Information} name={Routes.Information} />
+      <Stack.Screen component={GatewayList} name={Routes.GatewayList} />
+      <Stack.Screen component={EditTemplate} name={Routes.EditTemplate} />
+    </Stack.Navigator>
+  );
+};
+
 export default DevModeStack;
 
 const styles = StyleSheet.create({

package/src/screens/AddNewGateway/hooks/__Tests__/index.test.js

@@ -0,0 +1,27 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../../utils/Apis/axios';
+import { useConnectGateway } from '..';
+
+import { API } from '../../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      dangerouslyGetParent: () => ({
+        dangerouslyGetState: jest.fn(),
+      }),
+    }),
+  };
+});
+describe('Test useGGHomeConnection', () => {
+  it('test connectGoogleHome all connected', async () => {
+    const { result } = renderHook(() => useConnectGateway(1));
+    await act(async () => {
+      await result.current.onPressDone();
+    });
+    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, {});
+  });
+});

package/src/screens/Device/components/DetailHistoryChart.js

@@ -5,8 +5,10 @@ import HistoryChart from '../../../commons/Device/HistoryChart';
 import { API } from '../../../configs';
 import { axiosGet } from '../../../utils/Apis/axios';
 
-export const DetailHistoryChart = ({ item, sensor }) => {
-  const [chartData, setChartData] = useState(item.configuration.configs);
+export const DetailHistoryChart = ({ item = {}, sensor = {} }) => {
+  const { configuration = {} } = item;
+  const { configs = [] } = configuration;
+  const [chartData, setChartData] = useState(configs);
   const [startDate, setStartDate] = useState(
     moment().subtract(1, 'days').valueOf()
   );
@@ -14,7 +16,7 @@ export const DetailHistoryChart = ({ item, sensor }) => {
   useEffect(() => {
     const fetchData = async () => {
       let params = new URLSearchParams();
-      item.configuration.configs.map((config) => {
+      configs.map((config) => {
         params.append('config', config.id);
       });
       params.append('date_from', startDate / 1000);
@@ -30,7 +32,7 @@ export const DetailHistoryChart = ({ item, sensor }) => {
           }
         }
 
-        const formatData = item.configuration.configs.map((config) => {
+        const formatData = configs.map((config) => {
           const dataChart = data.find((k) => k.config === config.id) || {
             data: [],
           };
@@ -40,7 +42,7 @@ export const DetailHistoryChart = ({ item, sensor }) => {
       }
     };
     fetchData();
-  }, [startDate, endDate, item, sensor]);
+  }, [startDate, endDate, sensor, configs]);
   if (!chartData.length) {
     return false;
   }

package/src/screens/Device/components/SensorDisplayItem.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import ActionGroup from '../../../commons/ActionGroup';
-import { Card } from '../../../commons/CardShadow';
+import { CardDevMode } from '../../../commons/DevMode';
 import { TESTID } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { DetailHistoryChart } from './DetailHistoryChart';
@@ -28,7 +28,7 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
 );
 
 export const SensorDisplayItem = ({
-  item,
+  item = {},
   sensor,
   emergency,
   getData,
@@ -40,6 +40,8 @@ export const SensorDisplayItem = ({
 }) => {
   const t = useTranslations();
   const userId = useSCContextSelector((state) => state.auth.account.user.id);
+  const { configuration = {}, id: idTemplate } = item;
+  const { type, uri, id, name, title } = configuration;
 
   const sendRemoteCommand = useRemoteControl();
 
@@ -50,42 +52,47 @@ export const SensorDisplayItem = ({
     [sensor, userId, sendRemoteCommand]
   );
 
-  if (item.configuration.type === 'compass') {
-    setShowWindDirection(true);
+  if (type === 'compass') {
+    setShowWindDirection && setShowWindDirection(true);
   }
   switch (item.type) {
     case 'camera':
       return (
-        <Card title={t('camera')}>
+        <CardDevMode title={t('camera')} id={idTemplate} isWrap>
           <View style={styles.mediaContainer}>
             <MediaPlayerDetail
-              uri={item.configuration.uri}
+              uri={uri}
               thumbnail={{
                 uri: background,
               }}
-              key={`camera-device-${item.configuration.id}`}
-              cameraName={item.configuration.name}
+              key={`camera-device-${id}`}
+              cameraName={name}
               width={standardizeWidth - 32}
               height={standardizeHeight - 16}
             />
           </View>
-        </Card>
+        </CardDevMode>
       );
     case 'action':
       return (
         <ActionGroup
           testID={TESTID.DEVICE_DETAIL_ACTION_GROUP}
-          actionGroup={item.configuration}
+          actionGroup={configuration}
           doAction={doAction}
           sensor={sensor}
+          id={idTemplate}
         />
       );
     case 'history':
       return <DetailHistoryChart item={item} sensor={sensor} />;
     case 'value':
-      switch (item.configuration.type) {
+      switch (type) {
         case 'circle':
-          return <CurrentRainSensor data={getData(item)} />;
+          return (
+            <CardDevMode id={idTemplate}>
+              <CurrentRainSensor data={getData(item)} />
+            </CardDevMode>
+          );
         case 'simple_list':
           return (
             <PMSensorIndicatior
@@ -94,22 +101,32 @@ export const SensorDisplayItem = ({
             />
           );
         case 'gauge':
-          return <Anemometer data={getData(item)} maxValue={maxValue} />;
+          return (
+            <CardDevMode id={idTemplate}>
+              <Anemometer data={getData(item)} maxValue={maxValue} />
+            </CardDevMode>
+          );
         case 'compass':
-          return <Compass data={getData(item)} />;
+          return (
+            <CardDevMode id={idTemplate}>
+              <Compass data={getData(item)} />
+            </CardDevMode>
+          );
         case 'alert_status':
           return (
-            <DeviceAlertStatus
-              data={getData(item)}
-              style={styles.marginLeft}
-              offsetTitle={offsetTitle}
-              setOffsetTitle={setOffsetTitle}
-            />
+            <CardDevMode id={idTemplate}>
+              <DeviceAlertStatus
+                data={getData(item)}
+                style={styles.marginLeft}
+                offsetTitle={offsetTitle}
+                setOffsetTitle={setOffsetTitle}
+              />
+            </CardDevMode>
           );
         case 'flat_list':
           return (
             <FlatListItems
-              title={item.configuration.title}
+              title={title}
               data={getData(item)}
               style={[styles.marginLeft, styles.marginVertical]}
               offsetTitle={offsetTitle}
@@ -119,14 +136,22 @@ export const SensorDisplayItem = ({
           return <ListQualityIndicator data={getData(item)} />;
       }
     case 'emergency':
-      switch (item.configuration.type) {
+      switch (type) {
         case 'detail':
-          return <EmergencyDetail item={item} />;
+          return (
+            <CardDevMode id={idTemplate}>
+              <EmergencyDetail item={item} />
+            </CardDevMode>
+          );
         default:
           return <EmergencyButton emergency={emergency} />;
       }
     case 'info':
-      return <FooterInfo data={item.configuration} />;
+      return (
+        <CardDevMode id={idTemplate}>
+          <FooterInfo data={configuration} />
+        </CardDevMode>
+      );
     case 'smart_ir':
       return <SmartIr item={item} />;
     default:

package/src/screens/Device/detail.js

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useContext,
 } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, Platform } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import moment from 'moment';
 import { get } from 'lodash';
@@ -63,6 +63,7 @@ const DeviceDetail = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
   const token = useSCContextSelector((state) => state.auth.account.token);
+  const { isLockWhenPickColor } = useSCContextSelector((state) => state.app);
   const { setAction } = useContext(SCContext);
   const [offsetTitle, setOffsetTitle] = useState(1);
   const [display, setDisplay] = useState({ items: [] });
@@ -736,6 +737,7 @@ const DeviceDetail = ({ route }) => {
         headerAniStyle={styles.header}
         rightComponent={HeaderRight}
         onRefresh={onRefresh}
+        scrollEnabled={!(Platform.OS === 'ios' && isLockWhenPickColor)}
       >
         <View style={styles.wrapTemplate}>
           {loading.displayTemplate === false &&

package/src/screens/Drawer/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useContext } from 'react';
 import {
   View,
   Image,
@@ -15,19 +15,24 @@ import { Images, Colors } from '../../configs';
 import Text from '../../commons/Text';
 import Routes from '../../utils/Route';
 import { TESTID } from '../../configs/Constants';
-import { useSCContextSelector } from '../../context';
+import { SCContext, useSCContextSelector } from '../../context';
 import { CommonActions, useNavigation } from '@react-navigation/native';
+import { Action } from '../../context/actionType';
 
 const DrawerContainer = ({ navigation }) => {
   const user = useSCContextSelector((state) => state.auth.account.user);
   const { dispatch } = useNavigation();
-  const doLogout = () => {
+  const { setAction } = useContext(SCContext);
+
+  const doLogout = useCallback(() => {
     const resetAction = CommonActions.reset({
       index: 0,
       routes: [{ name: Routes.Main }],
     });
     dispatch(resetAction);
-  };
+    setAction(Action.SET_IS_EDITING_TEMPLATE);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const goToHelp = () => {};