Refaktorert Toast - Skal legge seg på midten og kunne krysses ut

src/frontend/Felles/Toast/Toast.tsx

@@ -1,17 +1,8 @@
 import React, { useEffect } from 'react';
-
 import styled from 'styled-components';
-
 import { useApp } from '../../App/context/AppContext';
 import { EToast, toastTilTekst } from '../../App/typer/toast';
-import { AlertError, AlertSuccess } from '../Visningskomponenter/Alerts';
-
-const ContainerTopRight = styled.div`
-    z-index: 9999;
-    position: fixed;
-    right: 2rem;
-    top: 4rem;
-`;
+import { AlertMedLukkeknapp } from '../Visningskomponenter/Alerts';
 
 const ContainerTopMiddle = styled.div`
     z-index: 9999;
@@ -22,6 +13,18 @@ const ContainerTopMiddle = styled.div`
     transform: translate(-50%, 0%);
 `;
 
+const ToastAlert: React.FC<{ toast: EToast }> = ({ toast }) => {
+    const variant = toast === EToast.REDIRECT_ANNEN_RELASJON_FEILET ? 'error' : 'success';
+
+    return (
+        <ContainerTopMiddle>
+            <AlertMedLukkeknapp variant={variant} keyProp={toast}>
+                {toastTilTekst[toast]}
+            </AlertMedLukkeknapp>
+        </ContainerTopMiddle>
+    );
+};
+
 export const Toast: React.FC = () => {
     const { toast, settToast } = useApp();
 
@@ -32,33 +35,9 @@ export const Toast: React.FC = () => {
         return () => clearTimeout(timer);
     });
 
-    switch (toast) {
-        case null:
-        case undefined:
-            return null;
-        case EToast.REDIRECT_ANNEN_RELASJON_FEILET:
-            return (
-                <ContainerTopMiddle>
-                    <AlertError>{toastTilTekst[toast]}</AlertError>
-                </ContainerTopMiddle>
-            );
-        case EToast.INNGANGSVILKÅR_GJENBRUKT:
-            return (
-                <ContainerTopMiddle>
-                    <AlertSuccess>{toastTilTekst[toast]}</AlertSuccess>
-                </ContainerTopMiddle>
-            );
-        case EToast.TILDEL_OPPGAVE_VELlYKKET:
-            return (
-                <ContainerTopMiddle>
-                    <AlertSuccess>{toastTilTekst[toast]}</AlertSuccess>
-                </ContainerTopMiddle>
-            );
-        default:
-            return (
-                <ContainerTopRight>
-                    <AlertSuccess>{toastTilTekst[toast]}</AlertSuccess>
-                </ContainerTopRight>
-            );
+    if (toast === null || toast === undefined) {
+        return null;
     }
+
+    return <ToastAlert toast={toast} />;
 };

src/frontend/Felles/Visningskomponenter/Alerts.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, ReactNode, useEffect, useState } from 'react';
 import { Alert, AlertProps } from '@navikt/ds-react';
 
 export const AlertError = forwardRef<HTMLDivElement, Omit<AlertProps, 'variant'>>((props, ref) => {
@@ -14,12 +14,39 @@ export const AlertSuccess = forwardRef<HTMLDivElement, Omit<AlertProps, 'variant
 export const AlertInfo = forwardRef<HTMLDivElement, Omit<AlertProps, 'variant'>>((props, ref) => {
     return <Alert variant={'info'} {...props} ref={ref} />;
 });
+
 export const AlertWarning = forwardRef<HTMLDivElement, Omit<AlertProps, 'variant'>>(
     (props, ref) => {
         return <Alert variant={'warning'} {...props} ref={ref} />;
     }
 );
+
+export const AlertMedLukkeknapp = ({
+    variant,
+    children,
+    keyProp,
+}: {
+    variant: AlertProps['variant'];
+    children: ReactNode;
+    keyProp: string;
+}) => {
+    const [skalVise, settSkalVise] = useState(true);
+
+    useEffect(() => {
+        settSkalVise(true);
+    }, [keyProp]);
+
+    return (
+        skalVise && (
+            <Alert variant={variant} closeButton onClose={() => settSkalVise(false)}>
+                {children}
+            </Alert>
+        )
+    );
+};
+
 AlertError.displayName = 'AlertError';
 AlertSuccess.displayName = 'AlertSuccess';
 AlertInfo.displayName = 'AlertInfo';
 AlertWarning.displayName = 'AlertWarning';
+AlertMedLukkeknapp.displayName = 'AlertMedLukkeknapp';