add renew tokens feature and fix duplicate lines in tables

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonor",
-  "version": "0.5.34",
+  "version": "0.5.35",
   "private": true,
   "dependencies": {
     "@tanstack/react-query": "4.0.5",

src/Authentication/useAuth.js

@@ -36,7 +36,7 @@ export function initializeOidc (config) {
  * Retrieve authentication status based of Oidc
  */
 export function useIsAuthenticated() {
-  const { login, isUserLoggedIn, oidcTokens } = useOidc({ assertUserLoggedIn: false });
+  const { login, isUserLoggedIn, oidcTokens, renewTokens} = useOidc({ assertUserLoggedIn: false });
 
   useEffect(() => {
     if (!login) {
@@ -47,5 +47,5 @@ export function useIsAuthenticated() {
     });
   }, [login]);
 
-  return { isAuthenticated: isUserLoggedIn, tokens: oidcTokens };
+  return { isAuthenticated: isUserLoggedIn, tokens: oidcTokens, renewTokens  };
 }

src/components/App/App.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useIsAuthenticated } from "../../Authentication/useAuth";
 import D from "../../i18n";
 import View from "../View/View";
@@ -9,8 +9,41 @@ export const App = () => {
   const [authenticated, setAuthenticated] = useState(false);
   const [contactFailed, setContactFailed] = useState(false);
   const [data, setData] = useState(null);
+  const timeoutIdRef = useRef(null);
 
-  const { tokens } = useIsAuthenticated();
+  const { tokens, renewTokens } = useIsAuthenticated();
+
+  useEffect(() => {
+    const resetInactivityTimeout = () => {
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+      }
+      timeoutIdRef.current = setTimeout(renewTokens, 5 * 60 * 1000);
+    };
+
+    const events = [
+      "mousemove",
+      "mousedown",
+      "keypress",
+      "touchstart",
+      "click",
+    ];
+
+    events.forEach((event) => {
+      window.addEventListener(event, resetInactivityTimeout);
+    });
+
+    resetInactivityTimeout();
+
+    return () => {
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+      }
+      events.forEach((event) => {
+        window.removeEventListener(event, resetInactivityTimeout);
+      });
+    };
+  }, [renewTokens]);
 
   useEffect(() => {
     if (window.localStorage.getItem("AUTHENTICATION_MODE") === ANONYMOUS) {

src/components/CollectionTable/CollectionTableDisplay.jsx

@@ -272,10 +272,8 @@ function CollectionTableDisplay({
             (pagination.page - 1) * pagination.size,
             Math.min(pagination.page * pagination.size, displayedLines.length),
           )
-          .map((line) => (
-            <CollectionTableDisplayLine
-              key={line.id || line.interviewerId || line.survey || line.site}
-              data={line}
+          .map((line, index) => (
+            <CollectionTableDisplayLine key={index} data={line}
             />
           ))}
       </tbody>

src/components/MonitoringTable/FollowUpTable.jsx

@@ -186,8 +186,8 @@ function FollowUpTable({
             (pagination.page - 1) * pagination.size,
             Math.min(pagination.page * pagination.size, displayedLines.length),
           )
-          .map((line) => (
-            <FollowUpTableLine key={line.interviewerId || line.survey || line.site} data={line} />
+          .map((line, index) => (
+            <FollowUpTableLine key={index} data={line} />
           ))}
       </tbody>
       {tableFooter}