From 78bd5464145fc1ce38e955b6a38809143354a030 Mon Sep 17 00:00:00 2001 From: gunnsteingarmo Date: Mon, 26 Aug 2024 09:58:05 +0200 Subject: [PATCH 1/4] =?UTF-8?q?Toast=20skal=20alltid=20legge=20seg=20p?= =?UTF-8?q?=C3=A5=20midten=20i=20toppen=20av=20skjermen,=20dette=20er=20fo?= =?UTF-8?q?r=20at=20den=20ikke=20skal=20v=C3=A6re=20i=20veien=20og=20at=20?= =?UTF-8?q?det=20skal=20bli=20mer=20konsist.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/Felles/Toast/Toast.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/frontend/Felles/Toast/Toast.tsx b/src/frontend/Felles/Toast/Toast.tsx index 617e46b88..ce62982e0 100644 --- a/src/frontend/Felles/Toast/Toast.tsx +++ b/src/frontend/Felles/Toast/Toast.tsx @@ -1,18 +1,9 @@ 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; -`; - const ContainerTopMiddle = styled.div` z-index: 9999; margin: auto; @@ -56,9 +47,9 @@ export const Toast: React.FC = () => { ); default: return ( - + {toastTilTekst[toast]} - + ); } }; From 7a06ed8b7f26f0c16b9c745c93f81de48f2c8ef2 Mon Sep 17 00:00:00 2001 From: gunnsteingarmo Date: Mon, 26 Aug 2024 10:14:18 +0200 Subject: [PATCH 2/4] =?UTF-8?q?Refaktorert=20kode=20-=20typen=20alert=20se?= =?UTF-8?q?ttes=20avhengig=20av=20hvilken=20toast=20som=20blir=20brukt.=20?= =?UTF-8?q?Alle=20toast=20skal=20bruke=20ContainerTopMiddle,=20trenger=20i?= =?UTF-8?q?kke=20=C3=A5=20gjenta=20denne=20koden.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/Felles/Toast/Toast.tsx | 44 ++++++++++------------------- 1 file changed, 15 insertions(+), 29 deletions(-) diff --git a/src/frontend/Felles/Toast/Toast.tsx b/src/frontend/Felles/Toast/Toast.tsx index ce62982e0..f1fbdd57c 100644 --- a/src/frontend/Felles/Toast/Toast.tsx +++ b/src/frontend/Felles/Toast/Toast.tsx @@ -13,6 +13,16 @@ const ContainerTopMiddle = styled.div` transform: translate(-50%, 0%); `; +const ToastAlert: React.FC<{ toast: EToast }> = ({ toast }) => { + const Alert = toast === EToast.REDIRECT_ANNEN_RELASJON_FEILET ? AlertError : AlertSuccess; + + return ( + + {toastTilTekst[toast]} + + ); +}; + export const Toast: React.FC = () => { const { toast, settToast } = useApp(); @@ -21,35 +31,11 @@ export const Toast: React.FC = () => { settToast(undefined); }, 5000); return () => clearTimeout(timer); - }); + }, [settToast]); - switch (toast) { - case null: - case undefined: - return null; - case EToast.REDIRECT_ANNEN_RELASJON_FEILET: - return ( - - {toastTilTekst[toast]} - - ); - case EToast.INNGANGSVILKÅR_GJENBRUKT: - return ( - - {toastTilTekst[toast]} - - ); - case EToast.TILDEL_OPPGAVE_VELlYKKET: - return ( - - {toastTilTekst[toast]} - - ); - default: - return ( - - {toastTilTekst[toast]} - - ); + if (toast === null || toast === undefined) { + return null; } + + return ; }; From 866a643148cad595f6ccb9d22ce97caa5b65f88e Mon Sep 17 00:00:00 2001 From: gunnsteingarmo Date: Mon, 26 Aug 2024 11:36:53 +0200 Subject: [PATCH 3/4] =?UTF-8?q?Toaster=20kan=20n=C3=A5=20lukkes.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/Felles/Toast/Toast.tsx | 9 +++-- .../Felles/Visningskomponenter/Alerts.tsx | 39 ++++++++++++++++++- 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/src/frontend/Felles/Toast/Toast.tsx b/src/frontend/Felles/Toast/Toast.tsx index f1fbdd57c..5ed134319 100644 --- a/src/frontend/Felles/Toast/Toast.tsx +++ b/src/frontend/Felles/Toast/Toast.tsx @@ -2,7 +2,7 @@ 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'; +import { AlertErrorMedLukkeknapp, AlertSuccessMedLukkeknapp } from '../Visningskomponenter/Alerts'; const ContainerTopMiddle = styled.div` z-index: 9999; @@ -14,7 +14,10 @@ const ContainerTopMiddle = styled.div` `; const ToastAlert: React.FC<{ toast: EToast }> = ({ toast }) => { - const Alert = toast === EToast.REDIRECT_ANNEN_RELASJON_FEILET ? AlertError : AlertSuccess; + const Alert = + toast === EToast.REDIRECT_ANNEN_RELASJON_FEILET + ? AlertErrorMedLukkeknapp + : AlertSuccessMedLukkeknapp; return ( @@ -31,7 +34,7 @@ export const Toast: React.FC = () => { settToast(undefined); }, 5000); return () => clearTimeout(timer); - }, [settToast]); + }); if (toast === null || toast === undefined) { return null; diff --git a/src/frontend/Felles/Visningskomponenter/Alerts.tsx b/src/frontend/Felles/Visningskomponenter/Alerts.tsx index 954663a33..2a14001cb 100644 --- a/src/frontend/Felles/Visningskomponenter/Alerts.tsx +++ b/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>((props, ref) => { @@ -19,7 +19,44 @@ export const AlertWarning = forwardRef; } ); + +export const AlertErrorMedLukkeknapp = forwardRef>( + (props) => { + return ; + } +); + +export const AlertSuccessMedLukkeknapp = forwardRef>( + (props) => { + return ; + } +); + +const AlertMedLukkeknapp = ({ + children, + variant, +}: { + children?: ReactNode; + variant: AlertProps['variant']; +}) => { + const [skalVise, settSkalVise] = useState(true); + + useEffect(() => { + settSkalVise(true); + }, [children]); + + return ( + skalVise && ( + settSkalVise(false)}> + {children} + + ) + ); +}; + AlertError.displayName = 'AlertError'; AlertSuccess.displayName = 'AlertSuccess'; AlertInfo.displayName = 'AlertInfo'; AlertWarning.displayName = 'AlertWarning'; +AlertErrorMedLukkeknapp.displayName = 'AlertErrorMedLukkeknapp'; +AlertSuccessMedLukkeknapp.displayName = 'AlertSuccessMedLukkeknapp'; From f3ad967bb3f7fbba2d7f0a854f24e8b79848d0b6 Mon Sep 17 00:00:00 2001 From: gunnsteingarmo Date: Mon, 26 Aug 2024 13:26:06 +0200 Subject: [PATCH 4/4] =?UTF-8?q?Sender=20med=20en=20prop=20keyProp=20som=20?= =?UTF-8?q?skal=20brukes=20til=20=C3=A5=20resette=20om=20alerten=20skal=20?= =?UTF-8?q?vises.=20Dette=20er=20for=20=C3=A5=20ikke=20bruke=20reactNode?= =?UTF-8?q?=20som=20dependency=20i=20useEffekt=20som=20kan=20f=C3=B8re=20t?= =?UTF-8?q?il=20u=C3=B8nsket=20oppf=C3=B8rsel.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/Felles/Toast/Toast.tsx | 11 ++++---- .../Felles/Visningskomponenter/Alerts.tsx | 26 ++++++------------- 2 files changed, 13 insertions(+), 24 deletions(-) diff --git a/src/frontend/Felles/Toast/Toast.tsx b/src/frontend/Felles/Toast/Toast.tsx index 5ed134319..b47433076 100644 --- a/src/frontend/Felles/Toast/Toast.tsx +++ b/src/frontend/Felles/Toast/Toast.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import styled from 'styled-components'; import { useApp } from '../../App/context/AppContext'; import { EToast, toastTilTekst } from '../../App/typer/toast'; -import { AlertErrorMedLukkeknapp, AlertSuccessMedLukkeknapp } from '../Visningskomponenter/Alerts'; +import { AlertMedLukkeknapp } from '../Visningskomponenter/Alerts'; const ContainerTopMiddle = styled.div` z-index: 9999; @@ -14,14 +14,13 @@ const ContainerTopMiddle = styled.div` `; const ToastAlert: React.FC<{ toast: EToast }> = ({ toast }) => { - const Alert = - toast === EToast.REDIRECT_ANNEN_RELASJON_FEILET - ? AlertErrorMedLukkeknapp - : AlertSuccessMedLukkeknapp; + const variant = toast === EToast.REDIRECT_ANNEN_RELASJON_FEILET ? 'error' : 'success'; return ( - {toastTilTekst[toast]} + + {toastTilTekst[toast]} + ); }; diff --git a/src/frontend/Felles/Visningskomponenter/Alerts.tsx b/src/frontend/Felles/Visningskomponenter/Alerts.tsx index 2a14001cb..22d3bb991 100644 --- a/src/frontend/Felles/Visningskomponenter/Alerts.tsx +++ b/src/frontend/Felles/Visningskomponenter/Alerts.tsx @@ -14,36 +14,27 @@ export const AlertSuccess = forwardRef>((props, ref) => { return ; }); + export const AlertWarning = forwardRef>( (props, ref) => { return ; } ); -export const AlertErrorMedLukkeknapp = forwardRef>( - (props) => { - return ; - } -); - -export const AlertSuccessMedLukkeknapp = forwardRef>( - (props) => { - return ; - } -); - -const AlertMedLukkeknapp = ({ - children, +export const AlertMedLukkeknapp = ({ variant, + children, + keyProp, }: { - children?: ReactNode; variant: AlertProps['variant']; + children: ReactNode; + keyProp: string; }) => { const [skalVise, settSkalVise] = useState(true); useEffect(() => { settSkalVise(true); - }, [children]); + }, [keyProp]); return ( skalVise && ( @@ -58,5 +49,4 @@ AlertError.displayName = 'AlertError'; AlertSuccess.displayName = 'AlertSuccess'; AlertInfo.displayName = 'AlertInfo'; AlertWarning.displayName = 'AlertWarning'; -AlertErrorMedLukkeknapp.displayName = 'AlertErrorMedLukkeknapp'; -AlertSuccessMedLukkeknapp.displayName = 'AlertSuccessMedLukkeknapp'; +AlertMedLukkeknapp.displayName = 'AlertMedLukkeknapp';