Merge pull request #142 from scientist-softserv/139-refactor-request-list-props

139 refactor request list props

Author: summer-cook

src/compounds/RequestItem/RequestItem.jsx

@@ -6,7 +6,8 @@ import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
 import './request-item.scss'
 
-const RequestItem = React.forwardRef(({ createdAt, description, href, img, index, 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 }
 
@@ -39,13 +40,16 @@ const RequestItem = React.forwardRef(({ createdAt, description, href, img, index
 })
 
 RequestItem.propTypes = {
-  createdAt: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
   index: PropTypes.number,
-  img: PropTypes.shape(Image.propTypes).isRequired,
-  status: PropTypes.shape(Badge.propTypes).isRequired,
-  title: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
+  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,
 }
 
 RequestItem.defaultProps = {

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

@@ -10,15 +10,7 @@ const RequestList = ({ requests }) => (
     <div className='rounded overflow-hidden'>
       {requests.map((req, index) => (
         <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}
-            index={index}
-          />
+          <RequestItem request={req} index={index} />
         </Link>
       ))}
     </div>

src/compounds/index.js

@@ -10,6 +10,7 @@ import Footer2 from './Footer/Footer2'
 import Header from './Header/Header'
 import Item from './Item/Item'
 import ItemGroup from './ItemGroup/ItemGroup'
+import ItemLoading from './Item/ItemLoading'
 import ItemPage from './ItemPage/ItemPage'
 import LinkGroup from './LinkGroup/LinkGroup'
 import LinkedButton from './LinkedButton/LinkedButton'
@@ -28,6 +29,7 @@ export {
   Header,
   Item,
   ItemGroup,
+  ItemLoading,
   ItemPage,
   LinkGroup,
   LinkedButton,