@aarhus-university/au-lib-react-components 10.8.0 → 10.9.0

package/__tests__/jest/AUErrorComponent.test.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUErrorComponent from '../../src/components/AUErrorComponent';
+
+const auError: AU.IError = {
+  header: 'Our own custom error',
+  message: 'With a nice header and descriptive error message',
+  status: 500,
+};
+
+const fetchError1: FetchBaseQueryError = {
+  status: 'FETCH_ERROR',
+  error: 'Sum Ting Wong',
+};
+
+const fetchError2: FetchBaseQueryError = {
+  status: 500,
+  data: {
+    status: 'Error',
+    message: 'Sum Ting Wong',
+  },
+};
+
+const serializedError: SerializedError = {
+  code: '500',
+  message: 'Sum Ting Wong',
+  name: 'Some kind of error',
+  stack: 'Some kind of stack trace',
+};
+
+describe('<AUErrorComponent />', () => {
+  it('renders an AU custom error without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        error={auError}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBeInTheDocument();
+    expect(p?.innerHTML).toBe(auError.message);
+  });
+
+  it('renders an AU custom error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        error={auError}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    expect(header?.innerHTML).toBe(`${auError.status}: ${auError.header}`);
+  });
+
+  it('renders a fetch error without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError1}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(fetchError1.error);
+  });
+
+  it('renders a fetch error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError1}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(fetchError1.status);
+    expect(p?.innerHTML).toBe(fetchError1.error);
+  });
+
+  it('renders a fetch error with stringified text without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError2}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
+  });
+
+  it('renders a fetch error with stringified text with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError2}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(`${fetchError2.status}`);
+    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
+  });
+
+  it('renders a serialized error with without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        serializedError={serializedError}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(serializedError.message);
+  });
+
+  it('renders a serialized error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        serializedError={serializedError}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(serializedError.code);
+    expect(p?.innerHTML).toBe(serializedError.message);
+  });
+});

package/__tests__/jest/AUNotificationComponent.test.tsx

@@ -6,7 +6,7 @@ import '@testing-library/jest-dom';
 import AUNotificationComponent from '../../src/components/AUNotificationComponent';
 import AUButtonComponent from '../../src/components/AUButtonComponent';
 
