Get markdown working on browse pages

package.json

@@ -33,6 +33,7 @@
     "next-auth": "^4.20.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^9.0.1",
     "sass": "^1.56.1",
     "start-server-and-test": "^2.0.3",
     "swr": "^1.3.0"

pages/browse/index.js

@@ -6,18 +6,21 @@ import {
   Notice,
   SearchBar,
 } from '@scientist-softserv/webstore-component-library'
+import Markdown from 'react-markdown'
 import {
   buttonBg,
   configureErrors,
   configureServices,
   useFilteredWares,
+  truncateDescription,
 } from '../../utils'
 
 const Browse = ({ session }) => {
   const router = useRouter()
   const [query, setQuery] = useState('')
   const existingQuery = router.query.q
   const accessToken = session?.accessToken
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     if (existingQuery) setQuery(existingQuery)
@@ -46,6 +49,13 @@ const Browse = ({ session }) => {
     )
   }
 
+  // const truncateDescription = (desc = '', maxLength, isOpen) => {
+  //   if (desc.length <= maxLength || isOpen) return { truncated: desc, cutOffIndex: desc.length }
+  //   const lastSpaceIndex = desc.substring(0, maxLength).lastIndexOf(' ')
+  //   const ellipsis = isOpen ? '' : '...'
+  //   return { truncated: desc.slice(0, lastSpaceIndex) + ellipsis, cutOffIndex: lastSpaceIndex }
+  // }
+
   return (
     <div className='container'>
       <SearchBar onSubmit={handleOnSubmit} initialValue={existingQuery} />
@@ -60,19 +70,32 @@ const Browse = ({ session }) => {
           <>
             {(services.length > 0) ? (
               <>
-                {services.map(service => (
-                  <Item
-                    key={service.id}
-                    item={service}
-                    withButtonLink={true}
-                    buttonLink={service.href}
-                    orientation='horizontal'
-                    buttonProps={{
-                      backgroundColor: buttonBg,
-                      label: 'Request this item',
-                    }}
-                  />
-                ))}
+                {services.map(service => {
+                  const { truncated, cutOffIndex } = truncateDescription(service?.description, 300, open)
+                  return (
+                    <Item
+                      key={service.id}
+                      markdownDescriptionTruncated={(
+                        <Markdown>
+                          {truncated}
+                        </Markdown>
+                      )}
+                      markdownDescriptionExtended={(
+                        <Markdown>
+                          {service?.description?.slice(cutOffIndex).trimStart()}
+                        </Markdown>
+                      )}
+                      item={service}
+                      withButtonLink={true}
+                      buttonLink={service.href}
+                      orientation='horizontal'
+                      buttonProps={{
+                        backgroundColor: buttonBg,
+                        label: 'Request this item',
+                      }}
+                    />
+                  )
+                })}
               </>
             ) : (
               <p data-cy='no-results'>

utils/api/configurations.js

@@ -16,6 +16,7 @@ export const configureServices = ({ data, path }) => {
 
     return {
       description: ware.description === '' ? ware.snippet : ware.description,
+      snippet: ware.snippet,
       id: ware.id,
       img,
       name: ware.name,

utils/helpers.js

@@ -82,3 +82,10 @@ export const formatBytes = (bytes, decimals = 2) => {
 
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
+
+export const truncateDescription = (desc = '', maxLength, isOpen) => {
+  if (desc.length <= maxLength || isOpen) return { truncated: desc, cutOffIndex: desc.length }
+  const lastSpaceIndex = desc.substring(0, maxLength).lastIndexOf(' ')
+  const ellipsis = isOpen ? '' : '...'
+  return { truncated: desc.slice(0, lastSpaceIndex) + ellipsis, cutOffIndex: lastSpaceIndex }
+}