Tsf 3662 fix multiple get requests (#5496)

* Unngå doble serverkall pga <LoadingPanel />

Fikser nokon stader der sidekomponenter som laster data frå server vart rendra eit lite øyeblikk, før dei vart erstatta med visning av LoadingPanel pga datalasting frå server lenger ute i komponenthierarkiet. Slik rendering medføre at serverkall for datalasting frå komponenter lenger nede i hierarkiet skjer fleire ganger uten nokon god grunn.

Det er sannsynlegvis fleire stader i koden der dette er eit problem. Sjå etter kode som sjekker på xxx === RestApiState.LOADING uten å sjekke xxx === RestApiState.NOT_STARTED.

* Introduser RestApiState.NO_PATH

For å kunne skille mellom at eit rest kall ikkje har starta endå, og at det ikkje skal startast (requstApi.hasPath() returnerer false).

Dette trengs for å kunne vise <LoadingSpinner /> frå starten av for kall som skal gjerast men ikkje har starta endå, men unngå å vise den når eit kall ikkje skal startast.

* Lint fix.

---------

Co-authored-by: Thomas H. Wiberg <thomas@thawi.no>

packages/rest-api-hooks/src/RestApiState.ts

@@ -3,6 +3,13 @@ enum RestApiState {
   LOADING = 'LOADING',
   SUCCESS = 'SUCCESS',
   ERROR = 'ERROR',
+  NO_PATH = 'NO_PATH',
 }
 
 export default RestApiState;
+
+export const isRequestNotDone = (state: RestApiState): boolean =>
+  state === RestApiState.NOT_STARTED || state === RestApiState.LOADING;
+
+export const isRequestNotToBeDone = (state: RestApiState): boolean =>
+  state === RestApiState.NO_PATH;

packages/rest-api-hooks/src/local-data/useRestApi.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, DependencyList } from 'react';
+import { DependencyList, useEffect, useState } from 'react';
 
-import { REQUEST_POLLING_CANCELLED, AbstractRequestApi } from '@k9-sak-web/rest-api';
+import { AbstractRequestApi, REQUEST_POLLING_CANCELLED } from '@k9-sak-web/rest-api';
 
 import RestApiState from '../RestApiState';
 
@@ -43,7 +43,7 @@ const getUseRestApi = (requestApi: AbstractRequestApi) =>
     const allOptions = { ...defaultOptions, ...options };
 
     const [data, setData] = useState({
-      state: RestApiState.NOT_STARTED,
+      state: requestApi.hasPath(key) ? RestApiState.NOT_STARTED : RestApiState.NO_PATH,
       error: undefined,
       data: undefined,
     });
@@ -76,7 +76,7 @@ const getUseRestApi = (requestApi: AbstractRequestApi) =>
           });
       } else if (!requestApi.hasPath(key)) {
         setData({
-          state: RestApiState.NOT_STARTED,
+          state: RestApiState.NO_PATH,
           error: undefined,
           data: undefined,
         });

packages/sak-app/src/behandlingsupport/historikk/HistorikkIndex.tsx

@@ -2,11 +2,11 @@ import React, { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import moment from 'moment';
 
-import { RestApiState } from '@k9-sak-web/rest-api-hooks';
 import HistorikkSakIndex from '@fpsak-frontend/sak-historikk';
 import { KodeverkMedNavn, Historikkinnslag } from '@k9-sak-web/types';
 import { LoadingPanel, usePrevious } from '@fpsak-frontend/shared-components';
 
+import { isRequestNotDone } from "@k9-sak-web/rest-api-hooks/src/RestApiState";
 import useBehandlingEndret from '../../behandling/useBehandlingEndret';
 import { K9sakApiKeys, restApiHooks } from '../../data/k9sakApi';
 import { pathToBehandling, createLocationForSkjermlenke } from '../../app/paths';
@@ -109,9 +109,9 @@ const HistorikkIndex = ({ saksnummer, behandlingId, behandlingVersjon }: OwnProp
   );
 
   if (
-    historikkK9SakState === RestApiState.LOADING ||
-    (skalBrukeFpTilbakeHistorikk && historikkTilbakeState === RestApiState.LOADING) ||
-    (skalBrukeKlageHistorikk && historikkKlageState === RestApiState.LOADING)
+    isRequestNotDone(historikkK9SakState) ||
+    (skalBrukeFpTilbakeHistorikk && isRequestNotDone(historikkTilbakeState)) ||
+    (skalBrukeKlageHistorikk && isRequestNotDone(historikkKlageState))
   ) {
     return <LoadingPanel />;
   }

packages/sak-app/src/fagsak/FagsakIndex.tsx

@@ -7,7 +7,6 @@ import {
   LoadingPanel,
   Punsjstripe,
 } from '@fpsak-frontend/shared-components';
-import { RestApiState } from '@k9-sak-web/rest-api-hooks';
 import { Merknadkode } from '@k9-sak-web/sak-meny-marker-behandling';
 import Soknadsperiodestripe from '@k9-sak-web/sak-soknadsperiodestripe';
 import {
@@ -28,6 +27,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { isRequestNotDone } from "@k9-sak-web/rest-api-hooks/src/RestApiState";
 import {
   behandlingerRoutePath,
   erBehandlingValgt,
@@ -216,14 +216,13 @@ const FagsakIndex = () => {
   const erHastesak = merknaderFraLos && merknaderFraLos.merknadKoder?.includes(Merknadkode.HASTESAK);
 
   if (!fagsak) {
-    if (fagsakState === RestApiState.NOT_STARTED || fagsakState === RestApiState.LOADING) {
+    if (isRequestNotDone(fagsakState)) {
       return <LoadingPanel />;
     }
     return <Navigate to={pathToMissingPage()} />;
   }
 
-  const harIkkeHentetfagsakPersonData =
-    fagsakPersonState === RestApiState.LOADING || fagsakPersonState === RestApiState.NOT_STARTED;
+  const harIkkeHentetfagsakPersonData = isRequestNotDone(fagsakPersonState);
 
   if (harIkkeHentetfagsakPersonData || !harFerdighentetfagsakRettigheter) {
     return <LoadingPanel />;
@@ -274,7 +273,7 @@ const FagsakIndex = () => {
           />
         }
         supportContent={() => {
-          if (personopplysningerState === RestApiState.LOADING) {
+          if (isRequestNotDone(personopplysningerState)) {
             return <LoadingPanel />;
           }
 
@@ -299,7 +298,7 @@ const FagsakIndex = () => {
             return null;
           }
 
-          if (personopplysningerState === RestApiState.LOADING) {
+          if (isRequestNotDone(personopplysningerState)) {
             return <LoadingPanel />;
           }