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 StyledParaphase = styled.p`
  color: ${(props) => props.theme.font.color.primary};
  font-size: 14px;
  line-height: 1.2;
`

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 = '') => {
      if (typeof fullStringText !== 'string') {
        return 'Children prop must be a string'
      }

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

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

      return parse(fullStringText)
    },
    [isReadMoreActive]
  )

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

export default Paraphrase