Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4278 Rev 4280
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from 'react'
 2 
import React, { useState } from 'react'
3 
import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined'
 3 
import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined'
- 
 
 4 
import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt'
4 
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
 5 
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
5 
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'
 6 
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'
6 
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
 7 
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
7 
import InputOption from './InputOption'
 8 
import InputOption from './InputOption'
8 
import parse from 'html-react-parser'
 9 
import parse from 'html-react-parser'
9 
import Avatar from '../../../../shared/Avatar/Avatar'
 10 
import Avatar from '../../../../shared/Avatar/Avatar'
10 
import AccessTimeIcon from '@mui/icons-material/AccessTime';
 11 
import AccessTimeIcon from '@mui/icons-material/AccessTime';
- 
 
 12 
import { axios } from '../../../../utils'
- 
 
 13 
import { addNotification } from '../../../../redux/notification/notification.actions'
- 
 
 14 
import { openShareModal } from '../../../../redux/share-modal/shareModal.actions'
- 
 
 15 
import { shareModalTypes } from '../../../../redux/share-modal/shareModal.types'
- 
 
 16 
import { feedTypes } from '../../../../redux/feed/feed.types'
- 
 
 17 
import FeedCommentSection from '../../../components/feed/feed-comment/FeedCommentSection'
Línea 11... Línea 18...
11 
 
 18 
 
- 
 
 19 
