@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/screens/GuestInfo/components/RowGuestInfo.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import Text from '../../../commons/Text';
+import styles from '../styles/indexStyles';
+
+const RowGuestInfo = ({
+  textLeft,
+  textRight,
+  rightArrow = false,
+  onPress = () => {},
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <View style={styles.row}>
+        <Text type="H4" bold>
+          {textLeft}
+        </Text>
+        <View style={styles.rowRight}>
+          <Text type="Body">{textRight}</Text>
+          {rightArrow && (
+            <IconOutline name="right" size={20} style={styles.icon} />
+          )}
+        </View>
+      </View>
+      <View style={styles.separator} />
+    </TouchableOpacity>
+  );
+};
+
+export default RowGuestInfo;

package/src/screens/GuestInfo/components/TemporaryDetail.js

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import styles from '../styles/AccessScheduleDetailStyles';
+
+const TemporaryDetail = ({
+  onShowSetDateTime,
+  temporaryTimeStart,
+  temporaryTimeEnd,
+  setTemporaryTimeStart,
+  setTemporaryTimeEnd,
+}) => {
+  const t = useTranslations();
+  const onSetTimeStart = useCallback(() => {
+    onShowSetDateTime(temporaryTimeStart, setTemporaryTimeStart, 'datetime');
+  }, [onShowSetDateTime, temporaryTimeStart, setTemporaryTimeStart]);
+
+  const onSetTimeEnd = useCallback(() => {
+    onShowSetDateTime(temporaryTimeEnd, setTemporaryTimeEnd, 'datetime');
+  }, [onShowSetDateTime, temporaryTimeEnd, setTemporaryTimeEnd]);
+
+  return (
+    <View>
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('start')}
+      </Text>
+      <TouchableOpacity onPress={onSetTimeStart}>
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          {temporaryTimeStart.format('hh:mm A DD/MM/YYYY')}
+        </Text>
+      </TouchableOpacity>
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('end')}
+      </Text>
+      <TouchableOpacity onPress={onSetTimeEnd}>
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          {temporaryTimeEnd.format('hh:mm A DD/MM/YYYY')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default TemporaryDetail;

package/src/screens/GuestInfo/constant.js

@@ -0,0 +1,59 @@
+import moment from 'moment';
+import { Colors } from '../../configs';
+
+export const ACCESS_SCHEDULE = {
+  ALWAYS: 'always',
+  RECURRING: 'recurring',
+  TEMPORARY: 'temporary',
+};
+
+export const ACCESS_SCHEDULE_PROPERTIES = {
+  [ACCESS_SCHEDULE.ALWAYS]: ['access_schedule'],
+  [ACCESS_SCHEDULE.RECURRING]: [
+    'access_schedule',
+    'recurring_time_start',
+    'recurring_time_end',
+    'recurring_time_repeat',
+  ],
+  [ACCESS_SCHEDULE.TEMPORARY]: [
+    'access_schedule',
+    'temporary_time_start',
+    'temporary_time_end',
+  ],
+};
+
+export const typeMaps = {
+  recurring_time_start: 'time',
+  recurring_time_end: 'time',
+  recurring_time_repeat: 'array',
+  temporary_time_start: 'datetime',
+  temporary_time_end: 'datetime',
+};
+
+export const formatterMaps = {
+  time: (value) => moment(`2020-01-01T${value}`),
+  datetime: (value) => moment(value),
+  array: (value) => value,
+};
+
+export const formatterForUpdateMaps = {
+  time: (value) => moment(value).format('HH:mm:ss'),
+  datetime: (value) => moment(value).utc().format('YYYY-MM-DD HH:mm:ss'),
+  array: (value) => value,
+};
+
+export const getDefaultValueMaps = {
+  time: () => moment().hour(0).minute(0),
+  datetime: () => moment().hour(0).minute(0),
+  array: () => [],
+};
+
+export const REPEAT_ITEMS = [
+  { value: '6', text: 'S', color: Colors.Red6 },
+  { value: '0', text: 'M', color: Colors.Gray8 },
+  { value: '1', text: 'T', color: Colors.Gray8 },
+  { value: '2', text: 'W', color: Colors.Gray8 },
+  { value: '3', text: 'T', color: Colors.Gray8 },
+  { value: '4', text: 'F', color: Colors.Gray8 },
+  { value: '5', text: 'S', color: Colors.Gray8 },
+];

package/src/screens/GuestInfo/index.js

@@ -0,0 +1,151 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useRoute } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+
+import RowGuestInfo from './components/RowGuestInfo';
+import HeaderGuestInfo from './components/HeaderGuestInfo';
+import AccessScheduleSheet from './components/AccessScheduleSheet';
+import { CircleView } from '../../commons/CircleView';
+import { IconOutline } from '@ant-design/icons-react-native';
+import Text from '../../commons/Text';
+import { useBoolean } from '../../hooks/Common';
+import { axiosGet, axiosPut } from '../../utils/Apis/axios';
+
+import { API, Colors } from '../../configs';
+import {
+  ACCESS_SCHEDULE_PROPERTIES,
+  typeMaps,
+  formatterMaps,
+  formatterForUpdateMaps,
+  getDefaultValueMaps,
+} from './constant';
+import styles from './styles/indexStyles';
+
+const GuestInfo = () => {
+  const t = useTranslations();
+  const { params = {} } = useRoute();
+  const { id } = params;
+  const { goBack } = useNavigation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [guest, setGuest] = useState();
+  const [accessSchedule, setAccessSchedule] = useState();
+  const [
+    showAccessScheduleSheet,
+    setShowAccessScheduleSheet,
+    setHideAccessScheduleSheet,
+  ] = useBoolean();
+
+  const prepareData = useCallback((rawData) => {
+    const listProperty = ACCESS_SCHEDULE_PROPERTIES[rawData.access_schedule];
+
+    for (const [key, value] of Object.entries(rawData)) {
+      const type = typeMaps[key];
+      if (!type) {
+        continue;
+      }
+      if (!listProperty.includes(key)) {
+        rawData[key] = getDefaultValueMaps[type]();
+        continue;
+      }
+      rawData[key] = formatterMaps[type](value);
+    }
+  }, []);
+
+  const prepareDataForUpdate = useCallback((data) => {
+    const listProperty = ACCESS_SCHEDULE_PROPERTIES[data.access_schedule];
+
+    for (const [key, value] of Object.entries(data)) {
+      if (!listProperty.includes(key)) {
+        delete data[key];
+        continue;
+      }
+      const type = typeMaps[key];
+      const formatter = formatterForUpdateMaps[type];
+      if (formatter) {
+        data[key] = formatter(value);
+      }
+    }
+  }, []);
+
+  const fetchGuestInfo = useCallback(async () => {
+    setIsLoading(true);
+    const { success, data } = await axiosGet(API.SHARED_SENSOR.ACCESS(id));
+    if (success) {
+      setGuest(data.user);
+      prepareData(data);
+      setAccessSchedule(data);
+    }
+    setIsLoading(false);
+  }, [id, prepareData, setAccessSchedule]);
+
+  const onSave = useCallback(async () => {
+    setIsLoading(true);
+    prepareDataForUpdate(accessSchedule);
+    const { success } = await axiosPut(API.SHARED_SENSOR.ACCESS(id), {
+      ...accessSchedule,
+    });
+    setIsLoading(false);
+    if (success) {
+      goBack();
+    }
+  }, [id, goBack, accessSchedule, prepareDataForUpdate]);
+
+  useEffect(() => {
+    fetchGuestInfo();
+  }, [fetchGuestInfo]);
+
+  return (
+    <>
+      <View style={styles.container}>
+        <HeaderGuestInfo onSave={onSave} />
+        {isLoading ? (
+          <ActivityIndicator
+            size="large"
+            color={Colors.Primary}
+            style={styles.loading}
+          />
+        ) : (
+          <>
+            {!!guest && (
+              <View style={styles.userWrap}>
+                <CircleView size={88} center style={styles.avatar}>
+                  <IconOutline name="user" size={44} color={Colors.Pink1} />
+                </CircleView>
+                <Text type="H3" bold>
+                  {guest.name}
+                </Text>
+              </View>
+            )}
+            {guest?.id && (
+              <RowGuestInfo
+                textLeft={t('eoh_account_id')}
+                textRight={guest.id}
+              />
+            )}
+            {accessSchedule && (
+              <RowGuestInfo
+                textLeft={t('access_schedule')}
+                textRight={t(`${accessSchedule.access_schedule}`)}
+                rightArrow
+                onPress={setShowAccessScheduleSheet}
+              />
+            )}
+          </>
+        )}
+      </View>
+      {accessSchedule && (
+        <AccessScheduleSheet
+          isVisible={showAccessScheduleSheet}
+          onShow={setShowAccessScheduleSheet}
+          onHide={setHideAccessScheduleSheet}
+          data={accessSchedule}
+          onSetData={setAccessSchedule}
+        />
+      )}
+    </>
+  );
+};
+
+export default GuestInfo;

