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

          }}

          type={feed.feed_content_type}

        />

        <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,

  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)

      ) : (

        <SurveyTemplate

          active={description.active}

          question={description.question}

          answers={[

            description.answer1,

            description.answer2,

            description.answer3,

            description.answer4,

            description.answer5

          ]}

          time={description.time_remaining}

        />

      )}

      {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>

  )

}

const SurveyTemplate = ({ question, answers = [], active, time }) => {

  const [isActive, setIsActive] = useState(true)

  useEffect(() => {

    setIsActive(Boolean(active))

  }, [active])

  return (

    <form action="">

      <h3>{question}</h3>

      {answers.map((option, index) => (

        <div className="survey_input" key={index}>

          <label htmlFor={`option-${index + 1}`}>{option}</label>

          <input

            type="radio"

            name="option"

            id={`option-${index + 1}`}

            disabled={!isActive || !Boolean(time)}

          />

        </div>

      ))}

    </form>

  )

}

FeedTemplate.Header = Header

FeedTemplate.Content = Body

export default React.memo(FeedTemplate)