-describe('<AUNotification />', () => {
+describe('<AUNotificationComponent />', () => {
   it('renders a notification without a header but with a paragraph', () => {
     const { container } = render(
       <AUNotificationComponent

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.8.0",
+  "version": "10.9.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -69,7 +69,8 @@
   },
   "dependencies": {
     "@aarhus-university/au-designsystem-delphinus": "0.29.0",
-    "@aarhus-university/types": "^0.4.0",
+    "@aarhus-university/types": "^0.5.0",
+    "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",
     "@types/react": "^18.0.14",

package/src/components/AUErrorComponent.tsx

@@ -0,0 +1,78 @@
+import React, { FC } from 'react';
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
+import AUNotificationComponent from './AUNotificationComponent';
+
+interface AUErrorComponentProps {
+  error?: AU.IError,
+  fetchError?: FetchBaseQueryError,
+  serializedError?: SerializedError,
+  withStatus?: boolean,
+}
+
+const AUErrorComponent: FC<AUErrorComponentProps> = ({
+  error: auError,
+  fetchError,
+  serializedError,
+  withStatus,
+}: AUErrorComponentProps) => {
+  if (auError) {
+    const { status, header, message } = auError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={`${withStatus ? `${status}: ` : ''}${header}`}
+        content={[
+          <p>{message}</p>,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'error' in fetchError) {
+    const { status, error } = fetchError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? status : undefined}
+        content={[
+          <p>{error}</p>,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'data' in fetchError) {
+    const { status, data } = fetchError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? `${status}` : undefined}
+        content={[
+          <p>{JSON.stringify(data)}</p>,
+        ]}
+      />
+    );
+  }
+  if (serializedError && 'message' in serializedError) {
+    const { code, message } = serializedError;
+    return (
+      <AUNotificationComponent
+        type="warning"
+        header={withStatus ? code : undefined}
+        content={[
+          <p>{message}</p>,
+        ]}
+      />
+    );
+  }
+  return null;
+};
+
+AUErrorComponent.defaultProps = {
+  error: undefined,
+  fetchError: undefined,
+  serializedError: undefined,
+  withStatus: false,
+};
+
+AUErrorComponent.displayName = 'AUErrorComponent';
+export default AUErrorComponent;

package/src/components/AUNotificationComponent.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 
-const AUNotificationsComponent: FC<AUNotificationsComponentProps> = ({
+const AUNotificationComponent: FC<AUNotificationComponentProps> = ({
   header,
   content,
   actions,
   type,
   classNames,
-}: AUNotificationsComponentProps) => {
+}: AUNotificationComponentProps) => {
   const typeClass = type === 'default' ? '' : `notification--${type}`;
   return (
     <div className={[
@@ -31,12 +31,12 @@ const AUNotificationsComponent: FC<AUNotificationsComponentProps> = ({
   );
 };
 
-AUNotificationsComponent.defaultProps = {
+AUNotificationComponent.defaultProps = {
   header: null,
   actions: [],
   type: 'default',
   classNames: [],
 };
 
-AUNotificationsComponent.displayName = 'AUNotificationsComponent';
-export default AUNotificationsComponent;
+AUNotificationComponent.displayName = 'AUNotificationComponent';
+export default AUNotificationComponent;

package/stories/AUErrorComponent.stories.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AUErrorComponent from '../src/components/AUErrorComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Error',
+  component: AUErrorComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => { // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div>
+          {Story()}
+        </div>
+      );
+    }
+  ]
+} as ComponentMeta<typeof AUErrorComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUErrorComponent> = (args) => <AUErrorComponent {...args} />;
+
+export const AU_Error = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+AU_Error.args = {
+  error: {
+    header: 'Our own custom error',
+    message: 'With a nice header and descriptive error message',
+    status: 500,
+  },
+};
+
+export const AU_Error_With_Status = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+AU_Error_With_Status.args = {
+  error: {
+    header: 'Our own custom error',
+    message: 'With a nice header and descriptive error message',
+    status: 500,
+  },
+  withStatus: true,
+};
+
+export const Fetch_Error = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Fetch_Error.args = {
+  fetchError: {
+    error: 'Something horrible has happened on the server...',
+    status: 'FETCH_ERROR',
+  },
+};
+
+export const Fetch_Error_With_Status = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Fetch_Error_With_Status.args = {
+  fetchError: {
+    error: 'Something horrible has happened on the server...',
+    status: 'FETCH_ERROR',
+  },
+  withStatus: true,
+};
+
+export const Fetch_Error_With_Data = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Fetch_Error_With_Data.args = {
+  fetchError: {
+    data: {
+      status: 'Error',
+      message: 'This could be anything...',
+      somethingElse: 'Even this...',
+    },
+    status: 500,
+  },
+  withStatus: false,
+};
+
+export const Fetch_Error_With_Data_And_Status = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Fetch_Error_With_Data_And_Status.args = {
+  fetchError: {
+    data: {
+      status: 'Error',
+      message: 'This could be anything...',
+      somethingElse: 'Even this...',
+    },
+    status: 500,
+  },
+  withStatus: true,
+};
+
+export const Serialized_Error = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Serialized_Error.args = {
+  serializedError: {
+    message: 'Something funky has happened in the code...',
+    code: '500',
+  },
+  withStatus: false,
+};
+
+export const Serialized_Error_With_Code = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Serialized_Error_With_Code.args = {
+  serializedError: {
+    message: 'Something funky has happened in the code...',
+    code: '500',
+  },
+  withStatus: true,
+};
+