refactor the request list/item props and prop type definitions to account for the react forward ref awkwardness

Author: alishaevn

src/compounds/RequestItem/RequestItem.jsx

@@ -6,7 +6,8 @@ import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
 import './request-item.css'
 
-const RequestItem = React.forwardRef(({ createdAt, description, href, img, title, status, updatedAt }, ref) => {
+const RequestItem = React.forwardRef(({ index, request }, ref) => {
+  const { createdAt, description, href, img, title, status, updatedAt } = request
   const { backgroundColor, text, textColor } = status
   const image = { ...img, height: 70, width: 70 }
 
@@ -33,13 +34,16 @@ const RequestItem = React.forwardRef(({ createdAt, description, href, img, title
 })
 
 RequestItem.propTypes = {
-  createdAt: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  id: PropTypes.number,
-  img: PropTypes.shape(Image.propTypes).isRequired,
-  status: PropTypes.shape(Badge.propTypes).isRequired,
-  title: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
+  index: PropTypes.number,
+  request: PropTypes.shape({
+    createdAt: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    img: PropTypes.shape(Image.propTypes).isRequired,
+    status: PropTypes.shape(Badge.propTypes).isRequired,
+    title: PropTypes.string.isRequired,
+    updatedAt: PropTypes.string.isRequired,
+  }).isRequired,
 }
 
 export default RequestItem

src/compounds/RequestItem/RequestItem.stories.jsx

@@ -11,28 +11,34 @@ const Template = (args) => <RequestItem {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  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',
+  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',
+  }
 }
 
 export const Alternate = Template.bind({})
 Alternate.args = {
-  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',
+  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',
+  }
 }

src/compounds/RequestList/RequestList.jsx

@@ -7,18 +7,13 @@ import RequestItem from '../RequestItem/RequestItem'
 const RequestList = ({ requests }) => (
   <>
     <Title title='My Requests' size='medium' />
-    {requests.map((req) => (
-      <Link key={req.id} href={`${req.href}`} passHref legacyBehavior>
-        <RequestItem
-          createdAt={req.createdAt}
-          description={req.description}
-          img={req.img}
-          title={req.title}
-          status={req.status}
-          updatedAt={req.updatedAt}
-        />
-      </Link>
-    ))}
+    <div className='rounded overflow-hidden'>
+      {requests.map((req, index) => (
+        <Link key={req.id} href={`${req.href}`} passHref legacyBehavior>
+          <RequestItem request={req} index={index} />
+        </Link>
+      ))}
+    </div>
   </>
 )