const Feed = ({
12 
const Feed = ({
 20 
  feed_unique,
13 
  feed_is_liked,
 21 
  feed_is_liked,
14 
  feed_like_url,
 22 
  feed_like_url,
15 
  feed_unlike_url,
 23 
  feed_unlike_url,
16 
  feed_share_url,
 24 
  feed_share_url,
17 
  feed_share_external_url,
 25 
  feed_share_external_url,
18 
  feed_delete_url,
 - 
 
19 
  feed_content_type,
 26 
  feed_delete_url,
20 
  feed_likes,
 - 
 
21 
  feed_highlighted,
 27 
  feed_likes,
22 
  owner_url,
 28 
  owner_url,
23 
  owner_image,
 29 
  owner_image,
24 
  owner_name,
 30 
  owner_name,
25 
  owner_description,
 31 
  owner_description,
Línea 31... Línea 37...
31 
  owner_file_image,
 37 
  owner_file_image,
32 
  owner_file_document,
 38 
  owner_file_document,
33 
  comment_add_url,
 39 
  comment_add_url,
34 
  comments
 40 
  comments
35 
}) => {
 41 
}) => {
36 
  return (
 - 
 
37 
    <div className='feed'>
 - 
 
Línea -... Línea 42...
- 
 
 42 
 
- 
 
 43 
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked);
- 
 
 44 
  const [likesState, setLikesState] = useState(feed_likes);
- 
 
 45 
  const [totalComments, setTotalComments] = useState(owner_comments);
- 
 
 46 
  const [sharedState, setSharedState] = useState(owner_shared);
- 
 
 47 
  const [showComments, setShowComments] = useState(false);
- 
 
 48 
 
- 
 
 49 
  const handleLike = (url) => {
- 
 
 50 
    axios.post(url)
- 
 
 51 
      .then(({ data: response }) => {
- 
 
 52 
        if (!response.success) {
- 
 
 53 
          addNotification({ style: "danger", msg: response.data })
- 
 
 54 
          return
- 
 
 55 
        }
38 
 
 56 
        setLikesState(response.data.likes)
- 
 
 57 
        setFeedIsLiked(!feedIsLiked);
- 
 
 58 
      });
Línea 39... Línea -...
39 
      <div className='feed__header'>
 - 
 
40 
 
 59 
  };
41 
        <Avatar
 - 
 
42 
          imageUrl={owner_image}
 - 
 
43 
          name={owner_name}
 - 
 
Línea 44... Línea -...
44 
          size='xl'
 - 
 
45 
        />
 - 
 
46 
 
 - 
 
47 
        <div className='feed__info'>
 - 
 
48 
          <h2>{owner_name}</h2>
 - 
 
49 
          <div className='time__elapse'>
 - 
 
50 
            <span>
 60 
 
51 
              {owner_time_elapse}
 - 
 
52 
            </span>
 - 
 
Línea -... Línea 61...
- 
 
 61 
  const handleShare = () => openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique)
- 
 
 62 
 
- 
 
 63 
  const displayCommentSection = () => setShowComments(!showComments)
- 
 
 64 
 
- 
 
 65 
  return (
- 
 
 66 
    <div className='feed'>
- 
 
 67 
 
53 
            <AccessTimeIcon className='time__elapse-icon' />
 68 
      <Feed.Header
Línea 54... Línea 69...
54 
          </div>
 69 
        image={owner_image}
55 
        </div>
 - 
 
56 
 
 70 
        name={owner_name}
57 
      </div>
 - 
 
58 
 
 - 
 
59 
      <div className='feed__body'>
 71 
        timeElapsed={owner_time_elapse}
60 
        <p>{parse(owner_description)}</p>
 - 
 
61 
        {owner_file_image &&
 72 
      />
62 
          <img src={owner_file_image} className="Entradas" loading='lazy' />
 - 
 
63 
        }
 73 
 
64 
        {owner_file_video &&
 74 
      <div className='feed__body'>
65 
          <video
 - 
 
66 
            src={owner_file_video}
 - 
 
67 
            controls
 75 
        <Feed.Content
68 
            poster={owner_file_image_preview}
 - 
 
69 
            preload="none"
 - 
 
70 
          />
 - 
 
71 
        }
 76 
          ownerDescription={owner_description}
72 
        {owner_file_document &&
 77 
          ownerFileImage={owner_file_image}
Línea 73... Línea 78...
73 
          <a href={owner_file_document} target="_blank" rel="noreferrer">
 78 
          ownerFileImagepreview={owner_file_image_preview}
- 
 
 79 
          ownerFileVideo={owner_file_video}
74 
            Descargar
 80 
          ownerFileDocument={owner_file_document}
- 
 
 81 
        />
- 
 
 82 
      </div>
- 
 
 83 
 
- 
 
 84 
      <div className='feed__buttons'>
- 
 
 85 
        <InputOption
75 
          </a>
 86 
          Icon={feedIsLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
- 
 
 87 
          title='Like'
- 
 
 88 
          color={feedIsLiked ? '#7405f9' : 'gray'}
- 
 
 89 
          onClick={() => handleLike(feedIsLiked ? feed_like_url : feed_unlike_url)}
- 
 
 90 
        />
- 
 
 91 
        <InputOption
76 
        }
 92 
          Icon={ChatOutlinedIcon}
- 
 
 93 
          title='Comment'
- 
 
 94 
          color='gray'
- 
 
 95 
          onClick={displayCommentSection}
- 
 
 96 
        />
77 
      </div>
 97 
        <InputOption
78 
 
 98 
          Icon={ShareOutlinedIcon}
Línea -... Línea 99...
- 
 
 99 
          title='Share'
- 
 
 100 
          color='gray'
- 
 
 101 
          onClick={handleShare}
- 
 
 102 
        />
- 
 
 103 
        <InputOption Icon={SendOutlinedIcon} title='Send' color='gray' />
- 
 
 104 
      </div>
- 
 
 105 
 
- 
 
 106 
      <FeedCommentSection
- 
 
 107 
        feedId={feed_unique}
- 
 
 108 
        image={owner_image}
- 
 
 109 
        addUrl={comment_add_url}
- 
 
 110 
        updateTotalComments={(total) => setTotalComments(total)}
- 
 
 111 
        comments={comments}
- 
 
 112 
        isShow={showComments}
- 
 
 113 
      />
- 
 
 114 
 
- 
 
 115 
    </div>
- 
 
 116 
  )
- 
 
 117 
}
- 
 
 118 
 
- 
 
 119 
const Content = ({
- 
 
 120 
  ownerDescription,
- 
 
 121 
  ownerFileImage,
- 
 
 122 
  ownerFileImagepreview,
- 
 
 123 
  ownerFileVideo,
- 
 
 124 
  ownerFileDocument
- 
 
 125 
}) => {
- 
 
 126 
  return (
- 
 
 127 
    <>
- 
 
 128 
      <p>{parse(ownerDescription)}</p>
- 
 
 129 
      {ownerFileImage &&
- 
 
 130 
        <img src={ownerFileImage} className="Entradas" loading='lazy' />
- 
 
 131 
      }
- 
 
 132 
      {ownerFileVideo &&
- 
 
 133 
        <video
- 
 
 134 
          src={ownerFileVideo}
- 
 
 135 
          controls
- 
 
 136 
          poster={ownerFileImagepreview}
- 
 
 137 
          preload="none"
- 
 
 138 
        />
- 
 
 139 
      }
- 
 
 140 
      {ownerFileDocument &&
- 
 
 141 
        <a href={ownerFileDocument} target="_blank" rel="noreferrer">
- 
 
 142 
          Descargar
- 
 
 143 
        </a>
- 
 
 144 
      }
- 
 
 145 
    </>
- 
 
 146 
  )
- 
 
 147 
}
- 
 
 148 
 
- 
 
 149 
const Header = ({
- 
 
 150 
  image,
- 
 
 151 
  name,
- 
 
 152 
  timeElapsed
- 
 
 153 
}) => {
- 
 
 154 
  return (
- 
 
 155 
    <div className='feed__header'>
- 
 
 156 
      <Avatar
- 
 
 157 
        imageUrl={image}
- 
 
 158 
        name={name}
- 
 
 159 
        size='xl'
- 
 
 160 
      />
- 
 
 161 
      <div className='feed__info'>
- 
 
 162 
        <h2>{name}</h2>
79 
      <div className='feed__buttons'>
 163 
        <div className='time__elapse'>
80 
        <InputOption Icon={ThumbUpAltOutlinedIcon} title='Like' color='gray' />
 164 
          <p>
81 
        <InputOption Icon={ChatOutlinedIcon} title='Comment' color='gray' />
 165 
            {timeElapsed}
Línea -... Línea 166...
- 
 
 166 
          </p>
- 
 
 167 
          <AccessTimeIcon className='time__elapse-icon' />
- 
 
 168 
        </div>
82 
        <InputOption Icon={ShareOutlinedIcon} title='Share' color='gray' />
 169 
      </div>