Refactor utbetalinger

eslint.config.mjs

@@ -39,6 +39,7 @@ export default [
             "no-console": "warn",
             "@typescript-eslint/explicit-function-return-type": "off",
             "prettier/prettier": "warn",
+            "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
 
             "import/order": [
                 "warn",

orval.config.ts

@@ -1,4 +1,6 @@
-export default {
+import { defineConfig } from "orval";
+
+export default defineConfig({
     "innsyn-api": {
         input: "./innsyn-api.json",
         output: {
@@ -24,10 +26,14 @@ export default {
                 fetch: {
                     includeHttpStatusReturnType: false,
                 },
+                query: {
+                    useSuspenseQuery: true,
+                    version: 5,
+                },
             },
         },
         hooks: {
             afterAllFilesWrite: "prettier --write",
         },
     },
-};
+});

package.json

@@ -65,6 +65,7 @@
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.17.0",
         "@faker-js/faker": "^8.4.1",
+        "@tanstack/react-query-devtools": "^5.64.1",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.1.0",
         "@types/jest": "^29.5.12",

public/locales/en/utbetalinger.json

@@ -14,8 +14,8 @@
   "filter.format":"(dd.mm.yyyy)",
   "filter.mottaker":"Select recipient",
   "filter.alle":"All",
-  "filter.minKonto":"To me",
-  "filter.annen":"To other recipients",
+  "filter.mottaker.minKonto":"To me",
+  "filter.mottaker.annenMottaker":"To other recipients",
   "filter.ugylding":"The date should be in the format  dd.mm.yyyy",
   "filter.tidligstFra":"The earliest search date is 15 months back",
   "filter.fraEtterTil":"The From date cannot be after the To date",
@@ -24,13 +24,13 @@
   "modal.avbryt": "Cancel",
   "modal.vis": "Show matches",
   "feil.fetch" : "Something went wrong when we tried to retrieve your payments. Please try again later.",
-  "feil.ingen":"We could not find any payments",
-  "feil.ingen.filter":"for selected filtering",
-  "feil.ingen.default.tidligere":"for the last 15 months",
-  "feil.ingen.default.nye":"for current or coming months",
-  "stoppet": "Stopped",
-  "planlagt": "Planned",
-  "utbetalt" : "Paid",
+  "feil.ingen.filter":"We could not find any payments for selected filtering",
+  "feil.ingen.default.tidligere":"We could not find any payments for the last 15 months",
+  "feil.ingen.default.nye":"We could not find any payments for current or coming months",
+  "utbetalingStatus.STOPPET": "Stopped",
+  "utbetalingStatus.PLANLAGT_UTBETALING": "Planned",
+  "utbetalingStatus.UTBETALT": "Paid",
+  "utbetalingStatus.ANNULLERT": "Annulled",
   "periode" : "Period",
   "mottaker" : "Recipient",
   "tilDeg": "To you",

public/locales/nb/utbetalinger.json

@@ -14,8 +14,8 @@
   "filter.format":"(dd.mm.åååå)",
   "filter.mottaker":"Velg mottaker",
   "filter.alle":"Alle",
-  "filter.minKonto":"Til meg",
-  "filter.annen":"Til andre mottakere",
+  "filter.mottaker.minKonto":"Til meg",
+  "filter.mottaker.annenMottaker":"Til andre mottakere",
   "filter.ugylding":"Datoen må være i formatet dd.mm.åååå",
   "filter.tidligstFra":"Tidligste søkedato er 15 måneder tilbake i tid",
   "filter.fraEtterTil":"Fra-dato kan ikke være etter til-dato",
@@ -24,13 +24,13 @@
   "modal.avbryt": "Avbryt",
   "modal.vis": "Vis treff",
   "feil.fetch" : "Noe gikk galt da vi skulle hente utbetalingene dine. Vennligst prøv igjen senere.",
-  "feil.ingen":"Vi fant ingen utbetalinger",
-  "feil.ingen.filter":"for valgt filtrering",
-  "feil.ingen.default.tidligere":"for de siste 15 måneder",
-  "feil.ingen.default.nye":"for nåværende eller kommende måneder",
-  "stoppet": "Stoppet",
-  "planlagt": "Planlagt",
-  "utbetalt" : "Utbetalt",
+  "feil.ingen.filter":"Vi fant ingen utbetalinger for valgt filtrering",
+  "feil.ingen.default.tidligere":"Vi fant ingen utbetalinger for de siste 15 måneder",
+  "feil.ingen.default.nye":"Vi fant ingen utbetalinger for nåværende eller kommende måneder",
+  "utbetalingStatus.STOPPET": "Stoppet",
+  "utbetalingStatus.PLANLAGT_UTBETALING": "Planlagt",
+  "utbetalingStatus.UTBETALT": "Utbetalt",
+  "utbetalingStatus.ANNULLERT": "Annullert",
   "periode" : "Periode",
   "mottaker" : "Mottaker",
   "tilDeg": "Til deg",

public/locales/nn/utbetalinger.json

@@ -14,8 +14,8 @@
   "filter.format":"(dd.mm.åååå)",
   "filter.mottaker":"Vel mottakar",
   "filter.alle":"Alle",
-  "filter.minKonto":"Til meg",
-  "filter.annen":"Til andre mottakarar",
+  "filter.mottaker.minKonto":"Til meg",
+  "filter.mottaker.annenMottaker":"Til andre mottakarar",
   "filter.ugylding":"Datoen må vere i formatet dd.mm.åååå",
   "filter.tidligstFra":"Tidlegaste søkjedato er 15 månader bak i tid",
   "filter.fraEtterTil":"Frå-datoen kan ikkje vere etter til-datoen",
@@ -24,13 +24,13 @@
   "modal.avbryt": "Avbryt",
   "modal.vis": "Vis treff",
   "feil.fetch" : "Noko gjekk gale då vi skulle hente utbetalingane dine. Prøv igjen seinare.",
-  "feil.ingen":"Vi fann ingen utbetalingar",
-  "feil.ingen.filter":"med filteret som er valt",
-  "feil.ingen.default.tidligere":"for dei siste 15 månadene",
-  "feil.ingen.default.nye":"for inneverande eller komande månader",
-  "stoppet": "Stoppa",
-  "planlagt": "Planlagt",
-  "utbetalt" : "Utbetalt",
+  "feil.ingen.filter":"Vi fann ingen utbetalingar med filteret som er valt",
+  "feil.ingen.default.tidligere":"Vi fann ingen utbetalingar for dei siste 15 månadene",
+  "feil.ingen.default.nye":"Vi fann ingen utbetalingar for inneverande eller komande månader",
+  "utbetalingStatus.STOPPET": "Stoppa",
+  "utbetalingStatus.PLANLAGT_UTBETALING": "Planlagt",
+  "utbetalingStatus.UTBETALT": "Utbetalt",
+  "utbetalingStatus.ANNULLERT": "Annullert",
   "periode" : "Periode",
   "mottaker" : "Mottakar",
   "tilDeg": "Til deg",

src/components/errors/ErrorBoundary.tsx

@@ -5,35 +5,30 @@ import ServerError from "../../pages/500";
 
 interface Props {
     children?: ReactNode;
+    fallback?: ReactNode;
 }
 
 interface State {
-    hasError: boolean;
+    error: Error | null;
 }
 
 class ErrorBoundary extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
-
         // Define a state variable to track whether is an error or not
-        this.state = { hasError: false };
+        this.state = { error: null };
     }
 
-    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-    static getDerivedStateFromError(_: Error) {
+    static getDerivedStateFromError(error: Error) {
         // Update state so the next render will show the fallback UI
-
-        return { hasError: true };
+        return { error };
     }
     public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
         logger.error(`Uncaught clientside error: ${error}, errorInfo: ${JSON.stringify(errorInfo)}`);
     }
 
     public render() {
-        if (this.state.hasError) {
-            return <ServerError />;
-        }
-
+        if (!!this.state.error) return this.props.fallback ?? <ServerError />;
         return this.props.children;
     }
 }

