Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 3613 Rev 3630
Línea 3... Línea 3...
3 
import { useDispatch } from "react-redux";
 3 
import { useDispatch } from "react-redux";
4 
import { useForm } from "react-hook-form";
 4 
import { useForm } from "react-hook-form";
5 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
 5 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
6 
import FeedCommentTemplate from "./feed-comment/FeedCommentTemplate";
 6 
import FeedCommentTemplate from "./feed-comment/FeedCommentTemplate";
7 
import { shareModalTypes } from "../../../redux/share-modal/shareModal.types";
 7 
import { shareModalTypes } from "../../../redux/share-modal/shareModal.types";
8 
import parse from "html-react-parser";
 - 
 
9 
import { axios } from "../../../utils";
 8 
import { axios } from "../../../utils";
10 
import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";
 - 
 
11 
import { Modal } from "react-bootstrap";
 - 
 
12 
import { feedTypes } from "../../../redux/feed/feed.types";
 9 
import { feedTypes } from "../../../redux/feed/feed.types";
13 
import { BsHeart, BsHeartFill, BsTrash } from 'react-icons/bs'
 10 
import { BsHeart, BsHeartFill } from 'react-icons/bs'
14 
import { RiShareForwardLine } from 'react-icons/ri'
 11 
import { RiShareForwardLine } from 'react-icons/ri'
15 
import { TbSend } from "react-icons/tb";
 12 
import { TbSend } from "react-icons/tb";
16 
import { BiDotsVerticalRounded, BiMessage, BiShareAlt } from "react-icons/bi";
 13 
import { BiMessage, BiShareAlt } from "react-icons/bi";
17 
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from "react-share";
 14 
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from "react-share";
Línea 18... Línea 15...
18 
 
 15 
 
19 
// Redux actions
 16 
// Redux actions
20 
import { openShareModal } from "../../../redux/share-modal/shareModal.actions";
 17 
import { openShareModal } from "../../../redux/share-modal/shareModal.actions";
21 
import { addNotification } from "../../../redux/notification/notification.actions";
 - 
 
22 
import { deleteFeed } from "../../../redux/feed/feed.actions";
 18 
import { addNotification } from "../../../redux/notification/notification.actions";
- 
 
 19 
import { useRef } from "react";
- 
 
 20 
import FeedModal from "./FeedModal";
Línea 23... Línea 21...
23 
import { useRef } from "react";
 21 
import FeedHeader from "./FeedHeader";
Línea 24... Línea 22...
24 
 
 22 
 
