fix rerender/redraw when feedback alert is removed

Author: magnurh-cx

packages/bygger/src/components/MessageAlerts.tsx

@@ -1,10 +1,11 @@
 import { Close } from '@navikt/ds-icons';
 import { Alert, BodyShort, Button } from '@navikt/ds-react';
 import { makeStyles, navCssVariables } from '@navikt/skjemadigitalisering-shared-components';
-import { Message } from '../hooks/useMessageQueue';
+import { Message } from '../context/notifications/messageQueueReducer';
 
 interface AlertProps {
   message: Message;
+  clearMessage?: () => void;
 }
 
 const useStyles = makeStyles({
@@ -36,7 +37,7 @@ export const SuccessAlert = ({ message }: AlertProps) => {
   );
 };
 
-export const ErrorAlert = ({ message }: AlertProps) => {
+export const ErrorAlert = ({ message, clearMessage }: AlertProps) => {
   const styles = useStyles();
   return (
     <Alert variant="error" className={styles.alert}>
@@ -45,7 +46,7 @@ export const ErrorAlert = ({ message }: AlertProps) => {
         <Button
           variant="tertiary"
           icon={<Close aria-hidden />}
-          onClick={() => message.clear()}
+          onClick={clearMessage}
           type="button"
           aria-label="Lukk feilmelding"
         />
@@ -54,7 +55,7 @@ export const ErrorAlert = ({ message }: AlertProps) => {
   );
 };
 
-export const WarningAlert = ({ message }: AlertProps) => {
+export const WarningAlert = ({ message, clearMessage }: AlertProps) => {
   const styles = useStyles();
   return (
     <Alert variant="warning" className={styles.alert}>
@@ -63,7 +64,7 @@ export const WarningAlert = ({ message }: AlertProps) => {
         <Button
           variant="tertiary"
           icon={<Close aria-hidden />}
-          onClick={() => message.clear()}
+          onClick={clearMessage}
           type="button"
           aria-label="Lukk advarsel"
         />

packages/bygger/src/components/Navbar/components/NotificationDropdown.tsx

@@ -24,7 +24,7 @@ const NotificationDropdown = () => {
       <InternalHeader.Button as={Dropdown.Toggle} aria-label="Notifikasjoner">
         <InformationFilled color={navCssVariables.navWarning} fontSize="1.5rem" role="presentation" />
       </InternalHeader.Button>
-      <Dropdown.Menu className={`${styles.notificationsMenu}`} onClose={() => clearAll()}>
+      <Dropdown.Menu className={`${styles.notificationsMenu}`} onClose={clearAll}>
         <Dropdown.Menu.List>
           {messages.map(({ title, message, type, id, created }) => (
             <Alert key={id} variant={type} className={styles.messagePanel}>

packages/bygger/src/components/UserFeedback.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from '@navikt/skjemadigitalisering-shared-components';
 import { useFeedbackMessages } from '../context/notifications/FeedbackContext';
-import { Message } from '../hooks/useMessageQueue';
+import { Message } from '../context/notifications/messageQueueReducer';
 import { ErrorAlert, SuccessAlert, WarningAlert } from './MessageAlerts';
 
 const useStyles = makeStyles({
@@ -15,24 +15,25 @@ const useStyles = makeStyles({
 });
 
 const UserFeedback = () => {
-  const feedbackMessages = useFeedbackMessages();
+  const { messages, clearMessage } = useFeedbackMessages();
   const style = useStyles();
 
   const renderUserFeedback = (message: Message) => {
+    const removeMessage = () => clearMessage(message.id);
     switch (message.type) {
       case 'success':
-        setTimeout(() => message.clear(), 5000);
+        setTimeout(removeMessage, 5000);
         return <SuccessAlert key={message.id} message={message} />;
       case 'warning':
-        return <WarningAlert key={message.id} message={message} />;
+        return <WarningAlert key={message.id} message={message} clearMessage={removeMessage} />;
       case 'error':
-        return <ErrorAlert key={message.id} message={message} />;
+        return <ErrorAlert key={message.id} message={message} clearMessage={removeMessage} />;
     }
   };
 
   return (
     <aside className={style.alertstripe} aria-live="polite">
-      {feedbackMessages.map(renderUserFeedback)}
+      {messages.map(renderUserFeedback)}
     </aside>
   );
 };

packages/bygger/src/context/notifications/FeebackContext.test.tsx

@@ -55,17 +55,17 @@ describe('FeedbackContext', () => {
     });
 
     it('returns emitted messages in reverse order of when it was added', () => {
-      const messages = getLatest(onMessagesUpdated);
+      const { messages } = getLatest(onMessagesUpdated);
       expect(messages[0].message).toBe('Warning message');
       expect(messages[1].message).toBe('Error message');
       expect(messages[2].message).toBe('Success message');
     });
 
     it('returns an updated list when a message is removed', () => {
-      const messages = getLatest(onMessagesUpdated);
+      const { messages, clearMessage } = getLatest(onMessagesUpdated);
       expect(messages).toHaveLength(3);
-      act(() => messages[1].clear());
-      const updatedMessages = getLatest(onMessagesUpdated);
+      act(() => clearMessage(messages[1].id));
+      const { messages: updatedMessages } = getLatest(onMessagesUpdated);
       expect(updatedMessages).toHaveLength(2);
     });
   });

packages/bygger/src/context/notifications/FeedbackContext.tsx

@@ -1,5 +1,10 @@
-import React, { createContext, useContext, useEffect } from 'react';
-import useMessageQueue, { Message } from '../../hooks/useMessageQueue';
+import React, { createContext, useContext, useEffect, useMemo, useReducer } from 'react';
+import messageQueueReducer, { Message } from './messageQueueReducer';
+
+type FeedbackMessageContextValue = {
+  messages: Message[];
+  clearMessage: (id: string) => void;
+};
 
 const defaultEmit = (_message: string) => {};
 
@@ -8,31 +13,36 @@ export const FeedbackEmitContext = createContext({
   error: defaultEmit,
   warning: defaultEmit,
 });
-const FeedbackMessageContext = createContext<Message[]>([]);
+const FeedbackMessageContext = createContext<FeedbackMessageContextValue>({ messages: [], clearMessage: () => {} });
 
 const FeedbackProvider = ({ children }: { children: React.ReactElement }) => {
-  const [messages, messageQueue] = useMessageQueue();
+  const [messages, dispatch] = useReducer(messageQueueReducer, []);
 
   useEffect(() => {
     const callback = (error: PromiseRejectionEvent) => {
       if (error?.reason?.message) {
-        messageQueue.push({ message: error.reason.message, type: 'error' });
+        dispatch({ type: 'ADD_MESSAGE', payload: { message: error.reason.message, type: 'error' } });
       }
     };
     window.addEventListener('unhandledrejection', callback);
     return () => window.removeEventListener('unhandledrejection', callback);
-  }, [messageQueue]);
+  }, []);
+
+  const emit = useMemo(
+    () => ({
+      success: (message: string) => dispatch({ type: 'ADD_MESSAGE', payload: { message, type: 'success' } }),
+      warning: (message: string) => dispatch({ type: 'ADD_MESSAGE', payload: { message, type: 'warning' } }),
+      error: (message: string) => dispatch({ type: 'ADD_MESSAGE', payload: { message, type: 'error' } }),
+    }),
+    [],
+  );
 
-  const emit = {
-    success: (message: string) => messageQueue.push({ message, type: 'success' }),
-    warning: (message: string) => messageQueue.push({ message, type: 'warning' }),
-    error: (message: string) => messageQueue.push({ message, type: 'error' }),
-  };
+  const clearMessage = (id: string) => dispatch({ type: 'REMOVE_MESSAGE', payload: { id } });
 
   return (
-    <FeedbackEmitContext.Provider value={emit}>
-      <FeedbackMessageContext.Provider value={messages}>{children}</FeedbackMessageContext.Provider>
-    </FeedbackEmitContext.Provider>
+    <FeedbackMessageContext.Provider value={{ messages, clearMessage }}>
+      <FeedbackEmitContext.Provider value={emit}>{children}</FeedbackEmitContext.Provider>
+    </FeedbackMessageContext.Provider>
   );
 };
 

packages/bygger/src/context/notifications/NotificationsContext.tsx

@@ -1,7 +1,7 @@
 import { useAppConfig } from '@navikt/skjemadigitalisering-shared-components';
 import Pusher from 'pusher-js';
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
-import useMessageQueue, { Message } from '../../hooks/useMessageQueue';
+import React, { createContext, useContext, useEffect, useMemo, useReducer } from 'react';
+import messageQueueReducer, { Message } from './messageQueueReducer';
 
 export const CHANNEL = 'fyllut-deployment';
 export const EVENT = { success: 'success', failure: 'failure' };
@@ -22,29 +22,31 @@ const createPusher = (config) => {
 };
 
 const PusherNotificationsProvider = ({ children }: { children: React.ReactElement }) => {
-  const [messages, messageQueue] = useMessageQueue();
+  const [messages, dispatch] = useReducer(messageQueueReducer, []);
   const { config } = useAppConfig();
   const pusher = useMemo(() => createPusher(config), [config]);
 
   useEffect(() => {
     const fyllutDeploymentChannel = pusher.subscribe(CHANNEL);
     fyllutDeploymentChannel.bind(EVENT.success, ({ title, message }) =>
-      messageQueue.push({ title, message, type: 'success' }),
+      dispatch({ type: 'ADD_MESSAGE', payload: { title, message, type: 'success' } }),
     );
     fyllutDeploymentChannel.bind(EVENT.failure, ({ title, message }) =>
-      messageQueue.push({ title, message, type: 'error' }),
+      dispatch({ type: 'ADD_MESSAGE', payload: { title, message, type: 'error' } }),
     );
     return () => {
       fyllutDeploymentChannel.unbind(EVENT.success);
       fyllutDeploymentChannel.unbind(EVENT.failure);
       pusher.unsubscribe(CHANNEL);
       pusher.disconnect();
     };
-  }, [pusher, messageQueue]);
+  }, [pusher]);
+
+  const clearAll = () => dispatch({ type: 'CLEAR_ALL' });
 
   const value = {
     messages,
-    clearAll: () => messageQueue.clearAll(),
+    clearAll,
   };
 
   return <PusherNotificationContext.Provider value={value}>{children}</PusherNotificationContext.Provider>;

packages/bygger/src/context/notifications/messageQueueReducer.tsx

@@ -0,0 +1,27 @@
+import { v4 as uuidv4 } from 'uuid';
+
+type MessageType = 'success' | 'warning' | 'error';
+type MessageIn = { title?: string; message: string; type: MessageType };
+export type Message = MessageIn & { id: string; created: string };
+
+type Action =
+  | { type: 'ADD_MESSAGE'; payload: MessageIn }
+  | { type: 'REMOVE_MESSAGE'; payload: { id: string } }
+  | { type: 'CLEAR_ALL' };
+
+const getInitValues = (): Pick<Message, 'id' | 'created'> => ({ id: uuidv4(), created: new Date().toLocaleString() });
+
+const messageReducer = (state: Message[], action: Action): Message[] => {
+  switch (action.type) {
+    case 'ADD_MESSAGE':
+      return [{ ...getInitValues(), ...action.payload }, ...state];
+    case 'REMOVE_MESSAGE':
+      return state.filter((message) => message.id !== action.payload.id);
+    case 'CLEAR_ALL':
+      return [];
+    default:
+      return state;
+  }
+};
+
+export default messageReducer;