Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3803 | Rev 3946 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3803 Rev 3943
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from "react";
 2 
import React, { useEffect, useState } from "react";
3 
import { useDispatch } from "react-redux";
 3 
import { useDispatch } from "react-redux";
4 
import { useForm } from "react-hook-form";
 - 
 
5 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
 - 
 
6 
import FeedCommentTemplate from "./feed-comment/FeedCommentTemplate";
 - 
 
7 
import { shareModalTypes } from "../../../redux/share-modal/shareModal.types";
 4 
import { shareModalTypes } from "../../../redux/share-modal/shareModal.types";
8 
import { axios } from "../../../utils";
 5 
import { axios } from "../../../utils";
9 
import { feedTypes } from "../../../redux/feed/feed.types";
 6 
import { feedTypes } from "../../../redux/feed/feed.types";
10 
import { BsHeart, BsHeartFill } from 'react-icons/bs'
 7 
import { BsHeart, BsHeartFill } from 'react-icons/bs'
11 
import { RiShareForwardLine } from 'react-icons/ri'
 8 
import { RiShareForwardLine } from 'react-icons/ri'
12 
import { TbSend } from "react-icons/tb";
 - 
 
13 
import { BiMessage, BiShareAlt } from "react-icons/bi";
 9 
import { BiMessage, BiShareAlt } from "react-icons/bi";
14 
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from "react-share";
 10 
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from "react-share";
Línea 15... Línea 11...
15 
 
 11 
 
16 
// Redux actions
 12 
// Redux actions
17 
import { openShareModal } from "../../../redux/share-modal/shareModal.actions";
 13 
import { openShareModal } from "../../../redux/share-modal/shareModal.actions";
18 
import { addNotification } from "../../../redux/notification/notification.actions";
 14 
import { addNotification } from "../../../redux/notification/notification.actions";
19 
import { useRef } from "react";
 15 
import { useRef } from "react";
20 
import FeedModal from "./FeedModal";
 16 
import FeedModal from "./FeedModal";
- 
 
 17 
import FeedHeader from "./FeedHeader";
Línea 21... Línea 18...
21 
import FeedHeader from "./FeedHeader";
 18 
import FeedCommentSection from "./feed-comment/FeedCommentSection";
Línea 22... Línea 19...
22 
 
 19 
 
23 
const FeedTemplate = ({ feed, owner_shared, image, children }) => {
 20 
const FeedTemplate = ({ feed, owner_shared, image, children }) => {
Línea 42... Línea 39...
42 
    comments,
 39 
    comments,
43 
    comment_add_url,
 40 
    comment_add_url,
44 
    feed_share_external_url
 41 
    feed_share_external_url
45 
  } = feed;
 42 
  } = feed;
Línea 46... Línea -...
46 
 
 - 
 
47 
  // react hook form
 - 
 
48 
  const { register, handleSubmit, errors } = useForm();
 - 
 
49 
 
 43 
 
Línea 50... Línea 44...
50 
  const dispatch = useDispatch()
 44 
  const dispatch = useDispatch()
51 
 
 45 
 
52 
  const [totalComments, setTotalComments] = useState(comments.length || 0);
 - 
 
53 
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked);
 46 
  const [totalComments, setTotalComments] = useState(comments.length || 0);
54 
  const [commentsState, setCommentsState] = useState(comments);
 47 
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked);
55 
  const [sharedState, setSharedState] = useState(owner_shared);
 48 
  const [sharedState, setSharedState] = useState(owner_shared);
Línea 56... Línea 49...
56 
  const [likesState, setLikesState] = useState(feed_likes);
 49 
  const [likesState, setLikesState] = useState(feed_likes);
Línea 108... Línea 101...
108 
          setFeedIsLiked(!feedIsLiked);
 101 
          setFeedIsLiked(!feedIsLiked);
109 
        }
 102 
        }
110 
      });
 103 
      });
111 
  };
 104 
  };
Línea 112... Línea -...
112 
 
 - 
 
113 
  const submitCommentHandler = (data, e) => {
 - 
 
114 
    const currentFormData = new FormData();
 - 
 
115 
    for (let input in data) {
 - 
 
116 
      currentFormData.append(input, data[input]);
 - 
 
117 
    }
 - 
 
118 
    axios.post(comment_add_url, currentFormData).then((res) => {
 - 
 
119 
      const resData = res.data;
 - 
 
120 
      const { data, success, total_comments } = resData;
 - 
 
121 
      if (success) {
 - 
 
122 
        const newComment = data;
 - 
 
123 
        setTotalComments(total_comments);
 - 
 
124 
        setCommentsState([newComment, ...commentsState]);
 - 
 
125 
        e.target.reset();
 - 
 
126 
      } else {
 - 
 
127 
        dispatch(addNotification({
 - 
 
128 
          style: "danger",
 - 
 
129 
          msg: data,
 - 
 
130 
        }));
 - 
 
131 
      }
 - 
 
132 
    });
 - 
 
133 
  };
 - 
 
