Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'
import parse from 'html-react-parser'

import SurveyForm from './survey/SurveyForm'
import CommentForm from './CommentForm'
import CommentsList from './CommentsList'
import Options from '../../shared/options/Options'
import DeleteModal from '../../shared/DeleteModal'

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

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

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
          }}
          type={feed.feed_content_type}
        />
        {feed.comments_link_add && (
          <>
            <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>

      {Boolean(options.length) && <Options options={options} />}
    </div>
  )
}

const Body = ({
  description,
  image,
  video,
  previewImage,
  document,
  feedShared,
  type
}) => {
  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}>
      {type !== 'fast-survey' ? (
        htmlParsedText(description)
      ) : (
        <SurveyForm
          active={description.active}
          question={description.question}
          answers={[
            description.answer1,
            description.answer2,
            description.answer3,
            description.answer4,
            description.answer5
          ]}
          votes={
            description.votes1 && [
              description.votes1,
              description.votes2,
              description.votes3,
              description.votes4,
              description.votes5
            ]
          }
          time={description.time_remaining}
          resultType={description.result_type}
        />
      )}
      {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)