Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'

import { deleteFeed } from '../../redux/feed/feed.actions'

import DeleteModal from '../../shared/DeleteModal'

import CommentSection from './CommentSection'

import parse from 'html-react-parser'

import styles from './feeds.module.scss'

import Options from '../../shared/options/Options'

const FeedTemplate = ({ feed }) => {

  const [commentState, setCommentState] = useState(feed.owner_comments)

  const [showDeleteModal, setShowDeleteModal] = useState(false)

  const [options, setOptions] = useState([])

  const toggleModal = () => {

    setShowDeleteModal(!showDeleteModal)

  }

  useEffect(() => {

    if (feed.feed_delete_url) {

      setOptions((prevOptions) =>

        prevOptions.concat({ label: 'Borrar', action: toggleModal })

      )

    }

  }, [])

  return (

    <>

      <article className={styles.feed}>

        <FeedTemplate.Header

          name={feed.owner_name}

          image={feed.owner_image}

          profileUrl={feed.owner_url}

          timeElapsed={feed.owner_time_elapse}

          options={options}

        />

        <FeedTemplate.Content

          description={feed.owner_description}

          image={feed.owner_file_image}

          previewImage={feed.owner_file_image_preview}

          video={feed.owner_file_video}

          document={feed.owner_file_document}

          feedShared={{

            owner_description: feed.shared_description,

            owner_file_image: feed.shared_file_image,

            owner_file_image_preview: feed.shared_file_image_preview,

            owner_file_video: feed.shared_file_video,

            owner_file_document: feed.shared_file_document,

            owner_time_elapse: feed.shared_time_elapse

          }}

        />

        <CommentSection

          comments_link_add={feed.comment_add_url}

          comments={feed.comments}

          owner_image={feed.owner_image}

          owner_url={feed.owner_url}

          setComment={setCommentState}

        />

      </article>

      <DeleteModal

        url={feed.feed_delete_url}

        isOpen={showDeleteModal}

        closeModal={toggleModal}

        title="Esta seguro de borrar esta publicación?"

        action={() => deleteFeed(feed.feed_unique)}

        message="La publicación ha sido borrada"

      />

    </>

  )

}

const Header = ({ image, name, profileUrl, timeElapsed, options = null }) => {

  return (

    <div className={styles.feed_header}>

      <img src={image} alt={`${name} profile image`} />

      <div className={styles.feed_info}>

        <a href={profileUrl}>

          <h2>{name}</h2>

        </a>

        <span>{timeElapsed}</span>

      </div>

      {options && <Options options={options} />}

    </div>

  )

}

const Body = ({

  description,

  image,

  video,

  previewImage,

  document,

  feedShared

}) => {

  const [isReadMoreActive, setIsReadMoreActive] = useState(false)

  const readMoreHandler = () => {

    setIsReadMoreActive(!isReadMoreActive)

  }

  const htmlParsedText = (fullStringText) => {

    const fullText = parse(fullStringText)

    if (fullStringText.length > 500) {

      const shortenedString = fullStringText.substr(0, 500)

      const shortenedText = parse(`${shortenedString}... `)

      return (

        <>

          {isReadMoreActive ? fullText : shortenedText}

          <button className="btn py-0 px-1" onClick={readMoreHandler}>

            {isReadMoreActive ? ' Leer menos' : ' Leer más'}

          </button>

        </>

      )

    }

    return fullText

  }

  return (

    <div className={styles.feed_content}>

      {description && htmlParsedText(description)}

      {image && (

        <div className="img-container">

          <img src={image} alt="" />

          <img src={image} alt="" />

        </div>

      )}

      {video && (

        <video src={video} preload="none" poster={previewImage} controls />

      )}

      {document && (

        <a href={document} target="_blank" rel="noreferrer">

          Descargar

        </a>

      )}

      {feedShared.owner_description && <FeedTemplate feed={feedShared} />}

    </div>

  )

}

FeedTemplate.Header = Header

FeedTemplate.Content = Body

export default React.memo(FeedTemplate)