134 
 
 - 
 
135 
  const deleteCommentHandler = (commentUnique, deleteCommentUrl) => {
 - 
 
136 
    axios.post(deleteCommentUrl)
 - 
 
137 
      .then((res) => {
 - 
 
138 
        const { success, data, total_comments } = res.data;
 - 
 
139 
        if (!success) {
 - 
 
140 
          dispatch(addNotification({
 - 
 
141 
            style: "danger",
 - 
 
142 
            msg: data,
 - 
 
143 
          }));
 - 
 
144 
        }
 - 
 
145 
        setCommentsState(prevComments => prevComments.filter((comment) => comment.unique !== commentUnique));
 - 
 
146 
        setTotalComments(total_comments);
 - 
 
147 
        dispatch(addNotification({ style: "success", msg: data }));
 - 
 
148 
      })
 - 
 
149 
      .catch((error) =>
 - 
 
150 
        dispatch(addNotification({ style: "danger", msg: error.message }))
 - 
 
151 
      );
 - 
 
152 
  };
 - 
 
153 
 
 105 
 
Línea 154... Línea -...
154 
  const btnShareHandler = () => dispatch(openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique))
 - 
 
155 
 
 - 
 
156 
  let commentsRender = null;
 - 
 
157 
  if (commentsState.length) {
 - 
 
158 
    commentsRender = (
 - 
 
159 
      <div className='commentSection'>
 - 
 
160 
        <div className={`comment-sec comment-sec-${feed_unique}`}>
 - 
 
161 
          <ul>
 - 
 
162 
            {[...commentsState].reverse().map((commentData) => {
 - 
 
163 
              const { unique } = commentData;
 - 
 
164 
              return (
 - 
 
165 
                <FeedCommentTemplate
 - 
 
166 
                  commentData={commentData}
 - 
 
167 
                  onDeleteHandler={deleteCommentHandler}
 - 
 
168 
                  key={unique}
 - 
 
169 
                />
 - 
 
170 
              );
 - 
 
171 
            })}
 - 
 
172 
          </ul>
 - 
 
173 
        </div>
 - 
 
174 
      </div>
 - 
 
175 
    );
 - 
 
176 
  }
 106 
  const btnShareHandler = () => dispatch(openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique))
177 
 
 107 
 
178 
  return (
 108 
  return (
179 
    <React.Fragment>
 109 
    <React.Fragment>
180 
      <FeedModal
 110 
      <FeedModal
Línea 264... Línea 194...
264 
                </div>
 194 
                </div>
265 
              }
 195 
              }
266 
            </li>
 196 
            </li>
267 
          </ul>
 197 
          </ul>
268 
        </div>
 198 
        </div>
269 
        {commentsRender}
 199 
        <FeedCommentSection
270 
        <div>
 - 
 
271 
          <form
 - 
 
272 
            className={`form-comment-feed-${feed_unique}`}
 - 
 
273 
            data-feed-unique={feed_unique}
 200 
          feedId={feed.feed_unique}
274 
            onSubmit={handleSubmit(submitCommentHandler)}
 - 
 
275 
          >
 - 
 
276 
            <div className='feedCommentContainer'>
 - 
 
277 
              <img src={image} alt="User profile image" />
 - 
 
278 
              <input
 201 
          image={image}
279 
                className='commentInput'
 - 
 
280 
                type="text"
 - 
 
281 
                name="comment"
 - 
 
282 
                id={`comment-${feed_unique}`}
 202 
          addUrl={comment_add_url}
283 
                maxLength="256"
 - 
 
284 
                placeholder="Escribe un comentario"
 203 
          updateTotalComments={(total) => setTotalComments(total)}
285 
                ref={register({ required: "El campo es requerido" })}
 - 
 
286 
              />
 - 
 
287 
              <button className={`shareIconContainer iconActive`} >
 - 
 
288 
                <TbSend className='shareIcon' />
 - 
 
289 
              </button>
 - 
 
290 
            </div>
 - 
 
291 
          </form>
 - 
 
292 
          {errors.comment &&
 - 
 
293 
            <FormErrorFeedback>
 - 
 
294 
              {errors.comment.message}
 - 
 
295 
            </FormErrorFeedback>
 - 
 
296 
          }
 204 
        />
297 
        </div>
 - 
 
298 
      </div >
 205 
      </div >
299 
    </React.Fragment >
 206 
    </React.Fragment >
300 
  );
 207 
  );
301 
};
 208 
};