@eohjsc/react-native-smart-city 0.2.86 → 0.2.89

package/src/screens/HanetCamera/Detail.js

@@ -0,0 +1,252 @@
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  useRef,
+} from 'react';
+import { View, TouchableOpacity, FlatList, Image } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { Icon } from '@ant-design/react-native';
+import moment from 'moment';
+import styles from './styles/detailStyles';
+import { HeaderCustom } from '../../commons/Header';
+import { MenuActionMore } from '../../commons';
+import CheckinHeader from './components/CheckinHeader';
+import Text from '../../commons/Text';
+import Calendar from '../../commons/Calendar';
+import { usePopover, useBoolean, useIsOwnerOfUnit } from '../../hooks/Common';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useHanetCheckinData } from './hooks';
+import { API, Colors } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import {
+  watchHanetCheckinData,
+  unwatchHanetCheckinData,
+} from './utils/Monitor';
+import Routes from '../../utils/Route';
+import { axiosGet } from '../../utils/Apis/axios';
+
+const HanetCameraDetail = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const [hanetCamera, setHanetCamera] = useState();
+  const [showCalendar, setShowCalendar, setHideCalendar] = useBoolean();
+
+  // eslint-disable-next-line no-unused-vars
+  const { unit, station, sensor, title } = route.params;
+  const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
+
+  const fetchDisplayConfig = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SENSOR.DISPLAY(sensor?.id),
+      {},
+      true
+    );
+    if (
+      success &&
+      data.items.length > 0 &&
+      data.items[0].type === 'hanet_camera'
+    ) {
+      setHanetCamera(data.items[0].configuration);
+    }
+  }, [sensor?.id]);
+
+  useEffect(() => {
+    fetchDisplayConfig();
+  }, [fetchDisplayConfig]);
+
+  const {
+    checkinData,
+    countMember,
+    countStranger,
+    refreshing,
+    loadingMore,
+    onRefresh,
+    onLoadMore,
+    date,
+    onChangeDate,
+    onMomentumScrollBegin,
+    onReceiveNewCheckinData,
+  } = useHanetCheckinData(hanetCamera);
+
+  useEffect(() => {
+    if (!hanetCamera) {
+      return;
+    }
+    watchHanetCheckinData(hanetCamera, onReceiveNewCheckinData);
+    return () => unwatchHanetCheckinData(hanetCamera);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hanetCamera]);
+
+  const CheckInItem = useCallback(
+    ({ item }) => {
+      const textMask =
+        item.detected_mask === 'MASK_OFF'
+          ? t('mask_off')
+          : item.detected_mask === 'MASK_ON'
+          ? t('mask_on')
+          : '';
+      const isStranger = item.person_type === 'STRANGER';
+      return (
+        <View style={styles.wrapItem}>
+          <Text type="Body" color={Colors.Gray7} style={styles.timeCheckIn}>
+            {moment(item.created_at).format('HH:mm:ss')}
+          </Text>
+          <View style={styles.verticalLine}>
+            <View
+              style={[
+                styles.centerCircle,
+                { backgroundColor: isStranger ? Colors.Red6 : Colors.Primary },
+              ]}
+            />
+          </View>
+          <View style={styles.wrapItemInfo}>
+            <Text type="Body" color={isStranger ? Colors.Red6 : Colors.Gray9}>
+              {isStranger ? t('stranger') : item.person_name}
+            </Text>
+            <View style={styles.itemDescription}>
+              <Text type="Label" color={Colors.Gray7}>
+                {textMask}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.wrapAvatar}>
+            <Image
+              source={{ uri: item.detected_image_uri }}
+              style={styles.avatar}
+            />
+          </View>
+        </View>
+      );
+    },
+    [t]
+  );
+
+  const onDatePicked = (datePicked) => {
+    onChangeDate(moment(datePicked));
+  };
+
+  const onPickNextDate = () => {
+    if (date.isSame(moment(), 'date')) {
+      return;
+    }
+    onChangeDate(moment(date).add(1, 'days'));
+  };
+
+  const onPickPreviousDate = () => {
+    onChangeDate(moment(date).add(-1, 'days'));
+  };
+
+  const listMenuItem = useMemo(() => {
+    if (isOwner) {
+      return [
+        {
+          text: t('manage_access'),
+          route: Routes.HanetManageAccess,
+          data: {
+            hanetPlace: hanetCamera?.place,
+          },
+        },
+      ];
+    }
+    return [];
+  }, [t, isOwner, hanetCamera?.place]);
+
+  const onItemMenuClicked = useCallback(
+    (item) => {
+      navigate(item.route, item.data);
+    },
+    [navigate]
+  );
+
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+  const refMenuAction = useRef();
+  const handleShowMenuAction = useCallback(() => {
+    showPopoverWithRef(refMenuAction);
+  }, [showPopoverWithRef, refMenuAction]);
+
+  const HeaderRight = useMemo(
+    () => {
+      if (isOwner) {
+        return (
+          <View style={styles.headerRight}>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={handleShowMenuAction}
+              ref={refMenuAction}
+            >
+              <Icon name={'more'} size={27} color={Colors.Black} />
+            </TouchableOpacity>
+          </View>
+        );
+      }
+      return <></>;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isOwner]
+  );
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        title={title}
+        rightComponent={HeaderRight}
+        isShowSeparator
+      />
+      <View style={styles.wrapTop}>
+        <CheckinHeader
+          date={date}
+          onPickPreviousDate={onPickPreviousDate}
+          onPickNextDate={onPickNextDate}
+          setShowCalendar={setShowCalendar}
+        />
+        <View style={[styles.row2, styles.marginTop16]}>
+          <Text type="Body" color={Colors.Gray7} style={styles.marginRight10}>
+            {`${t('member')}: `}
+            <Text color={Colors.Primary} testID={TESTID.TEXT_COUNT_MEMBER}>
+              {countMember !== null ? countMember : '--'}
+            </Text>
+          </Text>
+          <Text type="Body" color={Colors.Gray7}>
+            {`${t('stranger')}: `}
+            <Text color={Colors.Red6} testID={TESTID.TEXT_COUNT_STRANGER}>
+              {countStranger !== null ? countStranger : '--'}
+            </Text>
+          </Text>
+        </View>
+      </View>
+      <FlatList
+        data={checkinData}
+        extraData={checkinData}
+        refreshing={refreshing}
+        isLoadMore={loadingMore}
+        onRefresh={onRefresh}
+        onLoadMore={onLoadMore}
+        onMomentumScrollBegin={onMomentumScrollBegin}
+        renderItem={CheckInItem}
+        contentContainerStyle={styles.contentContainerStyle}
+        scrollIndicatorInsets={{ right: 1 }}
+      />
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        onItemClick={onItemMenuClicked}
+        wrapStyle={styles.menuAction}
+        isTextCenter={false}
+      />
+      <Calendar
+        isVisible={showCalendar}
+        defaultDate={date}
+        maxDate={moment()}
+        onCancel={setHideCalendar}
+        onConfirm={onDatePicked}
+      />
+    </View>
+  );
+};
+
+export default HanetCameraDetail;

