React idle timer redirect to another page if doesnt click anything for 60 seconds

Viewed 129

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>
    </>
  );
}
0 Answers
Related