25 
const FeedTemplate = ({ feed, owner_shared, image }) => {
 23 
const FeedTemplate = ({ feed, owner_shared, image, children }) => {
26 
 
 24 
 
27 
  // Destructuring feed data
 25 
  // Destructuring feed data
28 
  const {
 26 
  const {
29 
    feed_unique,
 27 
    feed_unique,
30 
    owner_name,
 28 
    owner_name,
31 
    owner_url,
 - 
 
32 
    owner_image,
 29 
    owner_url,
33 
    owner_time_elapse,
 30 
    owner_image,
34 
    owner_description,
 31 
    owner_time_elapse,
35 
    owner_file_image,
 - 
 
36 
    owner_file_video,
 - 
 
37 
    owner_file_document,
 - 
 
38 
    owner_file_image_preview,
 - 
 
39 
    shared_name,
 - 
 
40 
    shared_image,
 - 
 
41 
    shared_time_elapse,
 - 
 
42 
    shared_description,
 - 
 
43 
    shared_file_video,
 - 
 
44 
    shared_file_image_preview,
 32 
    owner_file_image,
45 
    shared_file_image,
 33 
    owner_file_video,
46 
    shared_file_document,
 34 
    owner_file_document,
47 
    feed_likes,
 35 
    feed_likes,
48 
    feed_like_url,
 36 
    feed_like_url,
Línea 64... Línea 52...
64 
  const [totalComments, setTotalComments] = useState(comments.length || 0);
 52 
  const [totalComments, setTotalComments] = useState(comments.length || 0);
65 
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked);
 53 
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked);
66 
  const [commentsState, setCommentsState] = useState(comments);
 54 
  const [commentsState, setCommentsState] = useState(comments);
67 
  const [sharedState, setSharedState] = useState(owner_shared);
 55 
  const [sharedState, setSharedState] = useState(owner_shared);
68 
  const [likesState, setLikesState] = useState(feed_likes);
 56 
  const [likesState, setLikesState] = useState(feed_likes);
69 
  const [isReadMoreActive, setIsReadMoreActive] = useState(false);
 - 
 
70 
  const [showConfirmModal, setShowConfirmModal] = useState(false);
 - 
 
71 
  const [displayOption, setDisplayOption] = useState(false)
 - 
 
- 
 
 57 
 
72 
  const [shareOptions, setShareOptions] = useState(false)
 58 
  const [shareOptions, setShareOptions] = useState(false)
73 
  const [show, setShow] = useState(false);
 59 
  const [show, setShow] = useState(false);
74 
  const deleteButton = useRef();
 - 
 
75 
  const shareContainer = useRef(null);
 - 
 
Línea 76... Línea -...
76 
 
 - 
 
77 
  const handleClose = () => setShow(false);
 - 
 
78 
  const handleShow = () => setShow(true);
 - 
 
79 
 
 - 
 
80 
  useEffect(() => {
 - 
 
81 
    setSharedState(owner_shared)
 - 
 
Línea 82... Línea -...
82 
  }, [owner_shared]);
 - 
 
83 
 
 60 
 
84 
  useEffect(() => {
 - 
 
85 
    const handleClickOutside = (event) => {
 - 
 
86 
      if (deleteButton.current && !deleteButton.current.contains(event.target)) {
 - 
 
87 
        setDisplayOption(false)
 - 
 
88 
      }
 - 
 
Línea 89... Línea -...
89 
    }
 - 
 
90 
    document.addEventListener("mousedown", handleClickOutside);
 61 
 
91 
 
 - 
 
92 
    return () => {
 - 
 
Línea 93... Línea 62...
93 
      document.removeEventListener("mousedown", handleClickOutside);
 62 
  const shareContainer = useRef(null);
94 
    };
 63 
 
95 
  }, [deleteButton]);
 64 
  useEffect(() => setSharedState(owner_shared), [owner_shared]);
96 
 
 65 
 
Línea 105... Línea 74...
105 
    return () => {
 74 
    return () => {
106 
      document.removeEventListener("mousedown", handleClickOutside);
 75 
      document.removeEventListener("mousedown", handleClickOutside);
107 
    };
 76 
    };
108 
  }, [shareContainer]);
 77 
  }, [shareContainer]);
Línea 109... Línea -...
109 
 
 - 
 
110 
  const deleteFeedHandler = () => {
 - 
 
111 
    axios.post(feed_delete_url)
 - 
 
112 
      .then((res) => {
 - 
 
113 
        const { data } = res
 - 
 
114 
        if (data.success) {
 - 
 
115 
          dispatch(deleteFeed(feed_unique));
 - 
 
116 
          dispatch(addNotification({
 - 
 
117 
            style: "success",
 - 
 
118 
            msg: data.data,
 - 
 
119 
          }));
 - 
 
120 
        } else {
 - 
 
121 
          dispatch(addNotification({
 - 
 
122 
            style: "danger",
 - 
 
123 
            msg: data.data,
 - 
 
124 
          }));
 - 
 
125 
        }
 - 
 
126 
      });
 - 
 
127 
  };
 - 
 
128 
 
 - 
 
129 
  const handleShowConfirmModal = () => {
 - 
 
130 
    setShowConfirmModal(!showConfirmModal);
 - 
 
131 
  };
 - 
 
132 
 
 78 
 
