@eohjsc/react-native-smart-city 0.7.26 → 0.7.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.26",
+  "version": "0.7.27",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/screens/ActivityLog/FilterPopup.js

@@ -1,6 +1,5 @@
 import React, { useState, useCallback } from 'react';
 import { View, ScrollView, TouchableOpacity } from 'react-native';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 
 import BottomButtonView from '../../commons/BottomButtonView';
@@ -8,7 +7,6 @@ import Text from '../../commons/Text';
 import RadioCircle from '../../commons/RadioCircle';
 import DateTimeRangeChange from '../../commons/DateTimeRangeChange';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useBoolean } from '../../hooks/Common';
 
 import { Colors } from '../../configs';
 import styles from './styles/filterPopupStyles';
@@ -42,21 +40,16 @@ const RowMember = ({ member, isSelected, onSelect }) => {
 const FilterPopup = ({
   isVisible,
   onHide,
-  onShow,
   members,
   filters,
   userFilterEnabled,
   onApply,
 }) => {
   const t = useTranslations();
-  const [lockShowing, acquireLockShowing, releaseLockShowing] =
-    useBoolean(false);
   const [selectedUsers, setSelectedUsers] = useState(filters.users);
   const [stateDatePicker, setStateDatePicker] = useState({
-    visible: false,
     startDate: filters.date_from,
     endDate: filters.date_to,
-    currentTimeChange: 'start',
   });
 
   const handleOnSelectUser = useCallback(
@@ -78,90 +71,38 @@ const FilterPopup = ({
     [selectedUsers, setSelectedUsers]
   );
 
-  const selectStart = useCallback(() => {
-    onHide();
-    acquireLockShowing();
-    setStateDatePicker((state) => ({
-      ...state,
-      visible: true,
-      currentTimeChange: 'start',
-    }));
-  }, [onHide, acquireLockShowing]);
-
-  const selectEnd = useCallback(() => {
-    onHide();
-    acquireLockShowing();
-    setStateDatePicker((state) => ({
-      ...state,
-      visible: true,
-      currentTimeChange: 'end',
-    }));
-  }, [onHide, acquireLockShowing]);
-
-  const onConfirmStartDate = useCallback((date) => {
+  const selectStart = useCallback((date) => {
     setStateDatePicker((state) => {
       if (moment(date).valueOf() < state.endDate) {
         return {
           ...state,
-          visible: false,
           startDate: moment(date).valueOf(),
         };
       }
       return {
         ...state,
-        visible: false,
         startDate: moment(date).valueOf(),
         endDate: moment(date).add(1, 'days').valueOf(),
       };
     });
   }, []);
 
-  const onConfirmEndDate = useCallback((date) => {
+  const selectEnd = useCallback((date) => {
     setStateDatePicker((state) => {
       if (moment(date).valueOf() > state.startDate) {
         return {
           ...state,
-          visible: false,
           endDate: moment(date).valueOf(),
         };
       }
       return {
         ...state,
-        visible: false,
         startDate: moment(date).add(-1, 'days').valueOf(),
         endDate: moment(date).valueOf(),
       };
     });
   }, []);
 
-  const onConfirmDate = useCallback(
-    (date) => {
-      if (stateDatePicker.currentTimeChange === 'start') {
-        onConfirmStartDate(date);
-      } else {
-        onConfirmEndDate(date);
-      }
-      onShow();
-      acquireLockShowing();
-    },
-    [
-      onConfirmStartDate,
-      onConfirmEndDate,
-      stateDatePicker,
-      acquireLockShowing,
-      onShow,
-    ]
-  );
-
-  const onPickerCancel = useCallback(() => {
-    setStateDatePicker((state) => ({
-      ...state,
-      visible: false,
-    }));
-    acquireLockShowing();
-    onShow();
-  }, [acquireLockShowing, onShow]);
-
   const handleOnApply = useCallback(() => {
     onApply({
       users: selectedUsers,
@@ -184,10 +125,9 @@ const FilterPopup = ({
   return (
     <>
       <ModalCustom
-        isVisible={isVisible && !lockShowing}
+        isVisible={isVisible}
         onBackButtonPress={handleOnCancel}
         onBackdropPress={handleOnCancel}
-        onModalHide={releaseLockShowing}
         useNativeDriver={true}
         useNativeDriverForBackdrop={true}
         animationIn={'zoomIn'}
@@ -211,6 +151,7 @@ const FilterPopup = ({
               selectStart={selectStart}
               selectEnd={selectEnd}
               formatType="date"
+              style={styles.datePicker}
               inline={true}
             />
             {userFilterEnabled && (
@@ -245,22 +186,6 @@ const FilterPopup = ({
           />
         </View>
       </ModalCustom>
-      <DateTimePickerModal
-        isVisible={stateDatePicker.visible && !lockShowing}
-        date={
-          stateDatePicker.currentTimeChange === 'start'
-            ? new Date(stateDatePicker.startDate)
-            : new Date(stateDatePicker.endDate)
-        }
-        mode={'date'}
-        onConfirm={onConfirmDate}
-        onCancel={onPickerCancel}
-        onHide={releaseLockShowing}
-        display="spinner"
-        headerTextIOS={t('pick_a_date')}
-        cancelTextIOS={t('cancel')}
-        confirmTextIOS={t('confirm')}
-      />
     </>
   );
 };

package/src/screens/ActivityLog/__test__/FilterPopup.test.js

@@ -8,7 +8,6 @@ import RadioCircle from '../../../commons/RadioCircle';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import BottomButtonView from '../../../commons/BottomButtonView';
 import DateTimeRangeChange from '../../../commons/DateTimeRangeChange';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 
 const wrapComponent = (props) => (
@@ -125,7 +124,6 @@ it('test date picker pick valid and invalid date', async () => {
   });
   const instance = tree.root;
   const dateTimeRangeChange = instance.findByType(DateTimeRangeChange);
-  const datePicker = instance.findAllByType(DateTimePickerModal)[2];
 
   expect(dateTimeRangeChange.props.startTime).toBe(dateFrom.valueOf());
   expect(dateTimeRangeChange.props.endTime).toBe(dateTo.valueOf());
@@ -133,11 +131,9 @@ it('test date picker pick valid and invalid date', async () => {
   const _pickDateAndTest = async (timeChange) => {
     await act(async () => {
       if (timeChange === 'start') {
-        await dateTimeRangeChange.props.selectStart();
-        await datePicker.props.onConfirm(moment(dateFrom));
+        await dateTimeRangeChange.props.selectStart(dateFrom);
       } else {
-        await dateTimeRangeChange.props.selectEnd();
-        await datePicker.props.onConfirm(moment(dateTo));
+        await dateTimeRangeChange.props.selectEnd(dateTo);
       }
     });
     expect(dateTimeRangeChange.props.startTime).toBe(dateFrom.valueOf());

package/src/screens/ActivityLog/__test__/index.test.js

@@ -1,17 +1,20 @@
+import { act } from '@testing-library/react-hooks';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import { SectionList, Text } from 'react-native';
 import { create } from 'react-test-renderer';
-import { act } from '@testing-library/react-hooks';
-import MockAdapter from 'axios-mock-adapter';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import moment from 'moment';
 
 import ActivityLog from '../';
 import { API, Constants } from '../../../configs';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ItemLog from '../ItemLog';
+import FilterPopup from '../FilterPopup';
+import BottomButtonView from '../../../commons/BottomButtonView';
 import DateTimeRangeChange from '../../../commons/DateTimeRangeChange';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import Modal from 'react-native-modal';
+import DateTimeButton from '../../../commons/DateTimeRangeChange/DateTimeButton';
 import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
 
@@ -88,13 +91,15 @@ describe('Test Activity log', () => {
     expect(items).toHaveLength(1);
   });
 
-  it('test open and close 2 modal', async () => {
+  it('test filter and date picker popup', async () => {
+    const dateFrom = moment('2025-08-18T10:00:00.000Z');
+    const dateTo = moment(dateFrom).add(7, 'days');
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const filterPopup = instance.findAllByType(Modal);
-    expect(filterPopup[0].props.isVisible).toBeFalsy();
+    const filterPopup = instance.findByType(FilterPopup);
+    expect(filterPopup.props.isVisible).toBeFalsy();
 
     const filterButton = instance.findByProps({
       accessibilityLabel: AccessibilityLabel.FILTER_BUTTON,
@@ -102,43 +107,60 @@ describe('Test Activity log', () => {
     await act(async () => {
       filterButton.props.onPress();
     });
-    expect(filterPopup[0].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
 
     const dateTimeRangeChange = instance.findByType(DateTimeRangeChange);
-    const datePicker = instance.findAllByType(DateTimePickerModal)[2];
+    const datePickers = instance.findAllByType(DateTimePickerModal);
+    const buttonPickers = instance.findAllByType(DateTimeButton);
+
+    // open popup start date
+    await act(async () => {
+      await buttonPickers[0].props.onPress();
+    });
+    expect(datePickers[0].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
 
     // pick start date
     await act(async () => {
-      await dateTimeRangeChange.props.selectStart();
-      await filterPopup[0].props.onModalHide();
+      await dateTimeRangeChange.props.selectStart(dateFrom);
     });
-    expect(filterPopup[0].props.isVisible).toBeFalsy();
-    // cancel
+    expect(datePickers[0].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
+    // cancel start date
     await act(async () => {
-      await datePicker.props.onCancel();
-      await datePicker.props.onHide();
+      await datePickers[0].props.onCancel();
     });
-    expect(filterPopup[0].props.isVisible).toBeTruthy();
-    expect(datePicker.props.isVisible).toBeFalsy();
-    // open popup
+    expect(datePickers[0].props.isVisible).toBeFalsy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
+    // open popup end date
     await act(async () => {
-      await filterButton.props.onPress();
+      await buttonPickers[1].props.onPress();
     });
-    expect(filterPopup[0].props.isVisible).toBeTruthy();
+    expect(datePickers[1].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
     // pick end date
     await act(async () => {
-      await dateTimeRangeChange.props.selectEnd();
-      await filterPopup[0].props.onModalHide();
+      await dateTimeRangeChange.props.selectEnd(dateTo);
     });
-    expect(filterPopup[0].props.isVisible).toBeFalsy();
-    expect(datePicker.props.isVisible).toBeTruthy();
-    // confirm
+    expect(datePickers[1].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
+    // confirm end date
+    await act(async () => {
+      await datePickers[1].props.onConfirm();
+    });
+    expect(datePickers[1].props.isVisible).toBeFalsy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
+    // apply filter
+    const applyButton = instance.findByType(BottomButtonView);
     await act(async () => {
-      await datePicker.props.onConfirm();
-      await datePicker.props.onHide();
+      await applyButton.props.onPressMain();
     });
-    expect(filterPopup[0].props.isVisible).toBeTruthy();
-    expect(datePicker.props.isVisible).toBeFalsy();
+    expect(filterPopup.props.isVisible).toBeFalsy();
   });
 
   const setUpActionLogScreen = () => {

package/src/screens/ActivityLog/index.js

@@ -121,7 +121,6 @@ const ActivityLogScreen = ({ route }) => {
         <FilterPopup
           isVisible={showFilterPopup}
           onHide={setHideFilterPopup}
-          onShow={setShowFilterPopup}
           members={members}
           filters={filters}
           userFilterEnabled={filterEnabled.user}

package/src/screens/ActivityLog/styles/filterPopupStyles.js

@@ -3,16 +3,19 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   wrapPopup: {
-    marginHorizontal: 16,
+    marginHorizontal: 12,
   },
   popup: {
     backgroundColor: Colors.White,
     width: '100%',
     height: (Constants.height * 80) / 100,
-    padding: 24,
+    padding: 20,
     paddingBottom: 100,
     borderRadius: 10,
   },
+  datePicker: {
+    justifyContent: 'center',
+  },
   heigh50percent: {
     height: (Constants.height * 50) / 100,
   },

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

@@ -134,20 +134,22 @@ export const SensorDisplayItem = ({
   switch (item.template) {
     case 'camera':
       return (
-        <View
-          style={[styles.mediaContainer, isWidgetOrder && styles.cameraOrder]}
-        >
-          <Text style={styles.widgetLabelCamera}>{label}</Text>
-          <MediaPlayerDetail
-            uri={uri}
-            thumbnail={{
-              uri: background,
-            }}
-            key={`camera-device-${id}`}
-            cameraName={name}
-            width={standardizeWidth}
-            height={standardizeHeight}
-          />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <View
+            style={[styles.mediaContainer, isWidgetOrder && styles.cameraOrder]}
+          >
+            <MediaPlayerDetail
+              uri={uri}
+              thumbnail={{
+                uri: background,
+              }}
+              key={`camera-device-${id}`}
+              cameraName={name}
+              width={standardizeWidth}
+              height={standardizeHeight}
+            />
+          </View>
         </View>
       );
     // change response format, todo Bang refactor after fix

package/src/screens/Device/styles.js

@@ -105,11 +105,6 @@ export default StyleSheet.create({
     marginHorizontal: 20,
     marginBottom: 4,
   },
-  widgetLabelCamera: {
-    fontSize: 16,
-    color: Colors.Black,
-    marginBottom: 4,
-  },
   widgetLabelHistory: {
     fontSize: 16,
     color: Colors.Black,