Merge pull request #138 from scientist-softserv/155-console-errors

155 console errors

Author: summer-cook

README.md

@@ -25,6 +25,12 @@ Use NPM version `v8.19.2` and please do not mix it with Yarn.
   npm run storybook # starts the storybook app so that we can view/test the components in a UI
   ```
 - A new browser tab will automatically open to "http://localhost:6006/"
+
+#### Troubleshooting
+- If you see the following when starting the app: 
+  - `Error: error:0308010C:digital envelope routines::unsupported`
+  - set the following env variable in your local shell: `export NODE_OPTIONS=--openssl-legacy-provider`
+
 ## Contributing
 <!-- State if you are open to contributions and what your requirements are for accepting them.
  -->

src/components/Button/Button.jsx

@@ -16,7 +16,7 @@ const Button = ({ addClass, backgroundColor, size, label, textColor, type, ...pr
   </button>
 )
 
-Button.propTypes = {
+export const buttonPropTypes = {
   addClass: PropTypes.string,
   backgroundColor: PropTypes.string,
   label: PropTypes.string.isRequired,
@@ -26,6 +26,8 @@ Button.propTypes = {
   type: PropTypes.string,
 }
 
+Button.propTypes = { ...buttonPropTypes }
+
 Button.defaultProps = {
   addClass: '',
   backgroundColor: '#000000',

src/components/NextLink/NextLink.jsx

@@ -23,7 +23,7 @@ NextLink.propTypes = {
   addClass: PropTypes.string,
   path: PropTypes.exact({
     pathname: PropTypes.string.isRequired,
-    query: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    query: PropTypes.shape({}),
   }).isRequired,
 }
 

src/compounds/Document/Document.jsx

@@ -101,14 +101,14 @@ Document.propTypes = {
     lineItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
     requestIdentifier: PropTypes.string.isRequired,
     shippingPrice: PropTypes.string.isRequired,
-    shipTo: {
+    shipTo: PropTypes.shape({
       organizationName: PropTypes.string,
       text: PropTypes.string,
-    }.isRequired,
-    shipFrom: {
+    }).isRequired,
+    shipFrom: PropTypes.shape({
       organizationName: PropTypes.string,
       text: PropTypes.string,
-    }.isRequired,
+    }).isRequired,
     subtotalPrice: PropTypes.string.isRequired,
     taxAmount: PropTypes.string.isRequired,
     terms: PropTypes.string.isRequired,

src/compounds/Item/CardBody.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Card from 'react-bootstrap/card'
-import Link from '../../components/Link/Link'
 import NextLink from '../../components/NextLink/NextLink'
 import LinkedButton from '../LinkedButton/LinkedButton'
 

src/compounds/Item/Item.jsx

@@ -73,6 +73,17 @@ const Item = ({ buttonLink, buttonProps, href, isLoading, item, orientation, tit
   )
 }
 
+export const itemPropTypes = {
+  description: PropTypes.string,
+  id: PropTypes.number.isRequired,
+  img: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  slug: PropTypes.string,
+}
+
 Item.propTypes = {
   buttonLink: PropTypes.string,
   // currently overriding the label on a button from being required in this component,
@@ -88,16 +99,7 @@ Item.propTypes = {
     PropTypes.shape({}),
   ]),
   isLoading: PropTypes.bool,
-  item: PropTypes.shape({
-    description: PropTypes.string,
-    id: PropTypes.number.isRequired,
-    img: PropTypes.shape({
-      src: PropTypes.string.isRequired,
-      alt: PropTypes.string,
-    }).isRequired,
-    name: PropTypes.string.isRequired,
-    slug: PropTypes.string,
-  }),
+  item: PropTypes.shape(itemPropTypes).isRequired,
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   titleLink: PropTypes.string,
   withButtonLink: PropTypes.bool,
@@ -113,9 +115,6 @@ Item.defaultProps = {
   buttonProps: LinkedButton.defaultProps,
   href: '',
   isLoading: false,
-  item: {
-    description: '',
-  },
   orientation: 'vertical',
   titleLink: '',
   withButtonLink: false,

src/compounds/ItemGroup/ItemGroup.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Col, Row } from 'react-bootstrap'
 import Title from '../../components/Title/Title'
-import Item from '../Item/Item'
+import Item, { itemPropTypes } from '../Item/Item'
 import ItemLoading from '../Item/ItemLoading'
 import './item-group.scss'
 
@@ -53,10 +53,10 @@ ItemGroup.propTypes = {
     label: PropTypes.string,
   }),
   items: PropTypes.arrayOf(PropTypes.shape({
-    ...Item.propTypes,
+    ...itemPropTypes,
     imgProps: PropTypes.shape({}),
     style: PropTypes.shape({}),
-  })).isRequired,
+  })),
   isLoading: PropTypes.bool.isRequired,
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   withButtonLink: PropTypes.bool,

src/compounds/ItemGroup/ItemGroup.stories.jsx

@@ -15,6 +15,7 @@ Default.args = {
     backgroundColor: '#A9A9A9',
     label: 'Request this item',
   },
+  isLoading: false,
   items: items.slice(0, 3),
   orientation: 'vertical',
 }
@@ -25,6 +26,7 @@ Horizontal.args = {
     backgroundColor: '#A9A9A9',
     label: 'Request this item',
   },
+  isLoading: false,
   items: items.slice(0, 3),
   orientation: 'horizontal',
 }
@@ -37,6 +39,7 @@ isLoading.args = {
 
 export const withTitleLink = Template.bind({})
 withTitleLink.args = {
+  isLoading: false,
   items: items.slice(0, 6),
   withTitleLink: true,
 }
@@ -47,6 +50,7 @@ withButtonLink.args = {
     backgroundColor: '#A9A9A9',
     label: 'Request this item',
   },
+  isLoading: false,
   items: items.slice(0, 6),
   withButtonLink: true,
 }

src/compounds/LinkedButton/LinkedButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
-import Button from '../../components/Button/Button'
+import Button, { buttonPropTypes } from '../../components/Button/Button'
 import './linked-button.css'
 
 /**
@@ -16,18 +16,23 @@ const LinkedButton = ({ addClass, buttonProps, path }) => (
     <ButtonLinkWrapper
       addClass={addClass}
       buttonProps={buttonProps}
-      href={path}
     />
   </Link>
 )
 
-const ButtonLinkWrapper = React.forwardRef(({ addClass, buttonProps, href }, ref) => (
-  <a href={href} ref={ref} className={addClass}>
-    <Button {...buttonProps} />
-  </a>
-))
+const ButtonLinkWrapper = React.forwardRef(({ ...props }, ref) => {
+  // eslint-disable-next-line react/prop-types
+  const { addClass, buttonProps, href } = props
+
+  return (
+    <a href={href} ref={ref} className={addClass}>
+      <Button {...buttonProps} />
+    </a>
+  )
+})
+
+const { onClick, ...remainingPropTypes } = buttonPropTypes
 
-const { onClick, ...remainingPropTypes } = Button.propTypes
 LinkedButton.propTypes = {
   buttonProps: PropTypes.shape(remainingPropTypes).isRequired,
   addClass: PropTypes.string,
@@ -41,4 +46,15 @@ LinkedButton.defaultProps = {
   addClass: '',
 }
 
+ButtonLinkWrapper.propTypes = {
+  addClass: PropTypes.string,
+  buttonProps: PropTypes.shape(remainingPropTypes).isRequired,
+}
+
+ButtonLinkWrapper.defaultProps = {
+  addClass: '',
+}
+
+ButtonLinkWrapper.displayName = 'Button Link Wrapper'
+
 export default LinkedButton

src/compounds/Messages/MessageCardBody.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 import { Card } from 'react-bootstrap'
 import Link from '../../components/Link/Link'
 
-const MessageCardBody = ({ message, isLatestMessage }) => {
+const MessageCardBody = ({ message }) => {
   const { avatar, body, id, name, attachments, timeSince } = message
   return (
-    <Card key={id} className={`${isLatestMessage ? '' : 'pb-4'} pt-4 flex-row border-0 border-top`}>
+    <Card key={id} className='pb-4 pt-4 flex-row border-0 border-top'>
       <Card.Img variant='left' src={avatar} className='h-25' />
       <Card.Body className='pt-0 pe-0 d-flex flex-column flex-md-row'>
         <div>
@@ -52,7 +52,6 @@ MessageCardBody.propTypes = {
       }),
     ),
   }).isRequired,
-  isLatestMessage: PropTypes.bool.isRequired,
 }
 
 export default MessageCardBody