verdnatura-chat/app/containers/Passcode/Base/Locked.tsx

74 lines
1.8 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import { Grid } from 'react-native-easy-grid';
import { themes } from '../../../constants/colors';
import { resetAttempts } from '../../../utils/localAuthentication';
import { TYPE } from '../constants';
import { getDiff, getLockedUntil } from '../utils';
import I18n from '../../../i18n';
import { useTheme } from '../../../theme';
import styles from './styles';
import Title from './Title';
import Subtitle from './Subtitle';
import LockIcon from './LockIcon';
interface IPasscodeTimer {
time: Date | null;
setStatus: Function;
}
interface IPasscodeLocked {
setStatus: Function;
}
const Timer = React.memo(({ time, setStatus }: IPasscodeTimer) => {
const calcTimeLeft = () => {
const diff = getDiff(time || 0);
if (diff > 0) {
return Math.floor((diff / 1000) % 60);
}
};
const [timeLeft, setTimeLeft] = useState(calcTimeLeft());
useEffect(() => {
setTimeout(() => {
setTimeLeft(calcTimeLeft());
if (timeLeft && timeLeft <= 1) {
resetAttempts();
setStatus(TYPE.ENTER);
}
}, 1000);
});
if (!timeLeft) {
return null;
}
return <Subtitle text={I18n.t('Passcode_app_locked_subtitle', { timeLeft })} />;
});
const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
const [lockedUntil, setLockedUntil] = useState<Date | null>(null);
const { theme } = useTheme();
const readItemFromStorage = async () => {
const l = await getLockedUntil();
setLockedUntil(l);
};
useEffect(() => {
readItemFromStorage();
}, []);
return (
<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
<LockIcon />
<Title text={I18n.t('Passcode_app_locked_title')} />
<Timer time={lockedUntil} setStatus={setStatus} />
</Grid>
);
});
export default Locked;