Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from "react";

import { useDispatch } from "react-redux";

import { useForm } from "react-hook-form";

import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";

import FeedCommentTemplate from "./feed-comment/FeedCommentTemplate";

import { shareModalTypes } from "../../../redux/share-modal/shareModal.types";

import parse from "html-react-parser";

import { axios } from "../../../utils";

import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";

import { Modal } from "react-bootstrap";

import styles from "./feedTemplate.module.scss";

import { feedTypes } from "../../../redux/feed/feed.types";

// Redux actions

import { openShareModal } from "../../../redux/share-modal/shareModal.actions";

import { addNotification } from "../../../redux/notification/notification.actions";

import { deleteFeed } from "../../../redux/feed/feed.actions";

const FeedTemplate = (props) => {

  // Destructuring feed data

  const {

    feed_unique,

    feed_id_encrypted,

    owner_name,

    owner_url,

    owner_image,

    owner_comments,

    owner_shared,

    owner_time_elapse,

    owner_description,

    owner_file_image,

    owner_file_video,

    owner_file_document,

    owner_file_image_preview,

    shared_name,

    shared_image,

    shared_time_elapse,

    shared_description,

    shared_file_video,

    shared_file_image_preview,

    shared_file_image,

    shared_file_document,

    feed_like_url,

    feed_unlike_url,

    feed_is_liked,

    feed_share_url,

    feed_delete_url,

    comments,

    comment_add_url,

  } = props.feed;

  // react hook form

  const { register, handleSubmit, errors } = useForm();

  const dispatch = useDispatch()

  const [totalComments, setTotalComments] = useState(owner_comments || 0);

  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked);

  const [commentsState, setCommentsState] = useState(comments);

  const [sharedState, setSharedState] = useState(owner_shared);

  const [isReadMoreActive, setIsReadMoreActive] = useState(false);

  const [showConfirmModal, setShowConfirmModal] = useState(false);

  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);

  const handleShow = () => setShow(true);

  useEffect(() => {

    setSharedState(owner_shared)

  }, [owner_shared]);

  console.log('Rendered')

  const deleteFeedHandler = () => {

    axios.post(feed_delete_url).then((res) => {

      const data = res.data;

      if (data.success) {

        dispatch(deleteFeed(feed_unique));

        dispatch(addNotification({

          style: "success",

          msg: data.data,

        }));

      } else {

        dispatch(addNotification({

          style: "danger",

          msg: data.data,

        }));

      }

    });

  };

  const handleShowConfirmModal = () => {

    setShowConfirmModal(!showConfirmModal);

  };

  const handleModalAccept = () => {

    deleteFeedHandler();

  };

  const likeHandler = (event, likeUrl) => {

    event.preventDefault();

    setFeedIsLiked(!feedIsLiked);

    axios.post(likeUrl).then((res) => {

      const resData = res.data;

      const { success, data } = resData;

      if (!success) {

        setFeedIsLiked((previousState) => !previousState);

        dispatch(addNotification({

          style: "danger",

          msg: data,

        }));

      }

    });

  };

  const submitCommentHandler = (data, e) => {

    const currentFormData = new FormData();

    for (let input in data) {

      currentFormData.append(input, data[input]);

    }

    axios.post(comment_add_url, currentFormData).then((res) => {

      const resData = res.data;

      const { data, success, total_comments } = resData;

      if (success) {

        const newComment = data;

        setTotalComments(total_comments);

        setCommentsState([...commentsState, newComment]);

        e.target.reset();

      } else {

        dispatch(addNotification({

          style: "danger",

          msg: data,

        }));

      }

    });

  };

  const deleteCommentHandler = (commentUnique, deleteCommentUrl) => {

    axios

      .post(deleteCommentUrl)

      .then((res) => {

        const { success, data, total_comments } = res.data;

        if (success) {

          const newCommentsState = commentsState.filter(

            (comment) => comment.unique !== commentUnique

          );

          setCommentsState(newCommentsState);

          setTotalComments(total_comments);

        } else {

          dispatch(addNotification({

            style: "danger",

            msg: data,

          }));

        }

      })

      .catch((error) => {

        dispatch(addNotification({

          style: "danger",

          msg: error.message,

        }));

      });

  };

  const btnShareHandler = (event) => {

    event.preventDefault();

    dispatch(openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique))

  };

  let commentsRender = null;

  if (commentsState.length) {

    commentsRender = (

      <div className={styles.commentSection}>

        <div className={`comment-sec comment-sec-${feed_unique}`}>

          <ul>

            {[...commentsState].reverse().map((commentData) => {

              const { unique } = commentData;

              return (

                <FeedCommentTemplate

                  commentData={commentData}

                  onDeleteHandler={deleteCommentHandler}

                  key={unique}

                />

              );

            })}

          </ul>

        </div>

      </div>

    );

  }

  let likeButton = feedIsLiked ? (

    <a

      href={feed_unlike_url}

      id={`btn-unlike-${feed_unique}`}

      data-feed-unique={feed_unique}

      className="btn-unlike"

      onClick={(event) => {

        likeHandler(event, feed_unlike_url);

      }}

    >

      <i className="fas fa-heart"></i>

      Ya no me gusta

    </a>

  ) : (

    <a

      href={feed_like_url}

      id={`btn-like-${feed_unique}`}

      data-feed-unique={feed_unique}

      className="btn-like"

      onClick={(event) => {

        likeHandler(event, feed_like_url);

      }}

    >

      <i className="far fa-heart"></i>

      Me gusta

    </a>

  );

  const readMoreHandler = (event) => {

    event.preventDefault();

    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}

          <a

            href="#"

            onClick={(e) => {

              readMoreHandler(e);

            }}

          >

            {isReadMoreActive ? " Leer menos" : " Leer más"}

          </a>

        </React.Fragment>

      );

    } else {

      return fullText;

    }

  };

  let sharedName = null;

  if (shared_name) {

    sharedName = (

      <div className="shared-post-bar">

        <div className="post-bar">

          <div className="post_topbar">

            <div className="usy-dt">

              <img

                src={shared_image}

                alt=""

                style={{

                  width: "50px",

                  height: "auto",

                }}

              />

              <div className="usy-name">

                <h3>{shared_name}</h3>

                <span>

                  <img

                    style={{

                      width: "12px",

                      height: "auto",

                    }}

                    src="/images/clock.png"

                    alt=""

                  />

                  {shared_time_elapse}

                </span>

              </div>

            </div>

          </div>

          <div className="job_descp">

            <div className="show-read-more">

              {htmlParsedText(shared_description)}

            </div>

            {shared_file_image ? (

              <img src={shared_file_image} className="Entradas" />

            ) : null}

            {shared_file_video ? (

              <video

                src={shared_file_video}

                controls

                poster={shared_file_image_preview}

                preload="none"

              />

            ) : null}

            {shared_file_document ? (

              <a href={shared_file_document} target="_blank">

                Descargar

              </a>

            ) : null}

          </div>

        </div>

      </div>

    );

  }

  const OwnerDescription = () => <div className="show-read-more">

    {htmlParsedText(owner_description)}

  </div>

  const TopBar = () => <div className="post_topbar">

    <div className="usy-dt">

      <a href={owner_url}>

        <img

          src={owner_image}

          alt=""

          style={{

            width: "50px",

            height: "auto",

          }}

        />

      </a>

      <div className="usy-name">

        <a href={owner_url}>

          <h3>{owner_name}</h3>

        </a>

        <span>

          <img src="/images/clock.png" alt="" />

          {owner_time_elapse}

          {feed_delete_url ? (

            <a

              href="#"

              className="btn-feed-trash"

              data-link={feed_delete_url}

              data-feed-unique={feed_unique}

              onClick={(e) => {

                e.preventDefault();

                handleShowConfirmModal();

              }}

            >

              <i className="fa fa-trash"></i>

            </a>

          ) : null}

        </span>

      </div>

    </div>

  </div>

  const Content = ({ showDescription }) => <div className="job_descp">

    {

      !!showDescription && (

        <OwnerDescription />

      )

    }

    {owner_file_image ? (

      <img src={owner_file_image} className="Entradas" />

    ) : null}

    {owner_file_video ? (

      <video

        src={owner_file_video}

        controls

        poster={owner_file_image_preview}

        preload="none"

      />

    ) : null}

    {owner_file_document ? (

      <a href={owner_file_document} target="_blank">

        Descargar

      </a>

    ) : null}

    {sharedName}

  </div>

  return (

    <React.Fragment>

      <Modal

        show={show}

        onHide={handleClose}

        dialogClassName="modal-md"

      >

        <div

          className="row"

        >

          <div

            className="col-md-8 col-sm-12 col-12"

          >

            <Content

              showDescription

            />

          </div>

          <div

            className="col-md-4 col-sm-12 col-12"

          >

            <TopBar />

            <OwnerDescription />

          </div>

        </div>

      </Modal>

      <div className={styles.postContainer} >

        <TopBar

          showDescription

        />

        <div

          onClick={() => (owner_file_image || owner_file_video || owner_file_document) ? handleShow() : null}

        >

          <Content

            showDescription

          />

        </div>

        <div className="job-status-bar">

          <ul className="like-com">

            <li>{likeButton}</li>

            <li>

              <a

                href="#"

                id={`btn-comments-${feed_unique}`}

                className="btn-indicator"

              >

                <i className="fas fa-comments"></i> {totalComments}

              </a>

            </li>

            <li>

              <a

                href="#"

                id={`btn-share-${feed_unique}`}

                className="btn-indicator"

              >

                <i className="fas fa-share"></i> {sharedState}

              </a>

            </li>

          </ul>

          <a

            href={feed_share_url}

            data-feed-unique={feed_unique}

            className="btn-feed-share"

            onClick={(e) => {

              btnShareHandler(e);

            }}

          >

            <i className="fas fa-share"></i>Compartir

          </a>

        </div>

        {commentsRender}

        <div>

          <form

            className={`form-comment-feed-${feed_unique}`}

            data-feed-unique={feed_unique}

            onSubmit={handleSubmit(submitCommentHandler)}

          >

            <div className={styles.feedCommentContainer}>

              <input

                className={styles.commentInput}

                type="text"

                name="comment"

                id={`comment-${feed_unique}`}

                maxLength="256"

                placeholder="Escribe un comentario"

                ref={register({

                  required: {

                    value: "true",

                    message: "El campo es requerido",

                  },

                })}

              />

              <button type="submit" className={styles.submitButton}>

                Enviar

              </button>{" "}

              {/* Falta multilenguaje */}

            </div>

          </form>

          {errors.comment && (

            <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>

          )}

        </div>

      </div>

      <ConfirmModal

        show={showConfirmModal}

        onClose={() => {

          setShowConfirmModal(false);

        }}

        onAccept={handleModalAccept}

        acceptLabel="Aceptar"

      />

    </React.Fragment>

  );

};

function areEqual(prevProps, nextProps) {

  console.log(prevProps)

  console.log(nextProps)

  return prevProps.feed.owner_shared === nextProps.feed.owner_shared;

}

export default React.memo(FeedTemplate, areEqual);