Proyectos de Subversion LeadersLinked - SPA

import React, { useCallback, useState } from 'react'
import { useSelector } from 'react-redux'
import parse from 'html-react-parser'
import styled from 'styled-components'

const StyledViewMore = styled.span`
  cursor: 'pointer';
  color: '#00a6ff';
  margin-left: '5px';
`

const Paraphrase = ({ children, ...rest }) => {
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
  const { read_less, read_more } = useSelector(({ intl }) => intl.labels)

  const readMore = () => {
    setIsReadMoreActive(!isReadMoreActive)
  }

  const htmlParsedText = useCallback(
    (fullStringText = '') => {
      let fullText = parse(fullStringText)

      try {
        fullText = parse(fullStringText)
      } catch (error) {
        fullText = ''
      }

      if (fullStringText.length > 500) {
        const shortenedString = fullStringText.substring(0, 500)
        const shortenedText = parse(`${shortenedString}... `)

        return (
          <>
            {isReadMoreActive ? fullText : shortenedText}
            <StyledViewMore onClick={readMore}>
              {isReadMoreActive ? read_less : read_more}
            </StyledViewMore>
          </>
        )
      }

      return fullText
    },
    [isReadMoreActive]
  )

  return <p {...rest}>{htmlParsedText(children)}</p>
}

export default Paraphrase