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)