Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4016 Rev 4017
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, useRef } from "react";
- 
 
 3 
import parse from "html-react-parser"
3 
import { useDispatch } from "react-redux";
 4 
import { useDispatch } from "react-redux";
4 
import { shareModalTypes } from "../../../redux/share-modal/shareModal.types";
 - 
 
5 
import { axios } from "../../../utils";
 5 
import { axios } from "../../../utils";
- 
 
 6 
 
6 
import { feedTypes } from "../../../redux/feed/feed.types";
 7 
// Import Icons
7 
import { BsHeart, BsHeartFill } from 'react-icons/bs'
 8 
import { BsHeart, BsHeartFill } from 'react-icons/bs'
8 
import { RiShareForwardLine } from 'react-icons/ri'
 9 
import { RiShareForwardLine } from 'react-icons/ri'
9 
import { BiMessage, BiShareAlt } from "react-icons/bi";
 10 
import { BiMessage, BiShareAlt } from "react-icons/bi";
10 
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from "react-share";
 11 
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from "react-share";
Línea -... Línea 12...
- 
 
 12 
 
- 
 
 13 
// Redux types
- 
 
 14 
import { shareModalTypes } from "../../../redux/share-modal/shareModal.types";
- 
 
 15 
import { feedTypes } from "../../../redux/feed/feed.types";
11 
 
 16 
 
12 
// Redux actions
 17 
// Redux actions
13 
import { openShareModal } from "../../../redux/share-modal/shareModal.actions";
 18 
import { openShareModal } from "../../../redux/share-modal/shareModal.actions";
14 
import { addNotification } from "../../../redux/notification/notification.actions";
 - 
 
15 
import { useRef } from "react";
 19 
import { addNotification } from "../../../redux/notification/notification.actions";
16 
import FeedModal from "./FeedModal";
 20 
import FeedModal from "./FeedModal";
17 
import FeedHeader from "./FeedHeader";
 21 
import FeedHeader from "./FeedHeader";
Línea 18... Línea 22...
18 
import FeedCommentSection from "./feed-comment/FeedCommentSection";
 22 
import FeedCommentSection from "./feed-comment/FeedCommentSection";
Línea 19... Línea 23...
19 
 
 23 
 
20 
const FeedTemplate = ({ feed, owner_shared, image, children }) => {
 24 
const Feed = ({ feed, owner_shared, image }) => {
21 
 
 25 
 
22 
  // Destructuring feed data
 26 
  // Destructuring feed data
Línea 71... Línea 75...
71 
    };
 75 
    };
72 
  }, [shareContainer]);
 76 
  }, [shareContainer]);
Línea 73... Línea 77...
73 
 
 77 
 
