From c4055826459ec3cb6530f92612c7fdefb1df9561 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Fri, 28 Jun 2024 10:10:50 +0000 Subject: [PATCH] style(SLB-438): fix tests annd TS errors --- .../components/Molecules/Messages.stories.tsx | 13 +- .../ui/src/components/Molecules/Messages.tsx | 159 +++++++++--------- 2 files changed, 94 insertions(+), 78 deletions(-) diff --git a/packages/ui/src/components/Molecules/Messages.stories.tsx b/packages/ui/src/components/Molecules/Messages.stories.tsx index a342e9db5..58574999c 100644 --- a/packages/ui/src/components/Molecules/Messages.stories.tsx +++ b/packages/ui/src/components/Molecules/Messages.stories.tsx @@ -1,4 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; import { Messages as Component } from './Messages'; @@ -21,7 +22,17 @@ export const Info: StoryObj = { '

This is a Success message, linked item

', ], messageComponents: [ - 'This page is not available in the requested language.', +
+ {'This page is not available in the requested language.'}{' '} + { + window.history.back(); + }} + > + {'Go back'} + +
, ], }, }; diff --git a/packages/ui/src/components/Molecules/Messages.tsx b/packages/ui/src/components/Molecules/Messages.tsx index 32b8236fb..eedd7c9fe 100644 --- a/packages/ui/src/components/Molecules/Messages.tsx +++ b/packages/ui/src/components/Molecules/Messages.tsx @@ -14,9 +14,13 @@ export function Messages(props: { messageComponents?: Array; }) { const [displayMessages, setDisplayMessages] = useState([]); + const [messageComponents, setMessageComponents] = React.useState< + Array + >([]); useEffect(() => { setDisplayMessages(props.messages); + props.messageComponents && setMessageComponents(props.messageComponents); }, [props.messages]); const handleRemoveMessage = (index: number) => { @@ -29,98 +33,99 @@ export function Messages(props: {
{buildMessages(displayMessages, handleRemoveMessage)} - {/* {buildMessages(displayMessages, setDisplayMessages)} */} + {buildMessages(messageComponents)}
); } -// export const buildMessages = (messages: Array) => ( -// <> -// {messages.map((message, index) => ( -// -// ))} -// -// ); export const buildMessages = ( - messages: Array, + messages: Array | Array, handleRemoveMessage?: (index: number) => void, ) => { - return messages.map((message, index) => ( -
- - Info -
- + {messages.map((message, index) => ( +
) => { - return ( -
  • - {children} -
    • - ); - }, - }} - /> -
    - {handleRemoveMessage && ( - - )} -
    - )); + Info +
    + {typeof message === 'string' ? ( + ) => { + return ( +
  • + {children} +
    • + ); + }, + }} + /> + ) : ( + message + )} +
    + {handleRemoveMessage && ( + + )} +
    + ))} + + ); }; export const storeMessages = (messages: Array): void => {