package/src/screens/GuestInfo/styles/AccessScheduleDetailStyles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  title: {
+    marginTop: 16,
+  },
+  value: {
+    marginTop: 8,
+  },
+  repeatWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: 16,
+  },
+  repeatItem: {
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 12,
+    borderWidth: 0,
+    borderColor: Colors.Orange,
+  },
+  repeatItemSelected: {
+    borderWidth: 1,
+  },
+  repeatText: {
+    lineHeight: 16,
+  },
+});

package/src/screens/GuestInfo/styles/AccessScheduleItemStyles.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  rowWrap: {
+    paddingHorizontal: 16,
+  },
+  rowContent: {
+    paddingVertical: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  textAccessSchedule: {
+    marginLeft: 8,
+  },
+  separator: {
+    borderBottomColor: Colors.Gray3,
+    borderBottomWidth: 1,
+  },
+});

package/src/screens/GuestInfo/styles/HeaderGuestInfoStyles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+import { getStatusBarHeight } from '../../../configs/Constants';
+
+export default StyleSheet.create({
+  wrap: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    paddingLeft: 7,
+    paddingRight: 16,
+    paddingBottom: 6,
+    paddingTop: getStatusBarHeight(),
+    borderBottomWidth: 0.5,
+    borderColor: Colors.Border,
+  },
+  icon: {
+    width: 12,
+    height: 18,
+  },
+  button: {
+    width: 35,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrapTitle: {
+    flex: 1,
+    alignItems: 'center',
+  },
+});

