@eohjsc/react-native-smart-city 0.2.19 → 0.2.23

package/src/screens/EditActionsList/index.js

@@ -0,0 +1,122 @@
+import React, { useState, useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import DraggableFlatList from 'react-native-draggable-flatlist';
+import { useRoute } from '@react-navigation/core';
+
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import Text from '../../commons/Text';
+import styles from './Styles/indexStyles';
+import { Colors } from '../../configs';
+import FImage from '../../commons/FImage';
+import Rearrange from '../../../assets/images/Rearrange.svg';
+import Close from '../../../assets/images/Close.svg';
+
+const EditActionsList = () => {
+  const t = useTranslations();
+  const { params = {} } = useRoute();
+  const { data = [] } = params;
+  const [actionsList, setActionList] = useState(
+    [...data].map((item) => {
+      return {
+        ...item,
+        key: `item-${item?.id}`,
+      };
+    })
+  );
+
+  const onPressCancel = useCallback(() => {
+    setActionList(
+      [...data].map((item) => {
+        return {
+          ...item,
+          key: `item-${item?.id}`,
+        };
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onPressSave = useCallback(() => {
+    // eslint-disable-next-line no-alert
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onPressRemove = useCallback(() => {
+    // eslint-disable-next-line no-alert
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const renderItem = useCallback(({ item, index, drag }) => {
+    return (
+      <TouchableOpacity style={styles.wrapItem} onLongPress={drag}>
+        <View style={styles.leftItem}>
+          <Text color={Colors.Gray9} type="H4" semibold>
+            {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+          </Text>
+          <Rearrange />
+        </View>
+        <View style={styles.rightItem}>
+          <FImage
+            source={{ uri: item?.sensor_icon_kit }}
+            style={styles.iconItem}
+          />
+          <View style={styles.contentItem}>
+            <Text numberOfLines={1} type="Label" color={Colors.Gray7}>
+              {item?.station_name}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+              {item?.sensor_name}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+              {item?.action_name}
+            </Text>
+          </View>
+          <TouchableOpacity onPress={onPressRemove} style={styles.closeButton}>
+            <Close />
+          </TouchableOpacity>
+        </View>
+      </TouchableOpacity>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('edit_actions_list')}
+        headerAniStyle={styles.headerAniStyle}
+      >
+        <View style={styles.wrapContent}>
+          <Text type="Body" color={Colors.Gray8}>
+            {t('des_edit_actions_list')}
+          </Text>
+          <DraggableFlatList
+            data={actionsList}
+            renderItem={renderItem}
+            keyExtractor={(item) => `draggable-item-${item.key}`}
+            onDragEnd={({ data }) => setActionList(data)}
+            extraData={actionsList}
+            containerStyle={styles.containerStyle}
+          />
+        </View>
+      </WrapHeaderScrollable>
+      <View style={styles.wrapBottom}>
+        <TouchableOpacity onPress={onPressCancel}>
+          <Text type="H4" hilight semibold>
+            {t('cancel')}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={onPressSave}>
+          <Text type="H4" hilight semibold>
+            {t('save')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default EditActionsList;

package/src/screens/EmergencyContacts/EmergencyContactsAddNew.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { SafeAreaView, StyleSheet, TextInput } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { API, Colors } from '../../configs';
@@ -11,6 +11,7 @@ import { axiosPost } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
 
 export const EmergencyContactsAddNew = ({ route }) => {
+  const t = useTranslations();
   const { group } = route.params;
   const { goBack } = useNavigation();
   const { keyboardBottomPadding } = useKeyboardShow();
@@ -42,7 +43,7 @@ export const EmergencyContactsAddNew = ({ route }) => {
     } else {
       ToastBottomHelper.error(t('create_contact_failed'));
     }
-  }, [goBack, group.id, textName, textPhone]);
+  }, [goBack, group.id, t, textName, textPhone]);
 
   return (
     <SafeAreaView

package/src/screens/EmergencyContacts/EmergencyContactsList.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { AlertAction, MenuActionList, Section } from '../../commons';
 import { RowUser } from '../../commons/RowUser';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
@@ -17,6 +17,7 @@ import { ToastBottomHelper } from '../../utils/Utils';
 const MAX_EMERGENCY_CONTACTS = 5;
 
 export const EmergencyContactsList = ({ route }) => {
+  const t = useTranslations();
   const { unitId, group } = route.params;
   const { navigate } = useNavigation();
   const isFocused = useIsFocused();
@@ -48,7 +49,13 @@ export const EmergencyContactsList = ({ route }) => {
       ToastBottomHelper.error(message);
     }
     hideAlertRemoveContact();
-  }, [stateAlertRemoveContact, getListContacts, group, hideAlertRemoveContact]);
+  }, [
+    stateAlertRemoveContact.member.id,
+    hideAlertRemoveContact,
+    t,
+    getListContacts,
+    group.id,
+  ]);
 
   const onAddNew = useCallback(() => {
     setShowAddnewModal();

package/src/screens/EmergencyContacts/EmergencyContactsSelectContacts.js

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { SafeAreaView, StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
 import { RowUser } from '../../commons/RowUser';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
@@ -29,6 +29,7 @@ const dataContact = [
 ];
 
 export const EmergencyContactsSelectContacts = ({ route }) => {
+  const t = useTranslations();
   const { goBack } = useNavigation();
   // const { unitId } = route.params;
 

package/src/screens/EmergencyContacts/__test__/EmergencyContactAddNew.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { TextInput } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { EmergencyContactsAddNew } from '../EmergencyContactsAddNew';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import axios from 'axios';
 import Toast from 'react-native-toast-message';
 import { ViewButtonBottom } from '../../../commons';
@@ -24,6 +24,7 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('test EmergencyContactAddNew', () => {
+  const t = useTranslations();
   let route;
   beforeEach(() => {
     route = {

package/src/screens/EmergencyContacts/__test__/EmergencyContactList.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Routes from '../../../utils/Route';
 import { AlertAction } from '../../../commons';
 import { EmergencyContactsList } from '../EmergencyContactsList';
@@ -20,6 +20,7 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('test EmergencyContactList', () => {
+  const t = useTranslations();
   let route;
 
   beforeEach(() => {

package/src/screens/EmergencyContacts/hook.js

@@ -1,9 +1,10 @@
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useCallback, useState } from 'react';
 import { API } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
 
 export const useAlertRemoveEmergencyContact = () => {
+  const t = useTranslations();
   const [stateAlertRemoveContact, setStateAlertRemoveContact] = useState({
     visible: false,
     title: '',
@@ -25,7 +26,7 @@ export const useAlertRemoveEmergencyContact = () => {
         };
       });
     },
-    []
+    [t]
   );
 
   const hideAlertRemoveContact = useCallback(() => {

package/src/screens/Explore/index.js

@@ -7,7 +7,7 @@ import {
   FlatList,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
@@ -25,6 +25,7 @@ navigator.geolocation = require('@react-native-community/geolocation');
 let page = 1;
 
 const Explore = ({ navigation }) => {
+  const t = useTranslations();
   useBlockBackAndroid();
   const [transY] = useKeyboard(80);
 
@@ -104,7 +105,7 @@ const Explore = ({ navigation }) => {
         </View>
       </>
     );
-  }, [unitsNearMe, coords, navigation]);
+  }, [t, unitsNearMe, navigation, coords]);
 
   const itemCity = useCallback(({ item }) => {
     return <CityItem item={item} />;

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

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { RadioCircle } from '../../../commons';
+import Text from '../../../commons/Text';
+import styles from '../styles/AccessScheduleItemStyles';
+
+const AccessScheduleItem = ({ item, isSelected, onSelect }) => {
+  const DetailComponent = item.detail;
+  const handleOnSelect = useCallback(() => {
+    onSelect(item.value);
+  }, [item.value, onSelect]);
+
+  return (
+    <View style={styles.rowWrap}>
+      <View style={styles.rowContent}>
+        <TouchableOpacity style={styles.row} onPress={handleOnSelect}>
+          <RadioCircle active={isSelected} />
+          <Text style={styles.textAccessSchedule}>{item.text}</Text>
+        </TouchableOpacity>
+        {isSelected && <DetailComponent />}
+      </View>
+      <View style={styles.separator} />
+    </View>
+  );
+};
+
+export default AccessScheduleItem;

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

@@ -0,0 +1,193 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import moment from 'moment';
+
+import BottomSheet from '../../../commons/BottomSheet';
+import ViewButtonBottom from '../../../commons/ViewButtonBottom';
+import AccessScheduleItem from './AccessScheduleItem';
+import RecurringDetail from './RecurringDetail';
+import TemporaryDetail from './TemporaryDetail';
+import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+
+import { ACCESS_SCHEDULE } from '../constant';
+
+const AccessScheduleSheet = ({
+  isVisible,
+  onShow,
+  onHide,
+  data,
+  onSetData,
+}) => {
+  const t = useTranslations();
+  const [dateTimePickerState, setDateTimePickerState] = useState({
+    isVisible: false,
+    mode: 'time',
+    defaultValue: moment().valueOf(),
+    setter: null,
+  });
+  const [accessSchedule, setAccessSchedule] = useState(data.access_schedule);
+  const [recurringTimeStart, setRecurringTimeStart] = useState(
+    data.recurring_time_start
+  );
+  const [recurringTimeEnd, setRecurringTimeEnd] = useState(
+    data.recurring_time_end
+  );
+  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState(
+    data.recurring_time_repeat
+  );
+  const [temporaryTimeStart, setTemporaryTimeStart] = useState(
+    data.temporary_time_start
+  );
+  const [temporaryTimeEnd, setTemporaryTimeEnd] = useState(
+    data.temporary_time_end
+  );
+
+  const onShowSetDateTime = useCallback(
+    (currentValue, setter, mode) => {
+      onHide();
+      setDateTimePickerState((prevState) => ({
+        ...prevState,
+        isVisible: true,
+        mode: mode,
+        defaultValue: currentValue,
+        setter: setter,
+      }));
+    },
+    [setDateTimePickerState, onHide]
+  );
+
+  const onHideSetDateTime = useCallback(() => {
+    onShow();
+    setDateTimePickerState((prevState) => ({
+      ...prevState,
+      isVisible: false,
+    }));
+  }, [setDateTimePickerState, onShow]);
+
+  const onDateTimePicked = useCallback(
+    (timeData) => {
+      const setter = dateTimePickerState.setter;
+      setter && setter(moment(timeData));
+    },
+    [dateTimePickerState]
+  );
+
+  const listAccessSchedule = useMemo(
+    () => [
+      {
+        text: t(`${ACCESS_SCHEDULE.ALWAYS}`),
+        value: ACCESS_SCHEDULE.ALWAYS,
+        detail: () => <></>,
+      },
+      {
+        text: t(`${ACCESS_SCHEDULE.RECURRING}`),
+        value: ACCESS_SCHEDULE.RECURRING,
+        detail: () => (
+          <RecurringDetail
+            onShowSetDateTime={onShowSetDateTime}
+            recurringTimeStart={recurringTimeStart}
+            recurringTimeEnd={recurringTimeEnd}
+            recurringTimeRepeat={recurringTimeRepeat}
+            setRecurringTimeStart={setRecurringTimeStart}
+            setRecurringTimeEnd={setRecurringTimeEnd}
+            setRecurringTimeRepeat={setRecurringTimeRepeat}
+          />
+        ),
+      },
+      {
+        text: t(`${ACCESS_SCHEDULE.TEMPORARY}`),
+        value: ACCESS_SCHEDULE.TEMPORARY,
+        detail: () => (
+          <TemporaryDetail
+            onShowSetDateTime={onShowSetDateTime}
+            temporaryTimeStart={temporaryTimeStart}
+            temporaryTimeEnd={temporaryTimeEnd}
+            setTemporaryTimeStart={setTemporaryTimeStart}
+            setTemporaryTimeEnd={setTemporaryTimeEnd}
+          />
+        ),
+      },
+    ],
+    [
+      t,
+      onShowSetDateTime,
+      recurringTimeStart,
+      recurringTimeEnd,
+      recurringTimeRepeat,
+      temporaryTimeStart,
+      temporaryTimeEnd,
+    ]
+  );
+
+  const resetData = useCallback(() => {
+    setAccessSchedule(data.access_schedule);
+    setRecurringTimeStart(data.recurring_time_start);
+    setRecurringTimeEnd(data.recurring_time_end);
+    setRecurringTimeRepeat(data.recurring_time_repeat);
+    setTemporaryTimeStart(data.temporary_time_start);
+    setTemporaryTimeEnd(data.temporary_time_end);
+  }, [data]);
+
+  const onCancel = useCallback(() => {
+    onHide();
+    resetData();
+  }, [onHide, resetData]);
+
+  const onDone = useCallback(() => {
+    onSetData({
+      access_schedule: accessSchedule,
+      recurring_time_start: recurringTimeStart,
+      recurring_time_end: recurringTimeEnd,
+      recurring_time_repeat: recurringTimeRepeat,
+      temporary_time_start: temporaryTimeStart,
+      temporary_time_end: temporaryTimeEnd,
+    });
+    onHide();
+  }, [
+    accessSchedule,
+    recurringTimeStart,
+    recurringTimeEnd,
+    recurringTimeRepeat,
+    temporaryTimeStart,
+    temporaryTimeEnd,
+    onHide,
+    onSetData,
+  ]);
+
+  return (
+    <>
+      <BottomSheet
+        isVisible={isVisible}
+        onHide={onCancel}
+        title={t('access_schedule')}
+      >
+        <View>
+          {listAccessSchedule.map((item, index) => (
+            <AccessScheduleItem
+              key={index}
+              item={item}
+              isSelected={item.value === accessSchedule}
+              onSelect={setAccessSchedule}
+            />
+          ))}
+        </View>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={onCancel}
+          rightTitle={t('done')}
+          onRightClick={onDone}
+        />
+      </BottomSheet>
+      <WheelDateTimePicker
+        mode={dateTimePickerState.mode}
+        isVisible={dateTimePickerState.isVisible}
+        defaultValue={dateTimePickerState.defaultValue}
+        onPicked={onDateTimePicked}
+        onHide={onHideSetDateTime}
+      />
+    </>
+  );
+};
+
+export default AccessScheduleSheet;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Text from '../../../commons/Text';
+import { Images, Colors } from '../../../configs';
+import styles from '../styles/HeaderGuestInfoStyles';
+
+const HeaderGuestInfo = ({ onSave }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  return (
+    <View style={styles.wrap}>
+      <TouchableOpacity style={styles.button} onPress={goBack}>
+        <Image source={Images.arrowBack} style={styles.icon} />
+      </TouchableOpacity>
+      <View style={styles.wrapTitle}>
+        <Text type="H4" bold>
+          {t('guest_info')}
+        </Text>
+      </View>
+      <TouchableOpacity style={styles.button} onPress={onSave}>
+        <Text type="H4" color={Colors.Primary}>
+          {t('save')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default HeaderGuestInfo;

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

@@ -0,0 +1,99 @@
+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 { REPEAT_ITEMS } from '../constant';
+import styles from '../styles/AccessScheduleDetailStyles';
+
+const RecurringDetail = ({
+  onShowSetDateTime,
+  recurringTimeStart,
+  recurringTimeEnd,
+  recurringTimeRepeat,
+  setRecurringTimeStart,
+  setRecurringTimeEnd,
+  setRecurringTimeRepeat,
+}) => {
+  const t = useTranslations();
+  const onSetTimeStart = useCallback(() => {
+    onShowSetDateTime(recurringTimeStart, setRecurringTimeStart, 'time');
+  }, [onShowSetDateTime, recurringTimeStart, setRecurringTimeStart]);
+
+  const onSetTimeEnd = useCallback(() => {
+    onShowSetDateTime(recurringTimeEnd, setRecurringTimeEnd, 'time');
+  }, [onShowSetDateTime, recurringTimeEnd, setRecurringTimeEnd]);
+
+  const onSetRepeat = useCallback(
+    (item) => {
+      const index = recurringTimeRepeat.indexOf(item.value);
+      if (index !== -1) {
+        setRecurringTimeRepeat([
+          ...recurringTimeRepeat.slice(0, index),
+          ...recurringTimeRepeat.slice(index + 1),
+        ]);
+      } else {
+        setRecurringTimeRepeat([...recurringTimeRepeat, item.value]);
+      }
+    },
+    [recurringTimeRepeat, setRecurringTimeRepeat]
+  );
+
+  const renderRepeatItem = useCallback(
+    (item, index, isSelected) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          style={[styles.repeatItem, isSelected && styles.repeatItemSelected]}
+          onPress={() => onSetRepeat(item)}
+        >
+          <Text
+            type="Body"
+            lineHeight={16}
+            color={isSelected ? Colors.Orange : item.color}
+            style={styles.repeatText}
+          >
+            {item.text}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [onSetRepeat]
+  );
+
+  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}>
+          {recurringTimeStart.format('HH:mm')}
+        </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}>
+          {recurringTimeEnd.format('HH:mm')}
+        </Text>
+      </TouchableOpacity>
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('repeat')}
+      </Text>
+      <View style={styles.repeatWrap}>
+        {REPEAT_ITEMS.map((item, index) =>
+          renderRepeatItem(
+            item,
+            index,
+            recurringTimeRepeat.includes(item.value)
+          )
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default RecurringDetail;

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;