Merge pull request #137 from scientist-softserv/136-refactor-error

136 refactor error

Author: alishaevn

src/components/Error/Error.jsx

@@ -0,0 +1,77 @@
+/* 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 Notice = ({ alert, buttonProps, dismissible, withBackButton }) => {
+  const [show, setShow] = useState(true)
+  const { title, body, variant } = alert
+  let onClick
+  let text
+  if (withBackButton) ({ onClick, text } = buttonProps)
+
+  return (
+    show && (
+      <Container>
+        <Alert className='my-5 text-break' variant={variant} onClose={() => setShow(false)} dismissible={dismissible}>
+          {title && (
+            <Alert.Heading>{title}</Alert.Heading>
+          )}
+          {body.map((message, index) => {
+            // If "message" is a JSON string, return it as a formatted code block
+            // Otherwise, return it as a regular string
+            const isJSONParsable = () => {
+              try {
+                JSON.parse(message)
+                return true
+              } catch (error) {
+                return false
+              }
+            }
+            const isJavascriptObject = isJSONParsable(message)
+
+            return (
+              isJavascriptObject ? (
+                <pre className='mb-0' key={index}>{message}</pre>
+              ) : (
+                <p className='mb-0' key={index}>{message}</p>
+              )
+            )
+          })}
+          {withBackButton && (
+            <>
+              <hr />
+              <div className='d-flex justify-content-end'>
+                <Button onClick={onClick} variant={`outline-${variant}`}>
+                  {text}
+                </Button>
+              </div>
+            </>
+          )}
+        </Alert>
+      </Container>
+    )
+  )
+}
+
+Notice.propTypes = {
+  alert: PropTypes.shape({
+    body: PropTypes.arrayOf(PropTypes.string).isRequired,
+    title: PropTypes.string,
+    variant: PropTypes.string.isRequired,
+  }).isRequired,
+  buttonProps: PropTypes.shape({
+    onClick: PropTypes.func,
+    text: PropTypes.string,
+  }),
+  dismissible: PropTypes.bool,
+  withBackButton: PropTypes.bool,
+}
+
+Notice.defaultProps = {
+  buttonProps: {},
+  dismissible: true,
+  withBackButton: false,
+}
+
+export default Notice

src/components/Error/Error.stories.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import Notice from './Notice'
+
+export default {
+  title: 'Components/Notice',
+  component: Notice,
+}
+
+const Template = (args) => <Notice {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  alert: {
+    title: '',
+    body: ['A standard alert.'],
+    variant: 'warning',
+  },
+  buttonProps: {},
+  dismissible: true,
+  withBackButton: false,
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  alert: {
+    title: "We're sorry, something went wrong.",
+    body: [
+      JSON.stringify({
+        message: 'There are instances where there may be several api errors on a single page. We would render them all.',
+        name: 'First',
+        status: 422,
+      }, null, 2),
+      JSON.stringify({
+        message: 'This is a second error message.',
+        name: 'Second',
+        status: 422,
+      }, null, 2),
+      JSON.stringify({
+        message: 'This is a third error message.',
+        name: 'Third',
+        status: 422,
+      }, null, 2),
+    ],
+    variant: 'warning',
+  },
+  buttonProps: {
+    onClick: () => console.log('click me!'),
+    text: 'Click to return to the previous page.',
+  },
+  dismissible: false,
+  withBackButton: true,
+}
+
+export const UnauthorizedUser = Template.bind({})
+UnauthorizedUser.args = {
+  alert: {
+    title: 'Unauthorized',
+    body: ['Please sign in to access this page.'],
+    variant: 'info',
+  },
+  buttonProps: {},
+  dismissible: false,
+  withBackButton: false,
+}

src/components/Notice/Notice.jsx

@@ -7,10 +7,10 @@ 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'
+import Notice from './Notice/Notice'
 import SearchBar from './SearchBar/SearchBar'
 import ShippingDetails from './ShippingDetails/ShippingDetails'
 import SocialIcon from './SocialIcon/SocialIcon'
@@ -23,10 +23,10 @@ export {
   BlankRequestForm,
   Button,
   CollapsibleSection,
-  Error,
   Image,
   Link,
   Loading,
+  Notice,
   SearchBar,
   ShippingDetails,
   SocialIcon,