Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import React, { useState } from 'react';

import { Typography } from '@mui/material'

import { Typography } from '@mui/material';

import { parse } from '@utils'

import { parse } from '@utils';

export default function FeedDescription({ description = '' }) {

export default function FeedDescription({ description = '' }) {

  const [showMore, setShowMore] = useState(false)

  const [showMore, setShowMore] = useState(false);

  const stripText = description.replace(/<p>|<\/p>/g, '')

  const stripText = description.replace(/<p>|<\/p>/g, '');

  const maxLength = 140

  const maxLength = 140;

  const truncatedText = stripText.slice(0, maxLength)

  const truncatedText = stripText.slice(0, maxLength);

  const isTruncated = stripText.length > maxLength

  const isTruncated = stripText.length > maxLength;

  const toggleShowMore = () => setShowMore((prevState) => !prevState)

  const toggleShowMore = () => setShowMore((prevState) => !prevState);

  return (

  return (

    <Typography>

    <Typography>

      {parse(showMore ? stripText : truncatedText)}

      {parse(showMore ? stripText : truncatedText)}

      {isTruncated && (

      {isTruncated && (

        <Typography

        <Typography

          onClick={toggleShowMore}

          onClick={toggleShowMore}

          variant='overline'

          variant='overline'

          color='primary'

          color='primary'

          sx={{ cursor: 'pointer', display: 'inline-flex' }}

          sx={{ cursor: 'pointer', display: 'inline-flex' }}

          aria-expanded={showMore}

          aria-expanded={showMore}

        >

        >

          {showMore ? ' Mostrar menos' : '... Mostrar más'}

          {showMore ? ' Mostrar menos' : '... Mostrar más'}

        </Typography>

        </Typography>

      )}

      )}

    </Typography>

    </Typography>

  )

  );

}

}