133 
  const likeHandler = (likeUrl) => {
 79 
  const likeHandler = (likeUrl) => {
134 
    axios.post(likeUrl)
 80 
    axios.post(likeUrl)
135 
      .then((res) => {
 81 
      .then((res) => {
136 
        const { success, data } = res.data;
 82 
        const { success, data } = res.data;
Línea 186... Línea 132...
186 
      .catch((error) =>
 132 
      .catch((error) =>
187 
        dispatch(addNotification({ style: "danger", msg: error.message }))
 133 
        dispatch(addNotification({ style: "danger", msg: error.message }))
188 
      );
 134 
      );
189 
  };
 135 
  };
Línea 190... Línea -...
190 
 
 - 
 
191 
  const btnShareHandler = () => {
 136 
 
192 
    dispatch(openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique))
 - 
 
Línea 193... Línea 137...
193 
  };
 137 
  const btnShareHandler = () => dispatch(openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique))
194 
 
 138 
 
195 
  let commentsRender = null;
 139 
  let commentsRender = null;
196 
  if (commentsState.length) {
 140 
  if (commentsState.length) {
Línea 212... Línea 156...
212 
        </div>
 156 
        </div>
213 
      </div>
 157 
      </div>
214 
    );
 158 
    );
215 
  }
 159 
  }
Línea 216... Línea -...
216 
 
 - 
 
217 
  const readMoreHandler = (event) => {
 - 
 
218 
    event.preventDefault();
 - 
 
219 
    setIsReadMoreActive(!isReadMoreActive);
 - 
 
220 
  };
 - 
 
221 
 
 - 
 
222 
  const htmlParsedText = (fullStringText) => {
 - 
 
223 
    const fullText = parse(fullStringText);
 - 
 
224 
    if (fullStringText.length > 500) {
 - 
 
225 
      const shortenedString = fullStringText.substr(0, 500);
 - 
 
226 
      const shortenedText = parse(`${shortenedString}... `);
 - 
 
227 
      return (
 - 
 
228 
        <React.Fragment>
 - 
 
229 
          {isReadMoreActive ? fullText : shortenedText}
 - 
 
230 
          <a
 - 
 
231 
            href="#"
 - 
 
232 
            onClick={(e) => {
 - 
 
233 
              readMoreHandler(e);
 - 
 
234 
            }}
 - 
 
235 
          >
 - 
 
236 
            {isReadMoreActive ? " Leer menos" : " Leer más"}
 - 
 
237 
          </a>
 - 
 
238 
        </React.Fragment>
 - 
 
239 
      );
 - 
 
240 
    } else {
 - 
 
241 
      return fullText;
 - 
 
242 
    }
 - 
 
243 
  };
 - 
 
244 
 
 - 
 
245 
  let sharedName = null;
 - 
 
246 
  if (shared_name) {
 - 
 
247 
    sharedName = (
 - 
 
248 
      <div className="shared-post-bar">
 - 
 
249 
        <div className="post-bar">
 - 
 
250 
          <div className="post_topbar">
 - 
 
251 
            <div className="usy-dt">
 - 
 
252 
              <img
 - 
 
253 
                src={shared_image}
 - 
 
254 
                alt=""
 - 
 
255 
                style={{
 - 
 
256 
                  width: "50px",
 - 
 
257 
                  height: "auto",
 - 
 
258 
                }}
 - 
 
259 
              />
 - 
 
260 
              <div className="usy-name">
 - 
 
261 
                <h3>{shared_name}</h3>
 - 
 
262 
                <span>
 - 
 
263 
                  {shared_time_elapse}
 - 
 
264 
                </span>
 - 
 
265 
              </div>
 - 
 
266 
            </div>
 - 
 
267 
          </div>
 - 
 
268 
          <div className="job_descp">
 - 
 
269 
            <div className="show-read-more">
 - 
 
270 
              {htmlParsedText(shared_description)}
 - 
 
271 
            </div>
 - 
 
272 
            {shared_file_image ? (
 - 
 
273 
              <img src={shared_file_image} className="Entradas" />
 - 
 
274 
            ) : null}
 - 
 
275 
            {shared_file_video ? (
 - 
 
276 
              <video
 - 
 
277 
                src={shared_file_video}
 - 
 
278 
                controls
 - 
 
279 
                poster={shared_file_image_preview}
 - 
 
280 
                preload="none"
 - 
 
281 
              />
 - 
 
282 
            ) : null}
 - 
 
283 
            {shared_file_document ? (
 - 
 
284 
              <a href={shared_file_document} target="_blank" rel="noreferrer">
 - 
 
285 
                Descargar
 - 
 
286 
              </a>
 - 
 
287 
            ) : null}
 - 
 
288 
          </div>
 - 
 
289 
        </div>
 - 
 
290 
      </div>
 - 
 
291 
    );
 - 
 
292 
  }
 - 
 
