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 = "") => {

      if (typeof fullStringText !== "string") {

        return "";

      }

      const htmlParsedText = parse(fullStringText);

      if (htmlParsedText.length > 500) {

        const shortenedString = htmlParsedText.substring(0, 500);

        const shortenedText = `${shortenedString}...`;

        return (

          <>

            {isReadMoreActive ? shortenedString : shortenedText}

            <StyledViewMore onClick={readMore}>

              {isReadMoreActive ? read_less : read_more}

            </StyledViewMore>

          </>

        );

      }

      return htmlParsedText;

    },

    [isReadMoreActive]

  );

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

};

export default Paraphrase;