Flytter feilmelding for notifications inn i usermenu-komponenten

packages/server/src/env/schema.ts

@@ -14,6 +14,7 @@ export const serverSchema = z.object({
     HOST: z.string().url(),
     VARSEL_API_URL: z.string().url(),
     API_DEKORATOREN_URL: z.string().url(),
+    LOGIN_URL: z.string().url(),
 });
 
 export type RunningEnv = z.infer<typeof serverSchema>["ENV"];
@@ -34,6 +35,7 @@ export const serverEnv = {
     HOST: process.env.HOST,
     VARSEL_API_URL: process.env.VARSEL_API_URL,
     API_DEKORATOREN_URL: process.env.API_DEKORATOREN_URL,
+    LOGIN_URL: process.env.LOGIN_URL,
 };
 
 // This is session URL for prod

packages/server/src/handlers/auth-handler.ts

@@ -15,7 +15,6 @@ import { getNotifications } from "../notifications";
 import { ArbeidsgiverUserMenu } from "../views/header/arbeidsgiver-user-menu";
 import { AnchorIconButton } from "../views/icon-button";
 import { LogoutIcon } from "decorator-shared/views/icons/logout";
-import html from "decorator-shared/html";
 import { Language, type Params } from "decorator-shared/params";
 
 const notAuthenticatedResponse = (language: Language) =>
