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)
@@ -60,19 +63,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 }
+}