I am working on a react app which has react-idle timer is used, I have a model window popup asking user whether he want to stay or leave.
I have used idle timer inside modal , it will popup after some time if user is inactive.
I want to redirect to a new page if he doesn't active for 60 seconds after popup
below is my code
import React, { useState, useEffect } from "react";
import { useIdleTimer } from "react-idle-timer";
import { useTimer } from 'react-timer-hook';
import Modal from 'react-modal';
import NotFound from 'components/NotFound';
import { useNavigate } from 'react-router-dom';
function MyTimer({ expiryTimestamp }) {
const {
seconds,
minutes,
hours,
days,
isRunning,
start,
pause,
resume,
restart,
} = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });
return (
<span >
{seconds}
</span>
);
}
function Application(props) {
let {
progress,
setProgress,
propertyInfo,
bindSubmitForm,
dispatchOpenModal,
mainProfilingAnswer,
} = props;
// Set timeout values
const timeout = 1000 * 6 * 1;
const promptTimeout = 1000 * 600000;
// Modal open state
const [open, setOpen] = useState(false);
// Time before idle
const [remaining, setRemaining] = useState(0);
const onPrompt = () => {
// onPrompt will be called after the timeout value is reached
// In this case 30 minutes. Here you can open your prompt.
// All events are disabled while the prompt is active.
// If the user wishes to stay active, call the `reset()` method.
// You can get the remaining prompt time with the `getRemainingTime()` method,
setOpen(true);
setRemaining(promptTimeout);
};
const onIdle = () => {
// onIdle will be called after the promptTimeout is reached.
// In this case 30 seconds. Here you can close your prompt and
// perform what ever idle action you want such as log out your user.
// Events will be rebound as long as `stopOnMount` is not set.
setOpen(true);
navigate('/notfound');
setRemaining(10);
};
const onActive = () => {
// onActive will only be called if `reset()` is called while `isPrompted()`
// is true. Here you will also want to close your modal and perform
// any active actions.
setOpen(false);
setRemaining(0);
};
const { getRemainingTime, isPrompted, activate } = useIdleTimer({
timeout,
promptTimeout,
onPrompt,
onIdle,
onActive,
});
const handleStillHere = () => {
setOpen(false);
activate();
};
useEffect(() => {
const interval = setInterval(() => {
if (isPrompted()) {
setRemaining(Math.ceil(getRemainingTime() / 1000));
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [getRemainingTime, isPrompted]);
function afterOpenModal() {
// references are now sync'd and can be accessed.
// subtitle.style.color = '#f00';
}
const navigate = useNavigate();
function closeModal() {
navigate('/notfound')
setOpen(false);
}
const time = new Date();
time.setSeconds(time.getSeconds() + 600);
return (
<>
<div className="mt-5 md:mt-0 md:col-span-2">
<Modal
isOpen={open}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<div class="Path"><img src={Iconn} /></div>
<h2 className="Are-you-there">Are you there </h2>
<p>Due to inactive, you will be redirected <MyTimer expiryTimestamp={time} /> seconds.
Click “Yes” to stay, click “No” to leave.</p>
<div className="btnwrap">
<button className="button" onClick={closeModal}>
No
</button>
<button className="button" onClick={handleStillHere}><span className="Yes">Yes</span></button>
</div>
</Modal>
<div className="">
some thing goes here
</div>
</div>
</>
);
}