Proyectos de Subversion LeadersLinked - Backend

import React, { 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'

const FeedTemplate = ({ feed }) => {
  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [commentState, setCommentState] = useState(feed.owner_comments)
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)

  const closeModal = () => setShowDeleteModal(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 (
        <React.Fragment>
          {isReadMoreActive ? fullText : shortenedText}
          <button className="btn py-0 px-1" onClick={readMoreHandler}>
            {isReadMoreActive ? ' Leer menos' : ' Leer más'}
          </button>
        </React.Fragment>
      )
    } else {
      return fullText
    }
  }

  return (
    <>
      <article className={styles.feed}>
        <FeedTemplate.Header
          name={feed.owner_name}
          image={feed.owner_image}
          profileUrl={feed.owner_url}
          timeElapsed={feed.owner_time_elapse}
          deleteUrl={feed.feed_delete_url}
        />
        <div className="job_descp">
          {feed.owner_description && (
            <div className="show-read-more">
              {htmlParsedText(feed.owner_description)}
            </div>
          )}
          {feed.owner_file_image && (
            <img src={feed.owner_file_image} className="Entradas" />
          )}
          {feed.owner_file_video && (
            <video
              src={feed.owner_file_video}
              controls
              poster={feed.owner_file_image_preview}
              preload="none"
            />
          )}
          {feed.owner_file_document && (
            <a href={feed.owner_file_document} target="_blank" rel="noreferrer">
              Descargar
            </a>
          )}
          {feed.shared_name && (
            <div className="shared-post-bar">
              <div className="post-bar">
                <div className="post_topbar">
                  <div className="usy-dt">
                    <img
                      src={feed.shared_image}
                      alt=""
                      style={{ width: '50px', height: 'auto' }}
                    />
                    <div className="usy-name">
                      <h3>{feed.shared_name}</h3>
                      <span>{feed.shared_time_elapse}</span>
                    </div>
                  </div>
                </div>
                <div className="job_descp">
                  <div className="show-read-more">
                    {htmlParsedText(feed.shared_description)}
                  </div>
                  {feed.shared_file_image && (
                    <img src={feed.shared_file_image} className="Entradas" />
                  )}
                  {feed.shared_file_video && (
                    <video
                      src={feed.shared_file_video}
                      controls
                      poster={feed.shared_file_image_preview}
                      preload="none"
                    />
                  )}
                  {feed.shared_file_document && (
                    <a
                      href={feed.shared_file_document}
                      target="_blank"
                      rel="noreferrer"
                    >
                      Descargar
                    </a>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>

        <div className="job-status-bar">
          <ul
            className="d-flex align-items-center justify-content-start"
            style={{ gap: '1rem', margin: '10px 0', padding: '0' }}
          >
            <li>
              <i className="btn-indicator fa fa-comments mr-1" />
              {commentState}
            </li>
            <li>
              <i className="btn-indicator fa fa-share flip-horizontal ps-1" />
              {feed.owner_shared}
            </li>
          </ul>
        </div>
        <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={closeModal}
        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, deleteUrl }) => {
  const [displayOption, setDisplayOption] = useState(false)

  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>

      {deleteUrl && (
        <div className="cursor-pointer d-flex align-items-center">
          <i
            className="fa fa-ellipsis-v"
            onClick={() => setDisplayOption(!displayOption)}
            style={{ fontSize: '1.5rem' }}
          />
          <ul
            className={`my-dropdown-menu dropdown-menu-end ${
              displayOption ? 'show' : ''
            }`}
          >
            <li className="dropdown-item">
              <button className="btn" type="button">
                <i className="fa fa-trash pe-2" />
                Borrar
              </button>
            </li>
          </ul>
        </div>
      )}
    </div>
  )
}

FeedTemplate.Header = Header

export default React.memo(FeedTemplate)