293 
  const OwnerDescription = () => <div className="show-read-more">
 - 
 
294 
    {htmlParsedText(owner_description)}
 - 
 
295 
  </div>
 - 
 
296 
 
 - 
 
297 
  const TopBar = () => (
 - 
 
298 
    < div className="post_topbar" >
 - 
 
299 
      <div className="usy-dt">
 - 
 
300 
        <a href={owner_url}>
 - 
 
301 
          <img src={owner_image} alt="" style={{
 - 
 
302 
            width: "50px",
 - 
 
303 
            height: "auto",
 - 
 
304 
          }}
 - 
 
305 
          />
 - 
 
306 
        </a>
 - 
 
307 
        <div className="usy-name">
 - 
 
308 
          <a href={owner_url}>
 - 
 
309 
            <h3>{owner_name}</h3>
 - 
 
310 
          </a>
 - 
 
311 
          <span>
 - 
 
312 
            {owner_time_elapse}
 - 
 
313 
          </span>
 - 
 
314 
        </div>
 - 
 
315 
      </div>
 - 
 
316 
      {
 - 
 
317 
        feed_delete_url
 - 
 
318 
        &&
 - 
 
319 
        <div className="cursor-pointer d-flex align-items-center">
 - 
 
320 
          <BiDotsVerticalRounded
 - 
 
321 
            onClick={() => setDisplayOption(!displayOption)}
 - 
 
322 
            style={{ fontSize: '1.5rem' }}
 - 
 
323 
          />
 - 
 
324 
          <div className={`feed-options ${displayOption ? 'active' : ''}`}>
 - 
 
325 
            <ul>
 - 
 
326 
              <li>
 - 
 
327 
                <button
 - 
 
328 
                  className="option-btn"
 - 
 
329 
                  onClick={handleShowConfirmModal}
 - 
 
330 
                  ref={deleteButton}
 - 
 
331 
                >
 - 
 
332 
                  <BsTrash className="mr-1" />
 - 
 
333 
                  Borrar
 - 
 
334 
                </button>
 - 
 
335 
              </li>
 - 
 
336 
            </ul>
 - 
 
337 
          </div>
 - 
 
338 
        </div>
 - 
 
339 
      }
 - 
 
340 
    </div >
 - 
 
341 
  )
 - 
 
342 
 
 - 
 
343 
  const Content = ({ showDescription }) => (
 - 
 
344 
    <div className="job_descp">
 - 
 
345 
      {
 - 
 
346 
        showDescription
 - 
 
347 
        &&
 - 
 
348 
        <OwnerDescription />
 - 
 
349 
      }
 - 
 
350 
      {
 - 
 
351 
        owner_file_image
 - 
 
352 
        &&
 - 
 
353 
        <img src={owner_file_image} className="Entradas" />
 - 
 
354 
      }
 - 
 
355 
      {
 - 
 
356 
        owner_file_video
 - 
 
357 
        &&
 - 
 
358 
        <video
 - 
 
359 
          src={owner_file_video}
 - 
 
360 
          controls
 - 
 
361 
          poster={owner_file_image_preview}
 - 
 
362 
          preload="none"
 - 
 
363 
        />
 - 
 
364 
      }
 - 
 
365 
      {
 - 
 
366 
        owner_file_document
 - 
 
367 
        &&
 - 
 
368 
        <a href={owner_file_document} target="_blank" rel="noreferrer">
 - 
 
369 
          Descargar
 - 
 
370 
        </a>
 - 
 
371 
      }
 - 
 
372 
      {sharedName}
 - 
 
373 
    </div>
 - 
 
374 
  )
 160 
 
