Merge branch 'main' of https://github.com/scientist-softserv/webstore-component-library into 152-remove-add-attachments

Author: summer-cook

src/compounds/RequestItem/RequestItem.jsx

@@ -6,8 +6,8 @@ import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
 import './request-item.scss'
 
-const RequestItem = React.forwardRef(({ backgroundColor, index, request }, ref) => {
-  const { createdAt, description, href, img, title, status, updatedAt } = request
+const RequestItem = React.forwardRef(({ backgroundColor, href, index, request }, ref) => {
+  const { createdAt, description, img, title, status, updatedAt } = request
   const { text, textColor } = status
   const image = { ...img, height: 70, width: 70 }
   const bg = index % 2 === 0 ? `bg-${backgroundColor}` : `bg-${backgroundColor}-1`
@@ -42,7 +42,10 @@ const RequestItem = React.forwardRef(({ backgroundColor, index, request }, ref)
 export const requestPropTypes = {
   createdAt: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  href: PropTypes.string.isRequired,
+  href: PropTypes.exact({
+    pathname: PropTypes.string.isRequired,
+    query: PropTypes.shape({}),
+  }).isRequired,
   img: PropTypes.shape(Image.propTypes).isRequired,
   status: PropTypes.shape(Badge.propTypes).isRequired,
   title: PropTypes.string.isRequired,

src/compounds/RequestItem/RequestItem.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import RequestItem from './RequestItem'
-import { defaultImage } from '../../resources/args'
+import { requests } from '../../resources/args'
 
 export default {
   title: 'Compounds/RequestItem',
@@ -9,36 +9,17 @@ export default {
 
 const Template = (args) => <RequestItem {...args} />
 
+// we are manually passing in the "href" value only for story purposes. in an actual use case, the React.forwardRef handles creating the correct "href" value it gets passed from next/link
 export const Default = Template.bind({})
 Default.args = {
   index: 0,
-  request: {
-    createdAt: 'September 9, 2022',
-    description: 'Does the Company offer services related to Flow Cytometry?',
-    href: '/request/F575C4',
-    img: defaultImage,
-    title: 'F575C4: Assay Depot Coffee Mug',
-    status: {
-      text: 'Vendor Review',
-    },
-    updatedAt: 'September 9, 2022 at 9:21 am',
-  }
+  request: requests[0],
+  href: requests[0].href.pathname,
 }
 
 export const Alternate = Template.bind({})
 Alternate.args = {
   index: 1,
-  request: {
-    createdAt: 'September 9, 2022',
-    description: 'Does the Company offer services related to Flow Cytometry?',
-    href: '/request/F575C4',
-    img: defaultImage,
-    title: 'F575C4: Assay Depot Coffee Mug',
-    status: {
-      backgroundColor: '#DEAF17',
-      text: 'Work In Progress',
-      textColor: '#FFFFFF',
-    },
-    updatedAt: 'November 16, 2022 at 4:45 pm',
-  }
+  request: requests[1],
+  href: requests[1].href.pathname,
 }

src/compounds/RequestList/RequestList.jsx

@@ -17,7 +17,7 @@ const RequestList = ({ backgroundColor, requests }) => (
           or start a new general request by clicking the <b>"Initiate a Request"</b> button above.
         </p>
       ) : (requests.map((req, index) => (
-        <Link key={req.id} href={`${req.href}`} passHref legacyBehavior>
+        <Link key={req.uuid} href={req.href} passHref>
           <RequestItem request={req} index={index} backgroundColor={backgroundColor} />
         </Link>
       )))}

src/resources/args.js

@@ -219,7 +219,10 @@ export const requests = [
   {
     createdAt: 'September 9, 2022',
     description: 'Does the Company offer services related to Flow Cytometry?',
-    href: '/request/F575C4',
+    href: {
+      pathname: '/request/ui18-8ahr-38na-89as',
+      query: {},
+    },
     id: 1,
     img,
     status: {
@@ -232,7 +235,10 @@ export const requests = [
     createdAt: 'November 15, 2022',
     // eslint-disable-next-line max-len
     description: 'General Information When do you plan to work with this supplier? Urgently Name of supplier: Alisha Supplier web address: http://scientist.com Is this new supplier onboarding request related to any of the following areas: Research area: In Vivo Contact Information Supplier contact name: Alisha Evans Supplier email a...',
-    href: '/request/706D8F',
+    href: {
+      pathname: '/request/89as-ui18-8ahr-38na',
+      query: {},
+    },
     id: 2,
     img,
     status: {