Flytt henting av oppgaver til liste inn i hver enkelt route for å unn…

…gå dobbel henting av data. Legg til default søkeparams i url for å unngå redirect og dobbelt henting.
navikt · Nov 29, 2024 · 19e7b5c · 19e7b5c
1 parent 93f930f
commit 19e7b5c
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 92 deletions.
diff --git a/app/components/header-meny/HeaderMeny.tsx b/app/components/header-meny/HeaderMeny.tsx
@@ -6,6 +6,10 @@ import { HeaderUtloggingMeny } from "~/components/header-meny/HeaderUtloggingMen
 import { Adventslys } from "~/components/jul/Adventslys";
 import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
 import type { ISaksbehandler } from "~/models/saksbehandler.server";
+import { oppgaverTilBehandlingDefaultParams } from "~/routes/_index";
+import { alleOppgaverDefaultParams } from "~/routes/alle-oppgaver";
+import { mineOppgaverDefaultParams } from "~/routes/mine-oppgaver";
+import { convertToQueryParamString } from "~/utils/url.utils";
 
 import { PersonSok } from "../person-sok/PersonSok";
 import styles from "./HeaderMeny.module.css";
@@ -21,7 +25,7 @@ export function HeaderMeny({ saksbehandler, antallOppgaverJegHarTilBehandling }:
     <div className={styles.container}>
       <div className={styles.linkContainer}>
         <NavLink
-          to={"/"}
+          to={`/?${convertToQueryParamString(oppgaverTilBehandlingDefaultParams)}`}
           className={({ isActive }) =>
             classnames(styles.linkItem, { [styles.linkItemActive]: isActive })
           }
@@ -30,7 +34,7 @@ export function HeaderMeny({ saksbehandler, antallOppgaverJegHarTilBehandling }:
         </NavLink>
 
         <NavLink
-          to={"/mine-oppgaver"}
+          to={`/mine-oppgaver?${convertToQueryParamString(mineOppgaverDefaultParams)}`}
           className={({ isActive }) =>
             classnames(styles.linkItem, { [styles.linkItemActive]: isActive })
           }
@@ -44,7 +48,7 @@ export function HeaderMeny({ saksbehandler, antallOppgaverJegHarTilBehandling }:
         </NavLink>
 
         <NavLink
-          to={"/alle-oppgaver"}
+          to={`/alle-oppgaver?${convertToQueryParamString(alleOppgaverDefaultParams)}`}
           className={({ isActive }) =>
             classnames(styles.linkItem, { [styles.linkItemActive]: isActive })
           }

diff --git a/app/hooks/useTypedRouteLoaderData.tsx b/app/hooks/useTypedRouteLoaderData.tsx
@@ -1,12 +1,10 @@
 import { useRouteLoaderData } from "@remix-run/react";
 
 import type { loader as rootLoader } from "~/root";
-import type { loader as oppgaverLoader } from "~/routes/_oppgaver";
 import type { loader as oppgaveLoader } from "~/routes/oppgave.$oppgaveId";
 
 type Loaders = {
   root: typeof rootLoader;
-  "routes/_oppgaver": typeof oppgaverLoader;
   "routes/oppgave.$oppgaveId": typeof oppgaveLoader;
 };
 

diff --git a/app/root.tsx b/app/root.tsx
@@ -21,6 +21,7 @@ import { MistelteinSvg } from "~/components/jul/MistelteinSvg";
 import { AlertProvider } from "~/context/alert-context";
 import globalCss from "~/global.css?url";
 import meldingOmVedtakCss from "~/melding-om-vedtak.css?url";
+import { hentOppgaver } from "~/models/oppgave.server";
 import { getSaksbehandler } from "~/models/saksbehandler.server";
 import styles from "~/route-styles/root.module.css";
 import { handleActions } from "~/server-side-actions/handle-actions";
@@ -82,10 +83,10 @@ export async function action({ request }: ActionFunctionArgs) {
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const saksbehandler = await getSaksbehandler(request);
-  // const oppgaverJegHarTilBehandling = await hentOppgaver(
-  //   request,
-  //   "?mineOppgaver=true&tilstand=KLAR_TIL_BEHANDLING&tilstand=UNDER_BEHANDLING&tilstand=KLAR_TIL_KONTROLL&tilstand=UNDER_KONTROLL",
-  // );
+  const oppgaverJegHarTilBehandling = await hentOppgaver(
+    request,
+    "?mineOppgaver=true&tilstand=KLAR_TIL_BEHANDLING&tilstand=UNDER_BEHANDLING&tilstand=KLAR_TIL_KONTROLL&tilstand=UNDER_KONTROLL",
+  );
 
   const jul = unleash.isEnabled("dp-saksbehandling-frontend.jul");
   const halloween = unleash.isEnabled("dp-saksbehandling-frontend.halloween");
@@ -97,7 +98,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
   return json({
     saksbehandler: saksbehandler,
-    antallOppgaverJegHarTilBehandling: 0,
+    antallOppgaverJegHarTilBehandling: oppgaverJegHarTilBehandling.totaltAntallOppgaver,
     featureFlags: {
       jul,
       halloween,

diff --git a/app/routes/_oppgaver._index.tsx → app/routes/_index.tsx b/app/routes/_oppgaver._index.tsx → app/routes/_index.tsx
@@ -10,25 +10,25 @@ import { OppgaveListe } from "~/components/oppgave-liste/OppgaveListe";
 import tabStyles from "~/components/oppgave-liste-meny/OppgaveListeMeny.module.css";
 import { OppgaveListePaginering } from "~/components/oppgave-liste-paginering/OppgaveListePaginering";
 import { useHandleAlertMessages } from "~/hooks/useHandleAlertMessages";
-import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
+import { hentOppgaver } from "~/models/oppgave.server";
 import styles from "~/route-styles/index.module.css";
 import { commitSession, getSession } from "~/sessions";
 import { appendSearchParamIfNotExists } from "~/utils/url.utils";
 
+export const oppgaverTilBehandlingDefaultParams = [
+  { key: "tilstand", value: "KLAR_TIL_KONTROLL" },
+  { key: "tilstand", value: "KLAR_TIL_BEHANDLING" },
+  { key: "emneknagg", value: "Avslag minsteinntekt" },
+  { key: "side", value: "1" },
+  { key: "antallOppgaver", value: "100" },
+];
+
 export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
 
   if (!url.search) {
-    const paramsToAppend = [
-      { key: "tilstand", value: "KLAR_TIL_KONTROLL" },
-      { key: "tilstand", value: "KLAR_TIL_BEHANDLING" },
-      { key: "emneknagg", value: "Avslag minsteinntekt" },
-      { key: "side", value: "1" },
-      { key: "antallOppgaver", value: "100" },
-    ];
-
     let appended = false;
-    for (const { key, value } of paramsToAppend) {
+    for (const { key, value } of oppgaverTilBehandlingDefaultParams) {
       appended = appendSearchParamIfNotExists(url.searchParams, key, value) || appended;
     }
 
@@ -37,28 +37,28 @@ export async function loader({ request }: LoaderFunctionArgs) {
     }
   }
 
+  const oppgaverResponse = await hentOppgaver(request, url.search);
   const session = await getSession(request.headers.get("Cookie"));
   const alert = session.get("alert");
 
-  if (alert) {
-    return json(
-      { alert },
-      {
-        headers: {
-          "Set-Cookie": await commitSession(session),
-        },
+  return json(
+    {
+      alert,
+      oppgaver: oppgaverResponse.oppgaver,
+      totaltAntallOppgaver: oppgaverResponse.totaltAntallOppgaver,
+    },
+    {
+      headers: {
+        "Set-Cookie": await commitSession(session),
       },
-    );
-  }
-
-  return null;
+    },
+  );
 }
 
 export default function Saksbehandling() {
   const { state } = useNavigation();
-  const loaderData = useLoaderData<typeof loader>();
-  const { oppgaver, totaltAntallOppgaver } = useTypedRouteLoaderData("routes/_oppgaver");
-  useHandleAlertMessages(loaderData?.alert);
+  const { alert, oppgaver, totaltAntallOppgaver } = useLoaderData<typeof loader>();
+  useHandleAlertMessages(alert);
 
   return (
     <div className={styles.container}>

diff --git a/app/routes/_oppgaver.tsx b/app/routes/_oppgaver.tsx
diff --git a/app/routes/_oppgaver.alle-oppgaver.tsx → app/routes/alle-oppgaver.tsx b/app/routes/_oppgaver.alle-oppgaver.tsx → app/routes/alle-oppgaver.tsx
@@ -1,7 +1,7 @@
 import { BarChartIcon, FunnelIcon } from "@navikt/aksel-icons";
 import { Tabs } from "@navikt/ds-react";
 import { json, LoaderFunctionArgs, redirect } from "@remix-run/node";
-import { useNavigation } from "@remix-run/react";
+import { useLoaderData, useNavigation } from "@remix-run/react";
 
 import { OppgaveFilterDato } from "~/components/oppgave-filter-dato/OppgaveFilterDato";
 import { OppgaveFilterEmneknagger } from "~/components/oppgave-filter-emneknagger/OppgaveFilterEmneknagger";
@@ -10,22 +10,23 @@ import { OppgaveFilterStatus } from "~/components/oppgave-filter-status/OppgaveF
 import { OppgaveListe } from "~/components/oppgave-liste/OppgaveListe";
 import tabStyles from "~/components/oppgave-liste-meny/OppgaveListeMeny.module.css";
 import { OppgaveListePaginering } from "~/components/oppgave-liste-paginering/OppgaveListePaginering";
-import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
+import { useHandleAlertMessages } from "~/hooks/useHandleAlertMessages";
+import { hentOppgaver } from "~/models/oppgave.server";
 import styles from "~/route-styles/index.module.css";
 import { commitSession, getSession } from "~/sessions";
 import { appendSearchParamIfNotExists } from "~/utils/url.utils";
 
+export const alleOppgaverDefaultParams = [
+  { key: "side", value: "1" },
+  { key: "antallOppgaver", value: "100" },
+];
+
 export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
 
   if (!url.search) {
-    const paramsToAppend = [
-      { key: "side", value: "1" },
-      { key: "antallOppgaver", value: "100" },
-    ];
-
     let appended = false;
-    for (const { key, value } of paramsToAppend) {
+    for (const { key, value } of alleOppgaverDefaultParams) {
       appended = appendSearchParamIfNotExists(url.searchParams, key, value) || appended;
     }
 
@@ -34,26 +35,29 @@ export async function loader({ request }: LoaderFunctionArgs) {
     }
   }
 
+  const oppgaverResponse = await hentOppgaver(request, url.search);
   const session = await getSession(request.headers.get("Cookie"));
   const alert = session.get("alert");
 
-  if (alert) {
-    return json(
-      { alert },
-      {
-        headers: {
-          "Set-Cookie": await commitSession(session),
-        },
+  return json(
+    {
+      alert,
+      oppgaver: oppgaverResponse.oppgaver,
+      totaltAntallOppgaver: oppgaverResponse.totaltAntallOppgaver,
+    },
+    {
+      headers: {
+        "Set-Cookie": await commitSession(session),
       },
-    );
-  }
-
-  return null;
+    },
+  );
 }
 
 export default function Saksbehandling() {
   const { state } = useNavigation();
-  const { oppgaver, totaltAntallOppgaver } = useTypedRouteLoaderData("routes/_oppgaver");
+  const { alert, oppgaver, totaltAntallOppgaver } = useLoaderData<typeof loader>();
+  useHandleAlertMessages(alert);
+
   return (
     <div className={styles.container}>
       <aside className={styles.venstreMeny}>

diff --git a/app/routes/_oppgaver.mine-oppgaver.tsx → app/routes/mine-oppgaver.tsx b/app/routes/_oppgaver.mine-oppgaver.tsx → app/routes/mine-oppgaver.tsx
@@ -1,35 +1,36 @@
 import { BarChartIcon, FunnelIcon } from "@navikt/aksel-icons";
 import { Tabs } from "@navikt/ds-react";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { redirect } from "@remix-run/node";
-import { useNavigation } from "@remix-run/react";
+import { json, LoaderFunctionArgs, redirect } from "@remix-run/node";
+import { useLoaderData, useNavigation } from "@remix-run/react";
 
 import { OppgaveFilterDato } from "~/components/oppgave-filter-dato/OppgaveFilterDato";
 import { OppgaveFilterEmneknagger } from "~/components/oppgave-filter-emneknagger/OppgaveFilterEmneknagger";
 import { OppgaveFilterStatus } from "~/components/oppgave-filter-status/OppgaveFilterStatus";
 import { OppgaveListe } from "~/components/oppgave-liste/OppgaveListe";
 import tabStyles from "~/components/oppgave-liste-meny/OppgaveListeMeny.module.css";
 import { OppgaveListePaginering } from "~/components/oppgave-liste-paginering/OppgaveListePaginering";
-import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
+import { useHandleAlertMessages } from "~/hooks/useHandleAlertMessages";
+import { hentOppgaver } from "~/models/oppgave.server";
 import styles from "~/route-styles/index.module.css";
+import { commitSession, getSession } from "~/sessions";
 import { appendSearchParamIfNotExists } from "~/utils/url.utils";
 
+export const mineOppgaverDefaultParams = [
+  { key: "mineOppgaver", value: "true" },
+  { key: "tilstand", value: "KLAR_TIL_KONTROLL" },
+  { key: "tilstand", value: "KLAR_TIL_BEHANDLING" },
+  { key: "tilstand", value: "UNDER_KONTROLL" },
+  { key: "tilstand", value: "UNDER_BEHANDLING" },
+  { key: "side", value: "1" },
+  { key: "antallOppgaver", value: "100" },
+];
+
 export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
 
   if (!url.search) {
-    const paramsToAppend = [
-      { key: "mineOppgaver", value: "true" },
-      { key: "tilstand", value: "KLAR_TIL_KONTROLL" },
-      { key: "tilstand", value: "KLAR_TIL_BEHANDLING" },
-      { key: "tilstand", value: "UNDER_KONTROLL" },
-      { key: "tilstand", value: "UNDER_BEHANDLING" },
-      { key: "side", value: "1" },
-      { key: "antallOppgaver", value: "100" },
-    ];
-
     let appended = false;
-    for (const { key, value } of paramsToAppend) {
+    for (const { key, value } of mineOppgaverDefaultParams) {
       appended = appendSearchParamIfNotExists(url.searchParams, key, value) || appended;
     }
 
@@ -38,12 +39,29 @@ export async function loader({ request }: LoaderFunctionArgs) {
     }
   }
 
-  return null;
+  const oppgaverResponse = await hentOppgaver(request, url.search);
+  const session = await getSession(request.headers.get("Cookie"));
+  const alert = session.get("alert");
+
+  return json(
+    {
+      alert,
+      oppgaver: oppgaverResponse.oppgaver,
+      totaltAntallOppgaver: oppgaverResponse.totaltAntallOppgaver,
+    },
+    {
+      headers: {
+        "Set-Cookie": await commitSession(session),
+      },
+    },
+  );
 }
 
 export default function Saksbehandling() {
   const { state } = useNavigation();
-  const { oppgaver, totaltAntallOppgaver } = useTypedRouteLoaderData("routes/_oppgaver");
+  const { alert, oppgaver, totaltAntallOppgaver } = useLoaderData<typeof loader>();
+  useHandleAlertMessages(alert);
+
   return (
     <div className={styles.container}>
       <aside className={styles.venstreMeny}>

diff --git a/app/routes/oppgave.$oppgaveId.behandle._modal.fullfort-oppgave.tsx b/app/routes/oppgave.$oppgaveId.behandle._modal.fullfort-oppgave.tsx
@@ -8,9 +8,11 @@ import { RemixLink } from "~/components/RemixLink";
 import { hentNesteOppgave, type IOppgave } from "~/models/oppgave.server";
 import { hentStatistikkForSaksbehandler } from "~/models/statistikk.server";
 import styles from "~/route-styles/oppgave.module.css";
+import { oppgaverTilBehandlingDefaultParams } from "~/routes/_index";
 import { commitSession, getSession } from "~/sessions";
 import { getAlertMessage } from "~/utils/alert-message.utils";
 import { logger } from "~/utils/logger.utils";
+import { convertToQueryParamString } from "~/utils/url.utils";
 
 export async function action({ request, params }: ActionFunctionArgs) {
   const response = await hentNesteOppgave(request);
@@ -84,7 +86,11 @@ export default function NesteOppgave() {
       </Modal.Body>
 
       <Modal.Footer>
-        <RemixLink asButtonVariant={"secondary"} size="small" to={"/"}>
+        <RemixLink
+          asButtonVariant={"secondary"}
+          size="small"
+          to={`/?${convertToQueryParamString(oppgaverTilBehandlingDefaultParams)}`}
+        >
           Oppgaveliste
         </RemixLink>
 

diff --git a/app/routes/oppgave.$oppgaveId.behandle._modal.neste-oppgave.tsx b/app/routes/oppgave.$oppgaveId.behandle._modal.neste-oppgave.tsx
@@ -5,9 +5,11 @@ import { Form, useFetcher, useLoaderData } from "@remix-run/react";
 
 import { RemixLink } from "~/components/RemixLink";
 import { hentNesteOppgave, type IOppgave } from "~/models/oppgave.server";
+import { oppgaverTilBehandlingDefaultParams } from "~/routes/_index";
 import { commitSession, getSession } from "~/sessions";
 import { getAlertMessage } from "~/utils/alert-message.utils";
 import { logger } from "~/utils/logger.utils";
+import { convertToQueryParamString } from "~/utils/url.utils";
 
 export async function action({ request, params }: ActionFunctionArgs) {
   const response = await hentNesteOppgave(request);
@@ -65,7 +67,11 @@ export default function NesteOppgave() {
       </Modal.Header>
 
       <Modal.Footer>
-        <RemixLink asButtonVariant={"secondary"} size="small" to={"/"}>
+        <RemixLink
+          asButtonVariant={"secondary"}
+          size="small"
+          to={`/?${convertToQueryParamString(oppgaverTilBehandlingDefaultParams)}`}
+        >
           Oppgaveliste
         </RemixLink>