Calculate Actual time spent on an app using React

I have to create a functionality where I need to capture the total time spent on a module in the application. Now we have 5 modules and each module has different pages and flows.

Say, we have a module to capture customer information. So the total time spent on this module would be the sum of time spent on each page (basic information, address details, education background, etc) in this flow.

We also need to calculate the time for sub-modules. For example, address details have a current and permanent address. In that case, we need to know the time spent on each of these pages and the total time should be assigned to the time spent in address details

Users can also close the page midway or go back to the previous page, and in that case, the time for that particular page should be started or resumed.

Would like to know how can I go about this and how the backend APIs should be designed for this as I am not able to wrap my head around this.

Many thanks in advance

You could use a combination of React state and built-in Date object.

For each page in a module or sub-module, create a state variable to store the time spent on that page

const [timeSpentOnPage, setTimeSpentOnPage] = useState(0); // in milliseconds

useEffect hook to start a timer for each page as soon as it is rendered

useEffect(() => {
  const intervalId = setInterval(() => {
    setTimeSpentOnPage(prevTime => prevTime + 1000); // increment by 1 second
  }, 1000); // every 1 second
  return () => clearInterval(intervalId); // cleanup
}, []); // run only once on mount

To handle cases where the user navigates away from the page and comes back later, you could store the timestamp when the user leaves the page in local storage

useEffect(() => {
  const handleUnload = () => {
    localStorage.setItem('pageLeaveTime', new Date().getTime());
  };
  window.addEventListener('beforeunload', handleUnload);
  return () => window.removeEventListener('beforeunload', handleUnload); // cleanup
}, []);

When the user returns to the page, you could retrieve the previous leave time from local storage and resume the timer from that point

useEffect(() => {
  const pageLeaveTime = localStorage.getItem('pageLeaveTime');
  if (pageLeaveTime) {
    const timeSpentSoFar = new Date().getTime() - Number(pageLeaveTime);
    setTimeSpentOnPage(timeSpentSoFar);
  }
}, []);

To calculate the total time spent on a module or sub-module, you could use another state variable to store the cumulative time spent across all its pages

const [totalTimeSpent, setTotalTimeSpent] = useState(0); // in milliseconds

Whenever the user completes a page and moves on to the next one or closes the module, you could add the time spent on that page to the cumulative time for the module

const handlePageCompletion = () => {
  setTotalTimeSpent(prevTime => prevTime + timeSpentOnPage);
  localStorage.removeItem('pageLeaveTime');
  setTimeSpentOnPage(0);
};

const handleModuleClose = () => {
  setTotalModuleTime(prevTime => prevTime + totalTimeSpent);
  setTotalTimeSpent(0);
};