Merge pull request #122 from scientist-softserv/25-error-component

Error component

Author: summer-cook

src/components/Error/Error.jsx

@@ -0,0 +1,52 @@
+/* eslint react/no-array-index-key: 0 */
+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 [show, setShow] = useState(true)
+
+  return (
+    show && (
+      <Container>
+        <Alert className='my-5 text-break' variant={variant} onClose={() => setShow(false)} dismissible={canDismissAlert}>
+          {errorTitle && (
+            <Alert.Heading>{errorTitle}</Alert.Heading>
+          )}
+          {errorText.map((errorMessage, index) => (
+            <p key={index}>{errorMessage}</p>
+          ))}
+          {showBackButton && (
+            <>
+              <hr />
+              <div className='d-flex justify-content-end'>
+                <Button onClick={() => router.back()} variant={`outline-${variant}`}>
+                  Click to return to the previous page.
+                </Button>
+              </div>
+            </>
+          )}
+        </Alert>
+      </Container>
+    )
+  )
+}
+
+Error.propTypes = {
+  canDismissAlert: PropTypes.bool,
+  errors: PropTypes.shape({
+    errorText: PropTypes.string.isRequired,
+    errorTitle: PropTypes.string,
+    variant: PropTypes.string.isRequired,
+  }).isRequired,
+  showBackButton: PropTypes.bool,
+  router: PropTypes.shape({}).isRequired,
+}
+
+Error.defaultProps = {
+  canDismissAlert: false,
+  showBackButton: true,
+}
+
+export default Error

src/components/Error/Error.stories.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Error from './Error'
+
+export default {
+  title: 'Components/Error',
+  component: Error,
+}
+
+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'
+  }
+}
+
+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'
+  },
+  showBackButton: false,
+}

src/components/index.js

@@ -7,6 +7,7 @@ import AdditionalInfo from './AdditionalInfo/AdditionalInfo'
 import BlankRequestForm from './BlankRequestForm/BlankRequestForm'
 import Button from './Button/Button'
 import CollapsibleSection from './CollapsibleSection/CollapsibleSection'
+import Error from './Error/Error'
 import Image from './Image/Image'
 import Link from './Link/Link'
 import Loading from './Loading/Loading'
@@ -22,6 +23,7 @@ export {
   BlankRequestForm,
   Button,
   CollapsibleSection,
+  Error,
   Image,
   Link,
   Loading,

src/compounds/ItemGroup/ItemGroup.jsx

@@ -29,7 +29,7 @@ const ItemGroup = ({ buttonProps, items, isLoading, orientation, withButtonLink,
             )}
           </>
         ) : (
-          items.map((item) => (
+          items?.map((item) => (
             <Col key={item.id}>
               <Item
                 buttonProps={buttonProps}