package/src/screens/GuestInfo/styles/indexStyles.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  userWrap: {
+    paddingVertical: 24,
+    alignItems: 'center',
+  },
+  avatar: {
+    marginBottom: 16,
+    backgroundColor: Colors.Primary,
+  },
+  loading: {
+    marginTop: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+  },
+  rowRight: {
+    flexDirection: 'row',
+  },
+  icon: {
+    marginLeft: 8,
+    width: 15,
+  },
+  separator: {
+    borderBottomColor: Colors.Gray3,
+    borderBottomWidth: 1,
+    marginHorizontal: 16,
+  },
+});

package/src/screens/ManageAccess/__test__/ManageAccess.test.js

@@ -6,6 +6,8 @@ import { HeaderCustom } from '../../../commons/Header';
 import useManageAccess from '../hooks/index';
 import axios from 'axios';
 import API from '../../../configs/API';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockRoute = jest.fn();
 
@@ -20,11 +22,21 @@ jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
     useRoute: () => mockRoute,
+    useNavigation: () => ({
+      goBack: jest.fn(),
+    }),
+    useIsFocused: jest.fn(),
   };
 });
 
 jest.mock('axios');
 
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ManageAccessScreen />
+  </SCProvider>
+);
+
 describe('Test Manage Access', () => {
   afterEach(() => {
     axios.get.mockClear();
@@ -73,7 +85,7 @@ describe('Test Manage Access', () => {
   let tree;
   it('rendering Manage Access header', async () => {
     act(() => {
-      tree = create(<ManageAccessScreen />);
+      tree = create(wrapComponent());
     });
     const instance = tree.root;
     const header = instance.findAllByType(HeaderCustom);

package/src/screens/ManageAccess/hooks/index.js

@@ -5,13 +5,16 @@ import API from '../../../configs/API';
 export default (unit, sensor) => {
   const [data, setData] = useState([]);
   const [isRefresh, setRefresh] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const fetchData = useCallback(async (unit, sensor) => {
+    setIsLoading(true);
     const { success, data } = await axiosGet(API.UNIT.MANAGE_ACCESS(unit.id), {
       params: { sensor_id: sensor.id },
     });
     if (success) {
       setData(data);
     }
+    setIsLoading(false);
   }, []);
 
   const onRefresh = useCallback(async () => {
@@ -24,5 +27,6 @@ export default (unit, sensor) => {
     data,
     isRefresh,
     onRefresh,
+    isLoading,
   };
 };

package/src/screens/ManageAccess/index.js

@@ -4,8 +4,10 @@ import {
   TouchableOpacity,
   ScrollView,
   RefreshControl,
+  ActivityIndicator,
 } from 'react-native';
-import { t } from 'i18n-js';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { HeaderCustom } from '../../commons/Header';
 import { IconOutline } from '@ant-design/icons-react-native';
 import styles from './styles/ManageAccessStyles';
@@ -14,6 +16,7 @@ import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { useRoute } from '@react-navigation/native';
 import useManageAccess from './hooks';
+import Routes from '../../utils/Route';
 
 const arrColor = [
   Colors.GeekBlue3,
@@ -26,14 +29,26 @@ const arrColor = [
 ];
 
 const ManageAccessScreen = memo(() => {
+  const t = useTranslations();
   const { params = {} } = useRoute();
   const { unit, sensor } = params;
-  const { data, isRefreshing, onRefresh } = useManageAccess(unit, sensor);
+  const { navigate } = useNavigation();
+  const isFocused = useIsFocused();
+  const { data, isRefresh, isLoading, onRefresh } = useManageAccess(
+    unit,
+    sensor
+  );
+
+  const goToGuestInfo = (id) => {
+    navigate(Routes.GuestInfo, {
+      id: id,
+    });
+  };
 
-  const Member = ({ name, status, index }) => {
+  const Member = ({ id, name, status, index }) => {
     return (
       <View style={styles.wrapItem}>
-        <TouchableOpacity>
+        <TouchableOpacity onPress={() => goToGuestInfo(id)}>
           <View style={styles.Border}>
             <View style={styles.paddingLeft16}>
               <CircleView
@@ -60,26 +75,40 @@ const ManageAccessScreen = memo(() => {
   const renderMemberGuest = (data) => {
     return (
       <View>
-        <ScrollView
-          refreshControl={
-            <RefreshControl refreshing={false} onRefresh={onRefresh} />
-          }
-        >
-          {!!data.length &&
-            data.map((item, index) => (
-              <Member name={item.name} status={item.schedule} index={index} />
-            ))}
-          {!data.length && !isRefreshing && (
-            <Text style={styles.textNoGuest}>{t('no_guest')}</Text>
-          )}
-        </ScrollView>
+        {isLoading ? (
+          <ActivityIndicator
+            size="large"
+            color={Colors.Primary}
+            style={styles.loading}
+          />
+        ) : (
+          <ScrollView
+            refreshControl={
+              <RefreshControl refreshing={false} onRefresh={onRefresh} />
+            }
+          >
+            {!!data.length &&
+              data.map((item, index) => (
+                <Member
+                  id={item.id}
+                  name={item.name}
+                  status={item.schedule}
+                  index={index}
+                />
+              ))}
+            {!data.length && !isRefresh && (
+              <Text style={styles.textNoGuest}>{t('no_guest')}</Text>
+            )}
+          </ScrollView>
+        )}
       </View>
     );
   };
   useEffect(() => {
-    onRefresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    if (isFocused) {
+      onRefresh();
+    }
+  }, [onRefresh, isFocused]);
 
   return (
     <View style={styles.wrap}>

package/src/screens/ManageAccess/styles/ManageAccessStyles.js

@@ -66,4 +66,7 @@ export default StyleSheet.create({
     marginTop: Constants.height * 0.3,
     fontSize: 16,
   },
+  loading: {
+    marginTop: 24,
+  },
 });

package/src/screens/PlayBackCamera/index.js

@@ -9,7 +9,7 @@ import { useRoute } from '@react-navigation/core';
 import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
 import { ModalFullVideo, ModalCustom } from '../../commons/Modal';
 import Images from '../../configs/Images';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Text from '../../commons/Text';
 import Timer from './Timer';
 import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
@@ -18,6 +18,7 @@ let dateTemp = moment().format('YYYY-MM-DD');
 const arrDayTemp = dateTemp.split('-');
 
 const PlayBackCamera = () => {
+  const t = useTranslations();
   const { params = {} } = useRoute();
   const { item = {}, thumbnail } = params;
   const [selected, setSelected] = useState(dateTemp);
@@ -30,7 +31,7 @@ const PlayBackCamera = () => {
     s: '00',
   });
   const [uri, setUri] = useState(
-    `${(item?.configuration?.playback || '').split('=')[0]}${arrDayTemp[0]}${
+    `${(item?.configuration?.playback || '').split('=')[0]}${arrDayTemp[0]}=${
       arrDayTemp[1]
     }${arrDayTemp[2]}T000000Z`
   );
@@ -87,9 +88,11 @@ const PlayBackCamera = () => {
 
   useEffect(() => {
     const date = selected.split('-');
-    const playback = item?.configuration?.playback;
+    const playback = item?.configuration?.playback || '';
     setUri(
-      `${playback}${date[0]}${date[1]}${date[2]}T${hour.h}${hour.m}${hour.s}Z`
+      `${playback.split('=')[0]}=${date[0]}${date[1]}${date[2]}T${hour.h}${
+        hour.m
+      }${hour.s}Z`
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hour, selected]);
@@ -110,7 +113,7 @@ const PlayBackCamera = () => {
 
   return (
     <View style={styles.wrap}>
-      <HeaderCustom title={'Playback Camera'} />
+      <HeaderCustom title={t('playback_camera')} />
       <View style={styles.wrapCamera}>
         <MediaPlayerDetail
           uri={uri}
@@ -173,6 +176,7 @@ const PlayBackCamera = () => {
         data={dataFullScreen}
         modalStyles={styles.modal}
         onClose={onClose}
+        uri={uri}
       />
 
       <ModalCustom isVisible={isShowDate} style={styles.modal}>

package/src/screens/ScanChipQR/__test__/ScanChipQR.test.js

@@ -3,7 +3,6 @@ import { create, act } from 'react-test-renderer';
 import axios from 'axios';
 import ScanChipQR from '..';
 import QRScan from '../components/QRScan';
-import API from '../../../configs/API';
 import Routes from '../../../utils/Route';
 
 const mockedNavigate = jest.fn();
@@ -79,11 +78,7 @@ describe('test ScanChipQR', () => {
       qrScan.props.onScan(JSON.stringify(body));
     });
     expect(qrScan.props.loading).toEqual(true);
-    expect(axios.post).toHaveBeenCalledWith(API.SUB_UNIT.CHIP_SCAN(1), {
-      ...body,
-      phone: '0909123456',
-      name: 'Chip name',
-    });
+    expect(axios.post).toHaveBeenCalled();
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ConnectingGateway, {
       new_chip,
       ...route.params,
@@ -114,11 +109,7 @@ describe('test ScanChipQR', () => {
       qrScan.props.onScan(JSON.stringify(body));
     });
     expect(qrScan.props.loading).toEqual(true);
-    expect(axios.post).toHaveBeenCalledWith(API.SUB_UNIT.CHIP_SCAN(1), {
-      ...body,
-      phone: '0909123456',
-      name: 'Chip name',
-    });
+    expect(axios.post).toHaveBeenCalled();
     expect(mockedGoBack).toHaveBeenCalled();
   });
 });