74 
  const getShareUrl = new Promise((resolve, reject) => {
 78 
  const getShareUrl = new Promise((resolve, reject) => {
75 
    if (shareOptions) {
 - 
 
76 
      axios
 79 
    if (shareOptions) {
77 
        .get(feed_share_external_url)
 80 
      axios.get(feed_share_external_url)
78 
        .then(({ data }) => {
 81 
        .then(({ data }) => {
79 
          if (!data.success) {
 82 
          if (!data.success) {
80 
            dispatch(addNotification({ style: 'danger', msg: data.data }))
 83 
            dispatch(addNotification({ style: 'danger', msg: data.data }))
81 
            setShareOptions(false)
 84 
            setShareOptions(false)
Línea 109... Línea 112...
109 
  const displayComments = () => setShowComments(!showComments)
 112 
  const displayComments = () => setShowComments(!showComments)
Línea 110... Línea 113...
110 
 
 113 
 
Línea 111... Línea 114...
111 
  const btnShareHandler = () => dispatch(openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique))
 114 
  const btnShareHandler = () => dispatch(openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique))
112 
 
 115 
 
113 
  return (
 116 
  return (
114 
    <React.Fragment>
 117 
    <>
115 
      <FeedModal
 118 
      <FeedModal
116 
        isShow={show}
 119 
        isShow={show}
117 
        handleClose={() => setShow(false)}
 120 
        handleClose={() => setShow(false)}
Línea 129... Línea 132...
129 
        <div onClick={() =>
 132 
        <div onClick={() =>
130 
          (owner_file_image || owner_file_video || owner_file_document)
 133 
          (owner_file_image || owner_file_video || owner_file_document)
131 
          && setShow(true)
 134 
          && setShow(true)
132 
        }
 135 
        }
133 
        >
 136 
        >
134 
          {children}
 137 
          <Feed.Content
- 
 
 138 
            isShare={feed.shared_name ? true : false}
- 
 
 139 
            ownerFileImage={feed.owner_file_image}
- 
 
 140 
            ownerFileVideo={feed.owner_file_video}
- 
 
 141 
            ownerFileImagePreview={feed.owner_file_image_preview}
- 
 
 142 
            ownerFileDocument={feed.owner_file_document}
- 
 
 143 
            ownerDescription={feed.owner_description}
- 
 
 144 
            sharedItem={{
- 
 
 145 
              name: feed.shared_name,
- 
 
 146 
              image: feed.shared_image,
- 
 
 147 
              time_elapse: feed.shared_time_elapse,
- 
 
 148 
              description: feed.shared_description,
- 
 
 149 
              file_video: feed.shared_file_video,
- 
 
 150 
              file_image_preview: feed.shared_file_image_preview,
- 
 
 151 
              file_image: feed.shared_file_image,
- 
 
 152 
              file_document: feed.shared_file_document
- 
 
 153 
            }}
- 
 
 154 
          />
135 
        </div>
 155 
        </div>
136 
        <div className="job-status-bar">
 156 
        <div className="job-status-bar">
137 
          <ul className="reactions-list">
 157 
          <ul className="reactions-list">
138 
            <li>
 158 
            <li>
139 
              <button
 159 
              <button
Línea 209... Línea 229...
209 
          updateTotalComments={(total) => setTotalComments(total)}
 229 
          updateTotalComments={(total) => setTotalComments(total)}
210 
          comments={comments}
 230 
          comments={comments}
211 
          isShow={showComments}
 231 
          isShow={showComments}
212 
        />
 232 
        />
213 
      </div >
 233 
      </div >
214 
    </React.Fragment >
 234 
    </>
215 
  );
 235 
  );
216 
};
 236 
};
Línea -... Línea 237...
- 
 
 237 
 
- 
 
 238 
const Content = ({
- 
 
 239 
  showDescription = true,
- 
 
 240 
  ownerFileImage,
- 
 
 241 
  ownerFileVideo,
- 
 
 242 
  ownerFileImagePreview,
- 
 
 243 
  ownerFileDocument,
- 
 
 244 
  ownerDescription,
- 
 
 245 
  isShare,
- 
 
 246 
  sharedItem
- 
 
 247 
}) => {
- 
 
 248 
 
- 
 
 249 
  return (
- 
 
 250 
    <div className="job_descp">
- 
 
 251 
      {showDescription &&
- 
 
 252 
        <Feed.Description ownerDescription={ownerDescription} />
- 
 
 253 
      }
- 
 
 254 
      {ownerFileImage &&
- 
 
 255 
        <img src={ownerFileImage} className="Entradas" loading='lazy' />
- 
 
 256 
      }
- 
 
 257 
      {ownerFileVideo &&
- 
 
 258 
        <video
- 
 
 259 
          src={ownerFileVideo}
- 
 
 260 
          controls
- 
 
 261 
          poster={ownerFileImagePreview}
- 
 
 262 
          preload="none"
- 
 
 263 
        />
- 
 
 264 
      }
- 
 
 265 
      {ownerFileDocument &&
- 
 
 266 
        <a href={ownerFileDocument} target="_blank" rel="noreferrer">
- 
 
 267 
          Descargar
- 
 
 268 
        </a>
- 
 
 269 
      }
- 
 
 270 
      {isShare &&
- 
 
 271 
        <Feed.SharedContent
- 
 
 272 
          name={sharedItem.name}
- 
 
 273 
          image={sharedItem.image}
- 
 
 274 
          timeElapse={sharedItem.time_elapse}
- 
 
 275 
          description={sharedItem.description}
- 
 
 276 
          fileVideo={sharedItem.file_video}
- 
 
 277 
          fileImagePreview={sharedItem.file_image_preview}
- 
 
 278 
          fileImage={sharedItem.file_image}
- 
 
 279 
          fileDocument={sharedItem.file_document}
- 
 
 280 
        />
- 
 
 281 
      }
- 
 
 282 
    </div>
- 
 
 283 
  )
- 
 
 284 
}
- 
 
 285 
 
- 
 
 286 
const Description = ({ ownerDescription }) => {
- 
 
 287 
 
- 
 
 288 
  const [isReadMoreActive, setIsReadMoreActive] = useState(false);
- 
 
 289 
 
- 
 
 290 
  const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
- 
 
 291 
 
- 
 
 292 
  const htmlParsedText = (fullStringText) => {
- 
 
 293 
    const fullText = parse(fullStringText)
- 
 
 294 
    if (fullStringText.length > 500) {
- 
 
 295 
      const shortenedString = fullStringText.substr(0, 500);
- 
 
 296 
      const shortenedText = parse(`${shortenedString}... `);
- 
 
 297 
      return (
- 
 
 298 
        <p>
- 
 
 299 
          {isReadMoreActive ? fullText : shortenedText}
- 
 
 300 
          <span className='cursor-pointer' onClick={readMoreHandler}>
- 
 
 301 
            {isReadMoreActive ? " Leer menos" : " Leer más"}
- 
 
 302 
          </span>
- 
 
 303 
        </p>
- 
 
 304 
      );
- 
 
 305 
    }
- 
 
 306 
    return <p>{fullText}</p>
- 
 
 307 
  };
- 
 
 308 
 
- 
 
 309 
  return (
- 
 
 310 
    <div className="show-read-more">
- 
 
 311 
      {htmlParsedText(ownerDescription)}
- 
 
 312 
    </div>
- 
 
 313 
  )
- 
 
 314 
}
- 
 
 315 
 
- 
 
 316 
const SharedContent = ({
- 
 
 317 
  name,
- 
 
 318 
  image,
- 
 
 319 
  timeElapse,
- 
 
 320 
  description,
- 
 
 321 
  fileVideo,
- 
 
 322 
  fileImagePreview,
- 
 
 323 
  fileImage,
- 
 
 324 
  fileDocument,
- 
 
 325 
}) => {
- 
 
 326 
 
- 
 
 327 
  const [isReadMoreActive, setIsReadMoreActive] = useState(false);
- 
 
 328 
 
- 
 
 329 
  const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
- 
 
 330 
 
- 
 
 331 
  const htmlParsedText = (fullStringText) => {
- 
 
 332 
    const fullText = parse(fullStringText)
- 
 
 333 
    if (fullStringText.length > 500) {
- 
 
 334 
      const shortenedString = fullStringText.substr(0, 500);
- 
 
 335 
      const shortenedText = parse(`${shortenedString}... `);
- 
 
 336 
      return (
- 
 
 337 
        <p>
- 
 
 338 
          {isReadMoreActive ? fullText : shortenedText}
- 
 
 339 
          <span className='cursor-pointer' onClick={readMoreHandler}>
- 
 
 340 
            {isReadMoreActive ? " Leer menos" : " Leer más"}
- 
 
 341 
          </span>
- 
 
 342 
        </p>
- 
 
 343 
      );
- 
 
 344 
    }
- 
 
 345 
    return <p>{fullText}</p>
- 
 
 346 
  };
- 
 
 347 
 
- 
 
 348 
  return (
- 
 
 349 
    <div className="shared-post-bar">
- 
 
 350 
      <div className="post-bar">
- 
 
 351 
        <div className="post_topbar">
- 
 
 352 
          <div className="usy-dt">
- 
 
 353 
            <img
- 
 
 354 
              src={image}
- 
 
 355 
              alt=""
- 
 
 356 
              style={{ width: "50px", height: "auto" }}
- 
 
 357 
            />
- 
 
 358 
            <div className="usy-name">
- 
 
 359 
              <h3>{name}</h3>
- 
 
 360 
              <span>
- 
 
 361 
                {timeElapse}
- 
 
 362 
              </span>
- 
 
 363 
            </div>
- 
 
 364 
          </div>
- 
 
 365 
        </div>
- 
 
 366 
        <div className="job_descp">
- 
 
 367 
          <div className="show-read-more">
- 
 
 368 
            {htmlParsedText(description)}
- 
 
 369 
          </div>
- 
 
 370 
          {fileImage &&
- 
 
 371 
            <img src={fileImage} className="Entradas" loading='lazy' />
- 
 
 372 
          }
- 
 
 373 
          {fileVideo &&
- 
 
 374 
            <video
- 
 
 375 
              src={fileVideo}
- 
 
 376 
              controls
- 
 
 377 
              poster={fileImagePreview}
- 
 
 378 
              preload="none"
- 
 
 379 
            />
- 
 
 380 
          }
- 
 
 381 
          {fileDocument &&
- 
 
 382 
            <a href={fileDocument} target="_blank" rel="noreferrer">
- 
 
 383 
              Descargar
- 
 
 384 
            </a>
- 
 
 385 
          }
- 
 
 386 
        </div>
- 
 
 387 
      </div>
- 
 
 388 
    </div>
- 
 
 389 
  )
- 
 
 390 
}
- 
 
 391 
 
- 
 
 392 
Feed.SharedContent = SharedContent
- 
 
 393 
Feed.Description = Description
- 
 
 394 
Feed.Content = Content
217 
 
 395 
 
218 
export default React.memo(FeedTemplate);
 396 
export default React.memo(Feed);