Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'
import { deleteFeed } from '../../redux/feed/feed.actions'
import DeleteModal from '../../shared/DeleteModal'
import CommentForm from './CommentForm'
import CommentsList from './CommentsList'
import parse from 'html-react-parser'
import styles from './feeds.module.scss'
import Options from '../../shared/options/Options'

const FeedTemplate = ({ feed }) => {
  const [comments, setComments] = useState(feed.comments)
  const [totalComments, setTotalComments] = useState(feed.owner_comments)
  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [options, setOptions] = useState([])

  const toggleModal = () => {
    setShowDeleteModal(!showDeleteModal)
  }

  const deleteComment = (id) => {
    setComments((prevComments) =>
      prevComments.filter((comment) => comment.unique === id)
    )
  }

  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
          }}
        />
        <CommentForm
          image={feed.owner_image}
          profileUrl={feed.owner_url}
          sendUrl={feed.comments_link_add}
          onSubmit={(data) => {
            setTotalComments(data.total_comments)
            setComments(data.data)
          }}
        />
        <CommentsList comments={comments} onDelete={deleteComment} />
      </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={styles.img_container}>
          <img src={image} alt="Article image" />
          <img src={image} alt="Article image" />
        </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)