refactor the error component into a more reusable alert component

Author: alishaevn

src/components/Error/Error.jsx

@@ -3,26 +3,31 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Alert, Button, Container } from 'react-bootstrap'
 
-const Error = ({ errors, showBackButton, canDismissAlert, router }) => {
-  const { errorTitle, errorText, variant } = errors
+const Error = ({ alert, buttonProps, dismissible, withBackButton }) => {
   const [show, setShow] = useState(true)
+  const { title, body, variant } = alert
+  let onClick, text
+  if (withBackButton) ({ onClick, text } = buttonProps)
 
   return (
     show && (
       <Container>
-        <Alert className='my-5 text-break' variant={variant} onClose={() => setShow(false)} dismissible={canDismissAlert}>
-          {errorTitle && (
-            <Alert.Heading>{errorTitle}</Alert.Heading>
+        <Alert className='my-5 text-break' variant={variant} onClose={() => setShow(false)} dismissible={dismissible}>
+          {title && (
+            <Alert.Heading>{title}</Alert.Heading>
           )}
-          {errorText.map((errorMessage, index) => (
-            <p key={index}>{errorMessage}</p>
+          {body.map((text, index) => (
+            <p className='mb-0' key={index}>{text}</p>
           ))}
-          {showBackButton && (
+          {withBackButton && (
             <>
               <hr />
               <div className='d-flex justify-content-end'>
-                <Button onClick={() => router.back()} variant={`outline-${variant}`}>
+                {/* <Button onClick={() => router.back()} variant={`outline-${variant}`}>
                   Click to return to the previous page.
+                </Button> */}
+                <Button onClick={onClick} variant={`outline-${variant}`}>
+                  {text}
                 </Button>
               </div>
             </>
@@ -34,19 +39,25 @@ const Error = ({ errors, showBackButton, canDismissAlert, router }) => {
 }
 
 Error.propTypes = {
-  canDismissAlert: PropTypes.bool,
-  errors: PropTypes.shape({
-    errorText: PropTypes.arrayOf(PropTypes.string).isRequired,
-    errorTitle: PropTypes.string,
+  alert: PropTypes.shape({
+    body: PropTypes.arrayOf(PropTypes.string).isRequired,
+    title: PropTypes.string,
     variant: PropTypes.string.isRequired,
   }).isRequired,
-  showBackButton: PropTypes.bool,
-  router: PropTypes.shape({}).isRequired,
+  buttonProps: PropTypes.shape({
+    onClick: PropTypes.func,
+    text: PropTypes.string,
+  }),
+  dismissible: PropTypes.bool,
+  withBackButton: PropTypes.bool,
 }
 
 Error.defaultProps = {
-  canDismissAlert: false,
-  showBackButton: true,
+  buttonProps: {
+    text: 'Click to return to the previous page.'
+  },
+  dismissible: true,
+  withBackButton: false,
 }
 
 export default Error

src/components/Error/Error.stories.jsx

@@ -10,20 +10,41 @@ const Template = (args) => <Error {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  errors: {
-    errorTitle: 'Errors:',
-    errorText: ['this is an error in dev. error block would go here', 'this is a second error message', 'this is a third error message'],
-    variant: 'danger'
-  }
+  alert: {
+    title: '',
+    body: ['A standard alert.'],
+    variant: 'warning'
+  },
+  buttonProps: {
+    text: 'Click to return to the previous page.'
+  },
+  dismissible: true,
+  withBackButton: false,
+}
+
+export const WithError = Template.bind({})
+WithError.args = {
+  alert: {
+    title: "We're sorry, something went wrong.",
+    body: ['This is how an error would present in dev. There are instances where there may be several api errors on a single page. We would render them all.', 'This is a second error message.', 'This is a third error message.'],
+    variant: 'warning'
+  },
+  buttonProps: {
+    onClick: () => console.log('click me!'),
+    text: 'Click to return to the previous page.'
+  },
+  dismissible: false,
+  withBackButton: true,
 }
 
-export const Alternate = Template.bind({})
-Alternate.args = {
-  canDismissAlert: true,
-  errors: {
-    errorTitle: "We're sorry, something went wrong.",
-    errorText: ['Please refresh the page and try again. this is an error in prod'],
-    variant: 'danger'
+export const UnauthorizedUser = Template.bind({})
+UnauthorizedUser.args = {
+  alert: {
+    title: 'Unauthorized',
+    body: ['Please sign in to access this page.'],
+    variant: 'info'
   },
-  showBackButton: false,
+  buttonProps: {},
+  dismissible: false,
+  withBackButton: false,
 }