src/pages/500.tsx

@@ -15,12 +15,10 @@ const ServerError = (): React.JSX.Element => (
         <div className="informasjon-side">
             <FeilsideWrapper>
                 <UthevetPanel>
-                    <>
-                        <Heading level="1" size="large" spacing>
-                            Beklager, vi har dessverre tekniske problemer.
-                        </Heading>
-                        <BodyLong spacing>Vennligst prøv igjen senere.</BodyLong>
-                    </>
+                    <Heading level="1" size="large" spacing>
+                        Beklager, vi har dessverre tekniske problemer.
+                    </Heading>
+                    <BodyLong spacing>Vennligst prøv igjen senere.</BodyLong>
                 </UthevetPanel>
             </FeilsideWrapper>
         </div>

src/pages/api/innsyn-api/[...slug].ts

@@ -16,7 +16,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<unknown>) => {
         }
     }
     if (!token) {
-        return res.status(401);
+        res.status(401);
+        return;
     }
     if (!slug) {
         res.status(400).json({ message: "Manglende path" });

src/pages/utbetaling.tsx

@@ -9,12 +9,12 @@ import { useHentAlleSaker } from "../generated/saks-oversikt-controller/saks-ove
 import { useHarSoknaderMedInnsyn } from "../generated/soknad-med-innsyn-controller/soknad-med-innsyn-controller";
 import UtbetalingsoversiktIngenSoknader from "../utbetalinger/UtbetalingsoversiktIngenSoknader";
 import UtbetalingsoversiktIngenInnsyn from "../utbetalinger/UtbetalingsoversiktIngenInnsyn";
-import { FilterProvider } from "../utbetalinger/beta/filter/FilterContext";
-import UtbetalingerFilter from "../utbetalinger/beta/filter/UtbetalingerFilter";
-import UtbetalingerPanelBeta from "../utbetalinger/beta/UtbetalingerPanelBeta";
-import styles from "../utbetalinger/beta/utbetalinger.module.css";
+import UtbetalingerFilter from "../utbetalinger/filter/UtbetalingerFilter";
+import UtbetalingerPanel from "../utbetalinger/UtbetalingerPanel";
+import styles from "../utbetalinger/utbetalinger.module.css";
 import useUpdateBreadcrumbs from "../hooks/useUpdateBreadcrumbs";
 import pageHandler from "../pagehandler/pageHandler";
+import { FilterProvider } from "../utbetalinger/filter/FilterProvider";
 
 import Error from "./_error";
 
@@ -38,7 +38,7 @@ const Utbetalinger: NextPage = () => {
     if (isAlleSakerLoading || isHarSoknaderMedInnsynLoading) {
         return (
             <div className={styles.utbetalinger_side} data-theme="utbetalinger">
-                <Loader className={styles.utbetalinger_loader} size="3xlarge" title="venter..." />
+                <Loader className="m-[100px]" size="3xlarge" title="venter..." />
             </div>
         );
     }
@@ -66,13 +66,13 @@ const Utbetalinger: NextPage = () => {
             </Head>
             <FilterProvider>
                 <div className={styles.utbetalinger_side}>
-                    <div className={styles.utbetalinger_side_innhold}>
+                    <div className="flex flex-row justify-center gap-8 min-h-[40vh]">
                         {!isMobile && (
-                            <Panel as="section" aria-label={t("filter.aria")} className={styles.filter_section}>
+                            <Panel as="section" aria-label={t("filter.aria")} className="h-fit p-[1.5rem] pt-[1.5rem]">
                                 <UtbetalingerFilter />
                             </Panel>
                         )}
-                        <UtbetalingerPanelBeta />
+                        <UtbetalingerPanel />
                     </div>
                 </div>
             </FilterProvider>