@onewelcome/react-lib-components 2.3.0 → 3.0.0

package/src/components/Notifications/NotificationProvider/NotificationContext.test.tsx

@@ -0,0 +1,449 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { useEffect, useState } from "react";
+import { getByTestId, render, renderHook, waitFor } from "@testing-library/react";
+import { NotificationProvider, useNotificationContext } from "./NotificationContext";
+import { Translations } from "./notification.interfaces";
+import { act } from "react-dom/test-utils";
+import { SnackbarProvider } from "../Snackbar/SnackbarProvider/SnackbarProvider";
+import userEvent from "@testing-library/user-event";
+import * as useSnackbarModule from "../Snackbar/useSnackbar";
+
+jest.mock("../../../util/helper", () => ({
+  generateID: () => "test-id",
+  deepMerge: (defaultTranslations: Translations, translations: Translations) => ({
+    ...defaultTranslations,
+    ...translations
+  })
+}));
+
+describe("Notification", () => {
+  describe("useNotificationContext", () => {
+    it("returns the correct context", () => {
+      const { result } = renderHook(() => useNotificationContext(), {
+        wrapper: NotificationProvider
+      });
+      expect(result.current).toEqual({
+        addNotification: expect.any(Function),
+        removeNotification: expect.any(Function),
+        resetNotifications: expect.any(Function),
+        state: {
+          notifications: []
+        }
+      });
+    });
+  });
+
+  describe("Adding and using the notification functions", () => {
+    it("Fires the addNotification and removeNotification function", async () => {
+      const { result } = renderHook(() => useNotificationContext(), {
+        wrapper: NotificationProvider
+      });
+
+      expect(result.current.state.notifications).toEqual([]);
+
+      await act(() => {
+        result.current.addNotification({
+          type: "error",
+          status: 401,
+          message: "Test Error"
+        });
+      });
+
+      expect(result.current.state.notifications).toEqual([
+        {
+          id: "test-id",
+          type: "error",
+          status: 401,
+          message: "Test Error",
+          handled: true
+        }
+      ]);
+
+      await act(() => {
+        result.current.removeNotification("test-id");
+      });
+
+      expect(result.current.state.notifications).toEqual([]);
+    });
+
+    it("Fires the resetNotifications function", async () => {
+      const { result } = renderHook(() => useNotificationContext(), {
+        wrapper: NotificationProvider
+      });
+
+      expect(result.current.state.notifications).toEqual([]);
+
+      await act(() => {
+        result.current.addNotification({
+          type: "error",
+          status: 401,
+          message: "Test Error"
+        });
+      });
+
+      expect(result.current.state.notifications).toEqual([
+        {
+          id: "test-id",
+          type: "error",
+          status: 401,
+          message: "Test Error",
+          handled: true
+        }
+      ]);
+
+      await act(() => {
+        result.current.resetNotifications();
+      });
+
+      expect(result.current.state.notifications).toEqual([]);
+    });
+  });
+
+  describe("Translations", () => {
+    it("Translates the status 400, 401 and 403 translations", async () => {
+      const enqueueErrorSnackbarMock = jest.fn();
+
+      jest.spyOn(useSnackbarModule, "useSnackbar").mockImplementation(() => ({
+        enqueueWarningSnackbar: jest.fn(),
+        enqueueErrorSnackbar: enqueueErrorSnackbarMock,
+        enqueueSuccessSnackbar: jest.fn(),
+        enqueueSnackbar: jest.fn()
+      }));
+
+      const providedTranslations = {
+        general: { error: "TestError" },
+        messages: {
+          unauthorized: "Test unauthorized",
+          badRequest: "Test bad request",
+          forbidden: "Test forbidden"
+        }
+      };
+
+      const TestComponent = () => {
+        const { addNotification, state } = useNotificationContext();
+
+        useEffect(() => {
+          (async () => {
+            if (state.notifications.length === 3) {
+              await waitFor(() =>
+                expect(state.notifications).toEqual([
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 400,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 401,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 403,
+                    message: "TestError",
+                    handled: true
+                  }
+                ])
+              );
+            }
+          })();
+        }, [state.notifications]);
+
+        useEffect(() => {
+          (async () => {
+            await act(() => {
+              addNotification({ type: "error", status: 400 });
+              addNotification({ type: "error", status: 401 });
+              addNotification({ type: "error", status: 403 });
+            });
+          })();
+        }, []);
+
+        return null;
+      };
+
+      render(
+        <NotificationProvider translations={providedTranslations}>
+          <TestComponent />
+        </NotificationProvider>
+      );
+
+      await waitFor(() => {
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledTimes(3);
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test bad request", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test unauthorized", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test forbidden", {
+          onClose: expect.any(Function)
+        });
+      });
+    });
+
+    it("Translates the status 404, 500 and 502 translations", async () => {
+      const enqueueErrorSnackbarMock = jest.fn();
+
+      jest.spyOn(useSnackbarModule, "useSnackbar").mockImplementation(() => ({
+        enqueueWarningSnackbar: jest.fn(),
+        enqueueErrorSnackbar: enqueueErrorSnackbarMock,
+        enqueueSuccessSnackbar: jest.fn(),
+        enqueueSnackbar: jest.fn()
+      }));
+
+      const providedTranslations = {
+        general: { error: "TestError" },
+        messages: {
+          notFound: "Test not found",
+          general: "Test general",
+          unavailable: "Test unavailable"
+        }
+      };
+
+      const TestComponent = () => {
+        const { addNotification, state } = useNotificationContext();
+
+        useEffect(() => {
+          (async () => {
+            if (state.notifications.length === 3) {
+              await waitFor(() =>
+                expect(state.notifications).toEqual([
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 404,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 500,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 502,
+                    message: "TestError",
+                    handled: true
+                  }
+                ])
+              );
+            }
+          })();
+        }, [state.notifications]);
+
+        useEffect(() => {
+          (async () => {
+            await act(() => {
+              addNotification({ type: "error", status: 404 });
+              addNotification({ type: "error", status: 500 });
+              addNotification({ type: "error", status: 502 });
+            });
+          })();
+        }, []);
+
+        return null;
+      };
+
+      render(
+        <NotificationProvider translations={providedTranslations}>
+          <TestComponent />
+        </NotificationProvider>
+      );
+
+      await waitFor(() => {
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledTimes(3);
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test not found", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test general", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test unavailable", {
+          onClose: expect.any(Function)
+        });
+      });
+    });
+
+    it("Translates the status 503, 504 and general if the code isn't recognized", async () => {
+      const enqueueErrorSnackbarMock = jest.fn();
+
+      jest.spyOn(useSnackbarModule, "useSnackbar").mockImplementation(() => ({
+        enqueueWarningSnackbar: jest.fn(),
+        enqueueErrorSnackbar: enqueueErrorSnackbarMock,
+        enqueueSuccessSnackbar: jest.fn(),
+        enqueueSnackbar: jest.fn()
+      }));
+
+      const providedTranslations = {
+        general: { error: "TestError" },
+        messages: {
+          timeout: "Test timeout",
+          general: "Test general",
+          unavailable: "Test unavailable"
+        }
+      };
+
+      const TestComponent = () => {
+        const { addNotification, state } = useNotificationContext();
+
+        useEffect(() => {
+          (async () => {
+            if (state.notifications.length === 3) {
+              await waitFor(() =>
+                expect(state.notifications).toEqual([
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 503,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 504,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 999,
+                    message: "TestError",
+                    handled: true
+                  }
+                ])
+              );
+            }
+          })();
+        }, [state.notifications]);
+
+        useEffect(() => {
+          (async () => {
+            await act(() => {
+              addNotification({ type: "error", status: 503 });
+              addNotification({ type: "error", status: 504 });
+              // @ts-ignore-next-line - We want to test the default case
+              addNotification({ type: "error", status: 999 });
+            });
+          })();
+        }, []);
+
+        return null;
+      };
+
+      render(
+        <NotificationProvider translations={providedTranslations}>
+          <TestComponent />
+        </NotificationProvider>
+      );
+
+      await waitFor(() => {
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledTimes(3);
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test timeout", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test general", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test unavailable", {
+          onClose: expect.any(Function)
+        });
+      });
+    });
+  });
+});
+
+const renderSnackbarProvider = () => {
+  const AppComponent = () => {
+    const { addNotification } = useNotificationContext();
+    const [index, setIndex] = useState(0);
+    return (
+      <div>
+        content
+        <button
+          data-testid="show-success"
+          onClick={() => {
+            addNotification({
+              status: 200,
+              type: "success",
+              title: "Test Success",
+              message: "Test successful request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Success
+        </button>
+        <button
+          data-testid="show-error"
+          onClick={() => {
+            addNotification({
+              status: 400,
+              type: "error",
+              title: "TestError",
+              message: "Test bad request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Error
+        </button>
+      </div>
+    );
+  };
+
+  const queries = render(
+    <SnackbarProvider closeButtonTitle="close">
+      <NotificationProvider>
+        <AppComponent />
+      </NotificationProvider>
+    </SnackbarProvider>
+  );
+
+  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
+  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
+
+  return {
+    ...queries,
+    showSuccessSnackbarBtn,
+    showErrorSnackbarBtn
+  };
+};
+
+describe("Actually shows the snackbars showing up", () => {
+  it("Shows the snackbars", async () => {
+    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, getByText } = renderSnackbarProvider();
+
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showErrorSnackbarBtn);
+
+    await waitFor(() => expect(getByText("Test Success")).toBeInTheDocument());
+    await waitFor(() => expect(getByText("Test bad request")).toBeInTheDocument());
+  });
+});

package/src/components/Notifications/NotificationProvider/NotificationContext.tsx

@@ -0,0 +1,221 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useReducer
+} from "react";
+import {
+  Notification,
+  ErrorNotification,
+  SuccessNotification,
+  Translations,
+  AddNotification
+} from "./notification.interfaces";
+import { defaultTranslations } from "./NotificationService";
+import { useSnackbar } from "../Snackbar/useSnackbar";
+import { deepMerge, generateID } from "../../../util/helper";
+import { DeepPartial } from "../../../interfaces";
+
+interface NotificationState {
+  notifications: Notification<ErrorNotification | SuccessNotification>[];
+}
+
+export interface NotificationAction {
+  type: "add" | "remove" | "handled" | "reset";
+  payload?: Notification<ErrorNotification | SuccessNotification> & {
+    id?: string;
+    handled?: boolean;
+  };
+}
+
+const initialState: NotificationState = {
+  notifications: []
+};
+
+export interface NotificationHandlerProps {
+  translations?: DeepPartial<Translations>;
+  dispatchFn: React.Dispatch<NotificationAction>;
+}
+
+export const NotificationHandler = ({
+  translations = {},
+  dispatchFn
+}: NotificationHandlerProps) => {
+  const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
+  const {
+    state: { notifications }
+  } = useNotificationContext();
+
+  const mergedTranslations = deepMerge<Translations>(defaultTranslations, translations);
+
+  const determineNotificationMessage = (notification: Notification<ErrorNotification>) => {
+    if (notification.message) {
+      return notification.message;
+    }
+
+    switch (notification.status) {
+      case 500:
+        return mergedTranslations.messages.general;
+      case 400:
+        return mergedTranslations.messages.badRequest;
+      case 401:
+        return mergedTranslations.messages.unauthorized;
+      case 403:
+        return mergedTranslations.messages.forbidden;
+      case 404:
+        return mergedTranslations.messages.notFound;
+      case 502:
+      case 503:
+        return mergedTranslations.messages.unavailable;
+      case 504:
+        return mergedTranslations.messages.timeout;
+      default:
+        return mergedTranslations.messages.general;
+    }
+  };
+
+  useEffect(() => {
+    notifications.forEach(notification => {
+      if (
+        notification.status &&
+        notification.handled &&
+        (notification.status === 401 || notification.status === 403)
+      ) {
+        dispatchFn({ type: "remove", payload: { id: notification.id } });
+      } else if (notification.status && !notification.handled && notification.type === "error") {
+        enqueueErrorSnackbar(
+          notification.title ?? mergedTranslations.general.error,
+          determineNotificationMessage(notification as Notification<ErrorNotification>),
+          {
+            onClose: () => dispatchFn({ type: "remove", payload: { id: notification.id } })
+          }
+        );
+        dispatchFn({ type: "handled", payload: { id: notification.id, handled: true } });
+      } else if (notification.title && !notification.handled && notification.type === "success") {
+        enqueueSuccessSnackbar(
+          notification.title ?? mergedTranslations.general.success,
+          notification.message,
+          {
+            onClose: () => dispatchFn({ type: "remove", payload: { id: notification.id } })
+          }
+        );
+
+        dispatchFn({ type: "handled", payload: { id: notification.id, handled: true } });
+      }
+    });
+  }, [notifications.length]);
+
+  return null;
+};
+
+export const NotificationContext = createContext<{
+  state: NotificationState;
+  dispatch: React.Dispatch<NotificationAction>;
+}>({
+  state: initialState,
+  dispatch: () => undefined
+});
+
+export interface Props {
+  children?: ReactNode;
+  translations?: DeepPartial<Translations>;
+}
+
+export const NotificationProvider = ({ children, translations }: Props) => {
+  const [state, dispatch] = useReducer(notificationReducer, initialState);
+
+  return (
+    <NotificationContext.Provider value={{ state, dispatch }}>
+      {children}
+      <NotificationHandler translations={translations} dispatchFn={dispatch} />
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotificationContext = () => {
+  const ctx = useContext(NotificationContext);
+
+  const addNotification = useCallback(
+    (notification: AddNotification) => {
+      ctx.dispatch({ type: "add", payload: notification });
+    },
+    [ctx]
+  );
+
+  const removeNotification = useCallback(
+    (id: string) => {
+      ctx.dispatch({ type: "remove", payload: { id } });
+    },
+    [ctx]
+  );
+
+  const resetNotifications = useCallback(() => {
+    ctx.dispatch({ type: "reset" });
+  }, [ctx]);
+
+  return {
+    state: ctx.state,
+    addNotification,
+    removeNotification,
+    resetNotifications
+  };
+};
+
+export const notificationReducer = (
+  state: NotificationState,
+  action: NotificationAction
+): NotificationState => {
+  switch (action.type) {
+    case "add":
+      return {
+        ...state,
+        notifications: [
+          ...state.notifications,
+          {
+            ...action.payload,
+            id: generateID(),
+            handled: false
+          }
+        ]
+      };
+    case "remove":
+      return {
+        ...state,
+        notifications: state.notifications.filter(
+          notification => notification.id !== action.payload?.id
+        )
+      };
+    case "handled":
+      return {
+        ...state,
+        notifications: state.notifications.map(notification =>
+          notification.id === action.payload?.id ? { ...notification, handled: true } : notification
+        )
+      };
+    case "reset":
+      return {
+        ...state,
+        notifications: []
+      };
+    default:
+      return state;
+  }
+};

package/src/components/Notifications/NotificationProvider/NotificationService.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { Translations } from "./notification.interfaces";
+
+export const defaultTranslations: Translations = {
+  general: {
+    error: "Error",
+    success: "Success"
+  },
+  messages: {
+    general: "Something went wrong. Please try again later.",
+    badRequest: "Bad request",
+    unauthorized: "You are not authorized to perform this action.",
+    forbidden: "You are not allowed to perform this action.",
+    notFound: "The requested resource could not be found.",
+    timeout: "The request timed out.",
+    unavailable: "The server is currently unavailable. Please try again later."
+  }
+};