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,12 +272,10 @@ 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) =>  (
+              <CollectionTableDisplayLine key={line.id || line.interviewerId || line.site || line.campaignId} data={line} />
+            )
+          )}
       </tbody>
       {tableFooter}
     </Table>

src/components/MonitoringTable/FollowUpTable.jsx

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

src/tests/mocks/formattedDataMonitoringTableBysurvey.js

@@ -3,6 +3,7 @@ const val = {
   "linesDetails": [
     {
       "completionRate": 0.057692307692307696,
+      "campaignId": "simpsons2020x00",
       "total": 82,
       "notStarted": 22,
       "onGoing": 76,
@@ -17,6 +18,7 @@ const val = {
     },
     {
       "completionRate": 0.057692307692307696,
+      "campaignId": "simpsosfqns2020x00",
       "total": 82,
       "notStarted": 22,
       "onGoing": 76,
@@ -31,6 +33,7 @@ const val = {
     },
     {
       "completionRate": 0.057692307692307696,
+      "campaignId": "vqs2fsqe021x00",
       "total": 82,
       "notStarted": 22,
       "onGoing": 76,
@@ -45,6 +48,7 @@ const val = {
     },
     {
       "completionRate": 0.057692307692307696,
+      "campaignId": "simpsonqsdfsqes2020x00",
       "total": 82,
       "notStarted": 22,
       "onGoing": 76,
@@ -59,6 +63,7 @@ const val = {
     },
     {
       "completionRate": 0.057692307692307696,
+      "campaignId": "vqs2qfsdfsqe021x00",
       "total": 82,
       "notStarted": 22,
       "onGoing": 76,
@@ -73,6 +78,7 @@ const val = {
     },
     {
       "completionRate": 0.057692307692307696,
+      "campaignId": "simpsonkgs2020x00",
       "total": 82,
       "notStarted": 22,
       "onGoing": 76,
@@ -87,6 +93,7 @@ const val = {
     },
     {
       "completionRate": 0.057692307692307696,
+      "campaignId": "vqs202fgd1x00",
       "total": 82,
       "notStarted": 22,
       "onGoing": 76,

src/utils/DataFormatter.js

@@ -491,6 +491,7 @@ class DataFormatter {
                 res.map((x) => {
                   const obj = Utils.formatForMonitoringTable(x);
                   obj.survey = x.campaign.label;
+                  obj.campaignId = x.campaign.id;
                   return obj;
                 })
               );
@@ -674,7 +675,7 @@ class DataFormatter {
         .filter((camp) => camp.total)
         .map((camp) =>
           Utils.formatForCollectionTable(
-            { survey: camp.campaign.label },
+            { survey: camp.campaign.label, campaignId: camp.campaign?.id },
             data[0].find((c) => c.campaign.id === camp.campaign.id),
             camp
           )

src/utils/Utils.js

@@ -82,10 +82,6 @@ class Utils {
     line.appointmentTaken = stateCount.apsCount;
     line.interviewStarted = stateCount.insCount;
 
-    line.interviewerFirstName = stateCount.interviewerFirstName;
-    line.interviewerFirstName = stateCount.interviewerLastName;
-    line.interviewerId = stateCount.interviewerId;
-
     return line;
   }