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