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;