Merge pull request #109 from scientist-softserv/93-pass-the-service-name

93 initialize request

Author: alishaevn

src/components/AdditionalInfo/AdditionalInfo.jsx

@@ -5,11 +5,10 @@ import {
 } from 'react-bootstrap'
 import { addDays, apiV2CompatibleStrings, convertToBase64 } from '../../resources/utilityFunctions'
 
-const AdditionalInfo = ({ updateRequestForm }) => {
+const AdditionalInfo = ({ defaultRequiredDate, updateRequestForm }) => {
   const [showProposalDate, setShowProposalDate] = useState(true)
   const [files, setFiles] = useState([])
   const fileRef = useRef(null)
-  const oneWeekFromNow = addDays((new Date()), 7).toISOString().slice(0, 10)
   const oneDayFromNow = addDays((new Date()), 1).toISOString().slice(0, 10)
 
   const handleChange = (value) => {
@@ -54,7 +53,7 @@ const AdditionalInfo = ({ updateRequestForm }) => {
                 className='prevent-validation-styles'
                 type='date'
                 min={oneDayFromNow}
-                defaultValue={oneWeekFromNow}
+                defaultValue={defaultRequiredDate}
                 placeholder='Proposals Required By'
                 disabled={showProposalDate === false}
                 onChange={showProposalDate && ((e) => handleChange(e.target.value))}

src/components/NextLink/NextLink.jsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import PropTypes from 'prop-types'
 
 const NextLink = ({ addClass, text, path }) => (
-  <Link href={path} passHref legacyBehavior>
+  <Link href={path} passHref>
     <NextLinkWrapper
       addClass={addClass}
       href={path}
@@ -21,7 +21,10 @@ const NextLinkWrapper = React.forwardRef(({ addClass, text, href }, ref) => (
 NextLink.propTypes = {
   text: PropTypes.string.isRequired,
   addClass: PropTypes.string,
-  path: PropTypes.string.isRequired,
+  path: PropTypes.exact({
+    pathname: PropTypes.string.isRequired,
+    query: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  }).isRequired,
 }
 
 NextLink.defaultProps = {

src/compounds/Item/CardBody.jsx

@@ -8,6 +8,7 @@ import LinkedButton from '../LinkedButton/LinkedButton'
 const CardBody = ({ buttonLink, buttonProps, fromItemGroup, item,
   orientation, titleLink, withButtonLink, withTitleLink }) => {
   const { id, description, name } = item
+
   return (
     <Card.Body className={withButtonLink && 'd-flex flex-column'}>
       <div className={orientation === 'horizontal' ? 'd-block d-md-flex align-items-center justify-content-between' : ''}>
@@ -16,7 +17,7 @@ const CardBody = ({ buttonLink, buttonProps, fromItemGroup, item,
             {(withTitleLink && fromItemGroup) && (
               <NextLink
                 text={name}
-                path={{ pathname: `${titleLink}`, query: { id: `${id}` } }}
+                path={{ pathname: titleLink, query: { id } }}
                 addClass='text-decoration-none link-hover'
               />
             )}
@@ -38,7 +39,7 @@ const CardBody = ({ buttonLink, buttonProps, fromItemGroup, item,
             <LinkedButton
               addClass={`item-button-${orientation} item-link mt-auto`}
               buttonProps={buttonProps}
-              path={fromItemGroup ? { pathname: `${buttonLink}`, query: { id: `${id}` } } : buttonLink}
+              path={{ pathname: buttonLink, query: { id }}}
             />
           </div>
         )}
@@ -57,7 +58,7 @@ CardBody.propTypes = {
   // buttonProps: props => props.withButtonLink
   // ? PropTypes.shape(Button.propTypes)
   // : PropTypes.shape({ ...Button.propTypes, label: PropTypes.string })
-  fromItemGroup: PropTypes.string,
+  fromItemGroup: PropTypes.bool,
   item: PropTypes.shape({
     description: PropTypes.string,
     id: PropTypes.number.isRequired,

src/compounds/Item/Item.jsx

@@ -100,7 +100,7 @@ Item.propTypes = {
     name: PropTypes.string.isRequired,
     slug: PropTypes.string,
   }),
-  fromItemGroup: PropTypes.string,
+  fromItemGroup: PropTypes.bool,
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   titleLink: PropTypes.string,
   withButtonLink: PropTypes.bool,

src/compounds/ItemGroup/ItemGroup.jsx

@@ -38,7 +38,7 @@ const ItemGroup = ({ buttonProps, items, isLoading, orientation, withButtonLink,
                 withButtonLink={withButtonLink}
                 withTitleLink={withTitleLink}
                 href={item.href}
-                fromItemGroup='true'
+                fromItemGroup={true}
               />
             </Col>
           ))

src/compounds/LinkedButton/LinkedButton.jsx

@@ -9,8 +9,10 @@ import './linked-button.css'
  */
 // TODO(alishaevn):
 //   - use this component in Item.jsx instead, but make sure it maintains its current styling
+
+// we are not using the "as" prop in the Link because it removes the ability to access the path query
 const LinkedButton = ({ addClass, buttonProps, path }) => (
-  <Link href={path} passHref legacyBehavior>
+  <Link href={path} passHref>
     <ButtonLinkWrapper
       addClass={addClass}
       buttonProps={buttonProps}
@@ -29,7 +31,10 @@ const { onClick, ...remainingPropTypes } = Button.propTypes
 LinkedButton.propTypes = {
   buttonProps: PropTypes.shape(remainingPropTypes).isRequired,
   addClass: PropTypes.string,
-  path: PropTypes.string.isRequired,
+  path: PropTypes.exact({
+    pathname: PropTypes.string.isRequired,
+    query: PropTypes.shape({ id: PropTypes.number }),
+  }).isRequired,
 }
 
 LinkedButton.defaultProps = {

src/compounds/LinkedButton/LinkedButton.stories.jsx

@@ -9,14 +9,30 @@ export default {
 
 const Template = (args) => <LinkedButton {...args} />
 
-export const Default = Template.bind({})
-
 const { onClick, ...remainingDefaultProps } = Button.defaultProps
+
+export const Default = Template.bind({})
 Default.args = {
   buttonProps: {
     ...remainingDefaultProps,
     label: 'Linked Button',
   },
   addClass: '',
-  path: '/',
+  path: {
+    pathname: '/',
+    query: {},
+  },
+}
+
+export const WithQuery = Template.bind({})
+WithQuery.args = {
+  buttonProps: {
+    ...remainingDefaultProps,
+    label: 'Linked Button',
+  },
+  addClass: '',
+  path: {
+    pathname: '/test',
+    query: { id: 123 },
+  },
 }