375 
  return (
 161 
  return (
376 
    <React.Fragment>
 162 
    <React.Fragment>
377 
      <Modal
 163 
      <FeedModal
378 
        show={show}
 164 
        isShow={show}
379 
        onHide={handleClose}
 165 
        handleClose={() => setShow(false)}
380 
        dialogClassName="modal-lg"
 - 
 
381 
 
 166 
        feed={feed}
382 
      >
 - 
 
383 
        <Modal.Header closeButton />
 - 
 
384 
        <div className="row">
 - 
 
385 
          <div className="col-md-8 col-sm-12 col-12">
 - 
 
386 
            <Content showDescription />
 - 
 
387 
          </div>
 - 
 
388 
          <div className="col-md-4 col-sm-12 col-12">
 - 
 
389 
            <TopBar />
 - 
 
390 
            <OwnerDescription />
 - 
 
391 
          </div>
 - 
 
392 
        </div>
 - 
 
393 
      </Modal>
 - 
 
394 
 
 167 
      />
- 
 
 168 
      <div className={`postContainer ${feed_highlighted ? 'highlighted' : ''}`}>
- 
 
 169 
        <FeedHeader
395 
      <div className={`postContainer ${feed_highlighted ? 'highlighted' : ''}`}>
 170 
          ownerName={owner_name}
- 
 
 171 
          ownerImage={owner_image}
- 
 
 172 
          ownerTimeElapse={owner_time_elapse}
- 
 
 173 
          ownerUrl={owner_url}
- 
 
 174 
          feedDeleteUrl={feed_delete_url}
396 
        <TopBar showDescription />
 175 
          feedUnique={feed_unique}
397 
        <div
 176 
        />
398 
          onClick={() =>
 177 
        <div onClick={() =>
399 
            (owner_file_image || owner_file_video || owner_file_document)
 178 
          (owner_file_image || owner_file_video || owner_file_document)
400 
              ? handleShow()
 - 
 
401 
              : null
 179 
          && setShow(true)
402 
          }
 180 
        }
403 
        >
 181 
        >
404 
          <Content showDescription />
 182 
          {children}
405 
        </div>
 183 
        </div>
406 
        <div className="job-status-bar">
 184 
        <div className="job-status-bar">
407 
          <ul className="reactions-list">
 185 
          <ul className="reactions-list">
408 
            <li>
 186 
            <li>
Línea 499... Línea 277...
499 
                <TbSend className='shareIcon' />
 277 
                <TbSend className='shareIcon' />
500 
              </button>
 278 
              </button>
501 
            </div>
 279 
            </div>
502 
          </form>
 280 
          </form>
503 
          {errors.comment &&
 281 
          {errors.comment &&
- 
 
 282 
            <FormErrorFeedback>
504 
            <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>
 283 
              {errors.comment.message}
- 
 
 284 
            </FormErrorFeedback>
505 
          }
 285 
          }
506 
        </div>
 286 
        </div>
507 
      </div >
 287 
      </div >
508 
      <ConfirmModal
 - 
 
509 
        show={showConfirmModal}
 - 
 
510 
        onClose={() => setShowConfirmModal(false)}
 - 
 
511 
        onAccept={deleteFeedHandler}
 - 
 
512 
        acceptLabel="Aceptar"
 - 
 
513 
      />
 - 
 
514 
    </React.Fragment >
 288 
    </React.Fragment >
515 
  );
 289 
  );
516 
};
 290 
};
Línea 517... Línea 291...
517 
 
 291