package/src/screens/HanetCamera/ManageAccess.js

@@ -0,0 +1,173 @@
+import React, { useCallback, useMemo } from 'react';
+import { View, TouchableOpacity, Image, FlatList } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import ImagePicker from 'react-native-image-crop-picker';
+import { Icon } from '@ant-design/react-native';
+import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import { HeaderCustom } from '../../commons/Header';
+import BottomSheet from '../../commons/BottomSheet';
+import Text from '../../commons/Text';
+import styles from './styles/manageAccessStyles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useHanetPlaceMembers } from './hooks';
+import { useBoolean } from '../../hooks/Common';
+import { Colors } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import Routes from '../../utils/Route';
+import SmartPhoneSvg from '../../../assets/images/Common/SmartPhone.svg';
+
+const HanetManageAccess = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+
+  const { hanetPlace } = route.params;
+  const {
+    data,
+    refreshing,
+    loadingMore,
+    onRefresh,
+    onLoadMore,
+    onMomentumScrollBegin,
+  } = useHanetPlaceMembers(hanetPlace);
+
+  const onPressItem = (item) => () => {
+    navigate(Routes.HanetMemberInfo, {
+      hanetPlace: hanetPlace,
+      hanetMember: item,
+    });
+  };
+
+  const [showAddMemberModal, setShowAddMemberModal, setHideAddMemberModal] =
+    useBoolean();
+
+  const captureFaceID = () => {
+    navigate(Routes.HanetCaptureFaceID, {
+      title: t('add_new_member'),
+      hanetPlace: hanetPlace,
+      hanetMember: {
+        alias_id: null,
+        name: null,
+      },
+      isAddNewMember: true,
+    });
+  };
+
+  const chooseFile = async () => {
+    const options = {
+      mediaType: 'photo',
+      compressImageMaxHeight: 1280,
+      compressImageMaxWidth: 738,
+      compressImageQuality: 0.7,
+      forceJpg: true,
+    };
+    const result = await ImagePicker.openPicker(options);
+    navigate(Routes.HanetMemberInfo, {
+      hanetPlace: hanetPlace,
+      hanetMember: {
+        alias_id: null,
+        name: null,
+        avatar_uri: result.path,
+      },
+      isAddNewMember: true,
+    });
+  };
+
+  const addMemberOptions = [
+    {
+      icon: <IconFill name="camera" color={Colors.Gray9} size={27} />,
+      text: t('capture_image'),
+      onChoose: () => {
+        setHideAddMemberModal();
+        captureFaceID();
+      },
+    },
+    {
+      icon: <SmartPhoneSvg />,
+      text: t('pick_available_image_from_your_phone'),
+      onChoose: () => {
+        setHideAddMemberModal();
+        chooseFile();
+      },
+    },
+  ];
+
+  const MemberItem = useCallback(
+    ({ item }) => {
+      return (
+        <TouchableOpacity
+          onPress={onPressItem(item)}
+          style={styles.wrapItem}
+          testID={TESTID.ROW_HANET_MANAGE_ACCESS}
+        >
+          <Image source={{ uri: item.avatar_uri }} style={styles.itemAvatar} />
+          <Text type="H4" color={Colors.Gray9} style={styles.itemName}>
+            {' '}
+            {item.name}
+          </Text>
+          <IconOutline name="right" size={20} color={Colors.Gray6} />
+        </TouchableOpacity>
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [navigate]
+  );
+
+  const HeaderRight = useMemo(
+    () => (
+      <View style={styles.headerRight}>
+        <TouchableOpacity
+          onPress={setShowAddMemberModal}
+          testID={TESTID.HANET_MANAGE_ACCESS_ADD_BUTTON}
+        >
+          <Icon name={'plus'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        title={t('manage_access')}
+        rightComponent={HeaderRight}
+        isShowSeparator
+      />
+      <FlatList
+        data={data}
+        extraData={data}
+        refreshing={refreshing}
+        isLoadMore={loadingMore}
+        onRefresh={onRefresh}
+        onLoadMore={onLoadMore}
+        onMomentumScrollBegin={onMomentumScrollBegin}
+        renderItem={MemberItem}
+        contentContainerStyle={styles.contentContainerStyle}
+        scrollIndicatorInsets={{ right: 1 }}
+      />
+      <BottomSheet
+        isVisible={showAddMemberModal}
+        onBackdropPress={setHideAddMemberModal}
+        title={t('add_member')}
+        style={styles.addMemberModal}
+      >
+        {addMemberOptions.map((option, i) => (
+          <TouchableOpacity
+            key={i}
+            onPress={option.onChoose}
+            style={styles.row}
+            testID={`${TESTID.HANET_ADD_MEMBER_OPTION}_${i}`}
+          >
+            {option.icon}
+            <Text type="H4" color={Colors.Gray9} style={styles.textOption}>
+              {option.text}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </BottomSheet>
+    </View>
+  );
+};
+
+export default HanetManageAccess;

package/src/screens/HanetCamera/MemberInfo.js

@@ -0,0 +1,208 @@
+import React, { useEffect, useState } from 'react';
+import { View, TouchableOpacity, Image, Platform } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { IconFill } from '@ant-design/icons-react-native';
+import { HeaderCustom } from '../../commons/Header';
+import { AlertAction, FullLoading } from '../../commons';
+import BottomButtonView from '../../commons/BottomButtonView';
+import TextInput from '../../commons/Form/TextInput';
+import Text from '../../commons/Text';
+import { useStateAlertAction } from './hooks';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
+import styles from './styles/memberInfoStyles';
+import { Colors, API } from '../../configs';
+import { axiosDelete, axiosPatch, axiosPost } from '../../utils/Apis/axios';
+import Routes from '../../utils/Route';
+
+const HanetMemberInfo = ({ route }) => {
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
+  const { hanetPlace, hanetMember, isAddNewMember } = route.params;
+  const [memberAvatar, setMemberAvatar] = useState(hanetMember.avatar_uri);
+  const [memberName, setMemberName] = useState(hanetMember.name);
+  const [inputName, setInputName] = useState(hanetMember.name);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setMemberAvatar(hanetMember.avatar_uri);
+    setMemberName(hanetMember.name);
+  }, [hanetMember]);
+
+  const { stateAlertAction, hideAlertAction, showRename, showDelete } =
+    useStateAlertAction();
+
+  const onShowRename = () => {
+    setInputName(memberName);
+    showRename(isAddNewMember);
+  };
+
+  const onShowDelete = () => {
+    showDelete();
+  };
+
+  const setFaceID = () => {
+    navigate(Routes.HanetCaptureFaceID, {
+      title: t('set_photo_id'),
+      hanetPlace,
+      hanetMember: {
+        ...hanetMember,
+        avatar_uri: memberAvatar,
+        name: memberName,
+      },
+      memberAvatar,
+      setMemberAvatar,
+      isAddNewMember,
+    });
+  };
+
+  const finishRegister = async () => {
+    setLoading(true);
+    const formData = new FormData();
+    const name = memberAvatar.split('/').pop();
+    const ext = memberAvatar.split('.').pop();
+    formData.append('face_id', {
+      name: name,
+      type: `image/${ext}`,
+      uri: memberAvatar,
+    });
+    formData.append('name', memberName);
+    const { success, data } = await axiosPost(
+      API.CAMERA.HANET.REGISTER(hanetPlace.place_id),
+      formData,
+      {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      }
+    );
+    if (success) {
+      navigate(Routes.HanetManageAccess, {
+        hanetPlace: hanetPlace,
+      });
+    } else {
+      setError(data.detail);
+    }
+    setLoading(false);
+  };
+
+  const renameMember = async () => {
+    hideAlertAction();
+    if (isAddNewMember) {
+      setMemberName(inputName);
+      return;
+    }
+
+    setLoading(true);
+    const { success } = await axiosPatch(
+      API.CAMERA.HANET.RENAME_MEMBER(hanetPlace.place_id, hanetMember.alias_id),
+      {
+        name: inputName,
+      }
+    );
+    success && setMemberName(inputName);
+    setLoading(false);
+  };
+
+  const removeMember = async () => {
+    hideAlertAction();
+    setLoading(true);
+    const { success } = await axiosDelete(
+      API.CAMERA.HANET.REMOVE_MEMBER(hanetPlace.place_id, hanetMember.alias_id)
+    );
+    success && goBack();
+    setLoading(false);
+  };
+
+  const handleRenameOrDelete = () => {
+    if (stateAlertAction.isDelete) {
+      removeMember();
+    } else {
+      renameMember();
+    }
+  };
+
+  const [transY] = useKeyboardAnimated(-16);
+  const animatedStyle = Platform.select({
+    ios: {
+      marginBottom: transY,
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={t('member_info')} isShowSeparator />
+      <View style={styles.wrapAvatar}>
+        <Image source={{ uri: memberAvatar }} style={styles.avatar} />
+      </View>
+      <TouchableOpacity
+        onPress={setFaceID}
+        style={[styles.row, !!error && { borderBottomColor: Colors.Red6 }]}
+      >
+        <IconFill name="camera" size={27} color={Colors.Primary} />
+        <Text
+          type="Body"
+          bold
+          color={Colors.Primary}
+          style={styles.textSetPhoto}
+        >
+          {t('set_photo_id')}
+        </Text>
+        <Image source={{ uri: memberAvatar }} style={styles.photoID} />
+      </TouchableOpacity>
+      {!!error && (
+        <Text type="Label" style={styles.textError} color={Colors.Red6}>
+          {error}
+        </Text>
+      )}
+      <TouchableOpacity
+        onPress={onShowRename}
+        style={[styles.row, styles.spaceBetween]}
+      >
+        <Text type="H4" bold color={Colors.Gray9}>
+          {t('text_name')}
+        </Text>
+        <Text type="Body" color={Colors.Gray8}>
+          {memberName}
+        </Text>
+      </TouchableOpacity>
+      {!isAddNewMember && (
+        <TouchableOpacity onPress={onShowDelete} style={styles.buttonRemove}>
+          <Text type="H4" color={Colors.Red6} underline bold>
+            {t('remove_member')}
+          </Text>
+        </TouchableOpacity>
+      )}
+      {isAddNewMember && (
+        <BottomButtonView
+          mainTitle={t('finish')}
+          onPressMain={finishRegister}
+          style={styles.bottomButton}
+        />
+      )}
+      {loading && <FullLoading />}
+      <AlertAction
+        visible={stateAlertAction.visible}
+        hideModal={hideAlertAction}
+        title={stateAlertAction.title}
+        message={stateAlertAction.message}
+        leftButtonTitle={stateAlertAction.leftButton}
+        leftButtonClick={hideAlertAction}
+        rightButtonTitle={stateAlertAction.rightButton}
+        rightButtonClick={handleRenameOrDelete}
+        rightButtonStyle={{ color: stateAlertAction.rightColor }}
+        animatedStyle={animatedStyle}
+      >
+        {!stateAlertAction.isDelete && (
+          <TextInput
+            onChange={(text) => setInputName(text)}
+            defaultValue={inputName}
+            textInputStyle={styles.textInput}
+            maxLength={64}
+          />
+        )}
+      </AlertAction>
+    </View>
+  );
+};
+
+export default HanetMemberInfo;