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 = ({ feed, owner_shared }) => {

  // Destructuring feed data
  const {
    feed_unique,
    owner_name,
    owner_url,
    owner_image,
    owner_comments,
    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_likes,
    feed_share_url,
    feed_delete_url,
    comments,
    comment_add_url,
  } = 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 [likesState, setLikesState] = useState(feed_likes);
  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]);

  const deleteFeedHandler = () => {
    axios.post(feed_delete_url)
      .then((res) => {
        const { data } = res
        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();
    axios.post(likeUrl)
      .then((res) => {
        const { success, data } = res.data;
        if (!success) {
          setFeedIsLiked((previousState) => !previousState);
          dispatch(addNotification({
            style: "danger",
            msg: data,
          }));
        } else {
          setLikesState(data.likes)
          setFeedIsLiked(!feedIsLiked);
        }
      });
  };

  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>
        {likesState}
      </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>
        {likesState}
      </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>
  );
};

export default React.memo(FeedTemplate);