@@ -69,14 +68,13 @@ const buildUsermenuHtml = async (
             const notificationsResult = await getNotifications({
                 request,
             });
-            if (!notificationsResult.ok) {
-                return html` <div>Error</div>`;
-            }
 
             return UserMenuDropdown({
                 texts: localTexts,
                 name: auth.name,
-                notifications: notificationsResult.data,
+                notifications: notificationsResult.ok
+                    ? notificationsResult.data
+                    : null,
                 level: `Level${auth.securityLevel}`,
                 logoutUrl: logoutUrl as string,
                 minsideUrl: clientEnv.MIN_SIDE_URL,

packages/server/src/handlers/search-handler.ts

@@ -4,7 +4,7 @@ import { HandlerFunction, responseBuilder } from "../lib/handler";
 import { SearchHits } from "../views/search-hits";
 import { texts } from "../texts";
 import { z } from "zod";
-import { SearchErrorView } from "decorator-shared/views/errors/search-error";
+import { SearchErrorView } from "../views/errors/search-error";
 import { fetchAndValidateJson } from "../lib/fetch-and-validate";
 
 export type SearchResult = z.infer<typeof resultSchema>;

packages/server/src/notifications.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { env } from "./env/server";
 import { Result, ResultType } from "./result";
+import { fetchAndValidateJson } from "./lib/fetch-and-validate";
 
 const varselSchema = z.object({
     eventId: z.string(),
@@ -65,34 +66,19 @@ export const getNotifications = async ({
 }: {
     request: Request;
 }): Promise<ResultType<Notification[]>> => {
-    const fetchResult = await fetch(
+    return fetchAndValidateJson(
         `${env.VARSEL_API_URL}/varselbjelle/varsler`,
         {
             headers: {
                 cookie: request.headers.get("cookie") || "",
             },
         },
+        varslerSchema,
+    ).then((result) =>
+        result.ok
+            ? { ...result, data: varslerToNotifications(result.data) }
+            : result,
     );
-
-    if (!fetchResult.ok) {
-        return Result.Error(await fetchResult.text());
-    }
-
-    try {
-        const json = await fetchResult.json();
-
-        const validationResult = varslerSchema.safeParse(json);
-        if (!validationResult.success) {
-            return Result.Error(validationResult.error);
-        }
-
-        return Result.Ok(varslerToNotifications(validationResult.data));
-    } catch (error) {
-        if (error instanceof Error) {
-            return Result.Error(error);
-        }
-        throw error;
-    }
 };
 
 export const archiveNotification = async ({

packages/server/src/views/errors/notifications-error.ts

@@ -0,0 +1,10 @@
+import html from "decorator-shared/html";
+import { Alert } from "decorator-shared/views/alert";
+
+// TODO: add texts/translations
+export const NotificationsErrorView = () => {
+    return html`${Alert({
+        variant: "error",
+        content: html` <div>Åh nei, kunne ikke laste varsler!</div>`,
+    })}`;
+};

packages/server/src/views/errors/search-error.ts

@@ -0,0 +1,10 @@
+import html from "decorator-shared/html";
+import { Alert } from "decorator-shared/views/alert";
+
+// TODO: add texts/translations
+export const SearchErrorView = () => {
+    return html`${Alert({
+        variant: "error",
+        content: html` <div>Åh nei, søket feilet!</div>`,
+    })}`;
+};

packages/server/src/views/header/user-menu-dropdown.ts

@@ -12,8 +12,8 @@ import { Notification } from "../../notifications";
 
 export type UserMenuDropdownProps = {
     texts: Texts;
-    name?: string;
-    notifications?: Notification[];
+    name: string;
+    notifications: Notification[] | null;
     level: LoginLevel;
     logoutUrl: string;
     minsideUrl: string;
@@ -28,18 +28,19 @@ export const UserMenuDropdown = ({
     logoutUrl,
     minsideUrl,
     personopplysningerUrl,
-}: UserMenuDropdownProps) =>
-    DropdownMenu({
+}: UserMenuDropdownProps) => {
+    return DropdownMenu({
         button: IconButton({
             className: cls.userMenuButton,
-            text: name ?? "",
-            Icon: notifications?.length
-                ? PersonCircleNotificationIcon({
-                      className: cls.icon,
-                  })
-                : PersonCircleIcon({
-                      className: cls.icon,
-                  }),
+            text: name,
+            Icon:
+                notifications && notifications.length > 0
+                    ? PersonCircleNotificationIcon({
+                          className: cls.icon,
+                      })
+                    : PersonCircleIcon({
+                          className: cls.icon,
+                      }),
         }),
         dropdownClass: cls.userMenuDropdown,
         dropdownContent: UserMenu({
@@ -52,3 +53,4 @@ export const UserMenuDropdown = ({
             personopplysningerUrl,
         }),
     });
+};

packages/server/src/views/header/user-menu.ts

@@ -11,11 +11,12 @@ import { Notifications } from "../notifications/notifications";
 import { LoginLevel } from "decorator-shared/params";
 import { Alert } from "decorator-shared/views/alert";
 import { Notification } from "../../notifications";
+import { env } from "../../env/server";
 
 export type UserMenuProps = {
     texts: Texts;
-    name?: string;
-    notifications?: Notification[];
+    name: string;
+    notifications: Notification[] | null;
     level: LoginLevel;
     logoutUrl: string;
     minsideUrl: string;
@@ -31,7 +32,7 @@ export const UserMenu = ({
     minsideUrl,
     personopplysningerUrl,
 }: UserMenuProps) =>
-    html`<div class="${cls.userMenu}">
+    html` <div class="${cls.userMenu}">
         <div class="${cls.menuItems}">
             <div class="${cls.menuHeader}">
                 <div class="${cls.loggedIn}">${texts.logged_in}</div>
@@ -43,7 +44,7 @@ export const UserMenu = ({
                     content: html`
                         <div>
                             ${texts.security_level_info}
-                            <a class="${cls.link}" href="#TODO"
+                            <a class="${cls.link}" href="${env.LOGIN_URL}"
                                 >Logg inn med BankID, Buypass, eller
                                 Commfides</a
                             >

packages/server/src/views/notifications/notifications.ts

@@ -11,10 +11,11 @@ import {
     Notification,
     UnmaskedNotification,
 } from "../../notifications";
+import { NotificationsErrorView } from "../errors/notifications-error";
 
 export type NotificationsProps = {
     texts: Texts;
-    notifications?: Notification[];
+    notifications: Notification[] | null;
 };
 
 const kanalerToMetadata = (kanaler: string[], texts: Texts) => {
@@ -36,7 +37,7 @@ const MaskedNotificationComp = ({
     notification: MaskedNotification;
     texts: Texts;
 }) =>
-    html`<div class="${cls.notification}">
+    html` <div class="${cls.notification}">
         <div class="${cls.header}">
             <div class="${cls.headerLeft}">
                 ${type === "task" ? TaskIcon() : MessageIcon()}
@@ -58,7 +59,7 @@ const NotificationComp = ({
     texts: Texts;
     notification: UnmaskedNotification;
 }) =>
-    html`<link-notification
+    html` <link-notification
         class="${cls.notification} ${cls.linkNotification}"
         data-type="${type}"
     >
@@ -74,7 +75,7 @@ const NotificationComp = ({
         </div>
         <a href="${link}" class="${cls.text}">${text}</a>
         ${channels.length > 0 &&
-        html`<div class="${cls.metadata}">
+        html` <div class="${cls.metadata}">
             ${kanalerToMetadata(channels, texts)}
         </div>`}
     </link-notification>`;
@@ -86,7 +87,7 @@ const ArchivableNotification = ({
     notification: UnmaskedNotification;
     texts: Texts;
 }) =>
-    html`<archivable-notification class="${cls.notification}" data-id="${id}">
+    html` <archivable-notification class="${cls.notification}" data-id="${id}">
         <div class="${cls.header}">
             <div class="${cls.headerLeft}">
                 ${type === "task" ? TaskIcon() : MessageIcon()}
@@ -97,30 +98,38 @@ const ArchivableNotification = ({
         <div>${text}</div>
         <div class="${cls.bottom}">
             ${channels.length > 0 &&
-            html`<div class="${cls.metadata}">
+            html` <div class="${cls.metadata}">
                 ${kanalerToMetadata(channels, texts)}
             </div>`}
             <button class="${cls.button}">${texts.archive}</button>
         </div>
     </archivable-notification>`;
 
 export function Notifications({ texts, notifications }: NotificationsProps) {
-    return html`<div class="${cls.notifications}">
+    return html` <div class="${cls.notifications}">
         <h2 class="${cls.notificationsHeading}">${texts.notifications}</h2>
-        <ul class="${cls.notificationList}">
-            ${notifications?.map(
-                (notification) => html`
-                    <li>
-                        ${notification.masked === true
-                            ? MaskedNotificationComp({ notification, texts })
-                            : notification.type === "message" &&
-                                !notification.link
-                              ? ArchivableNotification({ notification, texts })
-                              : NotificationComp({ notification, texts })}
-                    </li>
-                `,
-            )}
-        </ul>
+        ${notifications
+            ? html` <ul class="${cls.notificationList}">
+                  ${notifications.map(
+                      (notification) => html`
+                          <li>
+                              ${notification.masked
+                                  ? MaskedNotificationComp({
+                                        notification,
+                                        texts,
+                                    })
+                                  : notification.type === "message" &&
+                                      !notification.link
+                                    ? ArchivableNotification({
+                                          notification,
+                                          texts,
+                                      })
+                                    : NotificationComp({ notification, texts })}
+                          </li>
+                      `,
+                  )}
+              </ul>`
+            : NotificationsErrorView()}
         <a
             class="${cls.allNotificationsLink}"
             href="${process.env.VITE_MIN_SIDE_URL}/tidligere-varsler"