Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5911 Rev 5946
Línea 1... Línea 1...
1 
/* eslint-disable camelcase */
 1 
/* eslint-disable camelcase */
2 
/* eslint-disable react/prop-types */
 2 
/* eslint-disable react/prop-types */
3 
import React, { useEffect, useRef, useState } from 'react'
 3 
import React, { useEffect, useRef, useState } from 'react'
4 
import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined'
 - 
 
5 
import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt'
 - 
 
6 
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
 4 
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
7 
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'
 5 
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'
8 
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
 6 
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
9 
import RecommendIcon from '@mui/icons-material/Recommend'
 - 
 
10 
import InputOption from './InputOption'
 7 
import InputOption from './InputOption'
11 
import parse from 'html-react-parser'
 8 
import parse from 'html-react-parser'
12 
import Avatar from '../../../../shared/Avatar/Avatar'
 9 
import Avatar from '../../../../shared/Avatar/Avatar'
13 
import AccessTimeIcon from '@mui/icons-material/AccessTime'
 10 
import AccessTimeIcon from '@mui/icons-material/AccessTime'
14 
import { axios } from '../../../../utils'
 11 
import { axios } from '../../../../utils'
Línea 20... Línea 17...
20 
import { connect, useDispatch } from 'react-redux'
 17 
import { connect, useDispatch } from 'react-redux'
21 
import withExternalShare from './withExternalShare'
 18 
import withExternalShare from './withExternalShare'
22 
import ConfirmModal from '../../../../shared/confirm-modal/ConfirmModal'
 19 
import ConfirmModal from '../../../../shared/confirm-modal/ConfirmModal'
23 
import { deleteFeed } from '../../../../redux/feed/feed.actions'
 20 
import { deleteFeed } from '../../../../redux/feed/feed.actions'
24 
import FeedModal from '../../../components/feed/FeedModal'
 21 
import FeedModal from '../../../components/feed/FeedModal'
- 
 
 22 
import withReactions from '../../../components/feed/withReaction'
- 
 
 23 
import RecommendIcon from '@mui/icons-material/Recommend'
- 
 
 24 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
- 
 
 25 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
- 
 
 26 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
- 
 
 27 
import TungstenIcon from '@mui/icons-material/Tungsten'
Línea 25... Línea 28...
25 
 
 28 
 
26 
const Feed = (props) => {
 29 
const Feed = (props) => {
27 
  const {
 30 
  const {
28 
    isShare = false,
 31 
    isShare = false,
29 
    feed_unique,
 - 
 
30 
    feed_is_liked,
 - 
 
31 
    feed_like_url,
 - 
 
32 
    feed_unlike_url,
 32 
    feed_unique,
33 
    feed_share_url,
 33 
    feed_share_url,
34 
    feed_share_external_url,
 34 
    feed_share_external_url,
- 
 
 35 
    feed_delete_url,
- 
 
 36 
    feed_my_reaction,
- 
 
 37 
    feed_save_reaction_recommended_url,
- 
 
 38 
    feed_save_reaction_support_url,
- 
 
 39 
    feed_save_reaction_love_url,
- 
 
 40 
    feed_save_reaction_interest_url,
- 
 
 41 
    feed_save_reaction_fun_url,
35 
    feed_delete_url,
 42 
    feed_delete_reaction_url,
36 
    feed_likes,
 43 
    feed_reactions,
37 
    owner_url,
 44 
    owner_url,
38 
    owner_image,
 45 
    owner_image,
39 
    owner_name,
 46 
    owner_name,
40 
    owner_description,
 47 
    owner_description,
Línea 59... Línea 66...
59 
    shared_url,
 66 
    shared_url,
60 
    feed_increment_external_counter_url,
 67 
    feed_increment_external_counter_url,
61 
    addNotification, // REDUX ACTION
 68 
    addNotification, // REDUX ACTION
62 
    openShareModal, // REDUX ACTION
 69 
    openShareModal, // REDUX ACTION
63 
  } = props
 70 
  } = props
64 
 
 - 
 
65 
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked)
 71 
  const [ownerReactions, setOwnerReaction] = useState(feed_reactions)
66 
  const [likesState, setLikesState] = useState(feed_likes)
 72 
  const [currentReaction, setCurrentReaction] = useState(feed_my_reaction)
- 
 
 73 
  const [totalReactions, setTotalReactions] = useState(0)
67 
  const [totalComments, setTotalComments] = useState(owner_comments)
 74 
  const [totalComments, setTotalComments] = useState(owner_comments)
68 
  const [externalShare, setExternalShare] = useState(owner_external_shared)
 75 
  const [externalShare, setExternalShare] = useState(owner_external_shared)
69 
  const [sharedState, setSharedState] = useState(owner_shared)
 76 
  const [sharedState, setSharedState] = useState(owner_shared)
70 
  const [showComments, setShowComments] = useState(false)
 77 
  const [showComments, setShowComments] = useState(false)
71 
  const [showModal, setShowModal] = useState(false)
 78 
  const [showModal, setShowModal] = useState(false)
Línea 72... Línea 79...
72 
 
 79 
 
- 
 
 80 
  const reactionsOptions = [
- 
 
 81 
    {
- 
 
 82 
      type: 'r',
- 
 
 83 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
- 
 
 84 
    },
- 
 
 85 
    {
- 
 
 86 
      type: 's',
- 
 
 87 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
- 
 
 88 
    },
- 
 
 89 
    {
73 
  const handleLike = (url) => {
 90 
      type: 'l',
- 
 
 91 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
- 
 
 92 
    },
- 
 
 93 
    {
- 
 
 94 
      type: 'i',
74 
    axios.post(url).then(({ data: response }) => {
 95 
      icon: (
75 
      if (!response.success) {
 96 
        <TungstenIcon
76 
        addNotification({ style: 'danger', msg: response.data })
 97 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
77 
        return
 98 
        />
- 
 
 99 
      ),
- 
 
 100 
    },
78 
      }
 101 
    {
79 
      setLikesState(response.data.likes)
 102 
      type: 'f',
80 
      setFeedIsLiked(!feedIsLiked)
 103 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
81 
    })
 104 
    },
Línea 82... Línea 105...
82 
  }
 105 
  ]
83 
 
 106 
 
84 
  const handleShare = () =>
 107 
  const handleShare = () =>
85 
    openShareModal(
 108 
    openShareModal(
Línea 90... Línea 113...
90 
    )
 113 
    )
91 
  const handleExternalShare = (value) => setExternalShare(value)
 114 
  const handleExternalShare = (value) => setExternalShare(value)
Línea 92... Línea 115...
92 
 
 115 
 
Línea -... Línea 116...
- 
 
 116 
  const displayCommentSection = () => setShowComments(!showComments)
- 
 
 117 
 
- 
 
 118 
  const saveReaction = async (type) => {
- 
 
 119 
    const reactionTypesUrl = {
- 
 
 120 
      r: feed_save_reaction_recommended_url,
- 
 
 121 
      s: feed_save_reaction_support_url,
- 
 
 122 
      l: feed_save_reaction_love_url,
- 
 
 123 
      i: feed_save_reaction_interest_url,
- 
 
 124 
      f: feed_save_reaction_fun_url,
- 
 
 125 
    }
- 
 
 126 
 
- 
 
 127 
    await axios.post(reactionTypesUrl[type]).then((res) => {
- 
 
 128 
      const { success, data } = res.data
- 
 
 129 
 
- 
 
 130 
      if (!success) {
- 
 
 131 
        addNotification({ style: 'danger', msg: data })
- 
 
 132 
      }
- 
 
 133 
 
- 
 
 134 
      setOwnerReaction(data.reactions)
- 
 
 135 
      setCurrentReaction(type)
- 
 
 136 
    })
- 
 
 137 
  }
- 
 
 138 
 
- 
 
 139 
  const deleteReaction = async () => {
- 
 
 140 
    await axios.post(feed_delete_reaction_url).then((res) => {
- 
 
 141 
      const { success, data } = res.data
- 
 
 142 
 
- 
 
 143 
      if (!success) {
- 
 
 144 
        addNotification({ style: 'danger', msg: data })
- 
 
 145 
        return
- 
 
 146 
      }
- 
 
 147 
 
- 
 
 148 
      setOwnerReaction(data.reactions)
- 
 
 149 
      setCurrentReaction('')
- 
 
 150 
    })
93 
  const displayCommentSection = () => setShowComments(!showComments)
 151 
  }
94 
 
 152 
 
95 
  const ExternalShareButton = withExternalShare(
 153 
  const ExternalShareButton = withExternalShare(
96 
    InputOption,
 154 
    InputOption,
97 
    feed_share_external_url,
 155 
    feed_share_external_url,
Línea 103... Línea 161...
103 
      setValue: handleExternalShare,
 161 
      setValue: handleExternalShare,
104 
      withTitle: true,
 162 
      withTitle: true,
105 
    }
 163 
    }
106 
  )
 164 
  )
Línea -... Línea 165...
- 
 
 165 
 
- 
 
 166 
  const WithReactionIcon = withReactions(InputOption, {
- 
 
 167 
    onSelect: saveReaction,
- 
 
 168 
    onDelete: deleteReaction,
- 
 
 169 
    myReaction: currentReaction,
- 
 
 170 
    withTitle: true,
- 
 
 171 
  })
107 
 
 172 
 
Línea -... Línea 173...
- 
 
 173 
  useEffect(() => setSharedState(owner_shared), [owner_shared])
- 
 
 174 
 
- 
 
 175 
  useEffect(() => {
- 
 
 176 
    const feedReactions = ownerReactions.reduce(
- 
 
 177 
      (acc, reaction) => acc + Number(reaction.total),
- 
 
 178 
      0
- 
 
 179 
    )
- 
 
 180 
    setTotalReactions(feedReactions)
108 
  useEffect(() => setSharedState(owner_shared), [owner_shared])
 181 
  }, [ownerReactions])
109 
 
 182 
 
110 
  return (
 183 
  return (
111 
    <>
 184 
    <>
112 
      {showModal && (
 185 
      {showModal && (
Línea 153... Línea 226...
153 
          />
 226 
          />
154 
        </div>
 227 
        </div>
Línea 155... Línea 228...
155 
 
 228 
 
156 
        {!isShare && (
 229 
        {!isShare && (
- 
 
 230 
          <div className="px-3 d-flex align-items-center justify-content-between">
157 
          <div className="px-3 d-flex align-items-center justify-content-between">
 231 
            <div className="reactions-counter">
158 
            {!!likesState && (
 232 
              {reactionsOptions
- 
 
 233 
                .filter((option) =>
159 
              <div
 234 
                  ownerReactions.find(
160 
                className="d-inline-flex align-items-center"
 235 
                    (reaction) => reaction.reaction === option.type
161 
                style={{ gap: '.5rem' }}
 236 
                  )
162 
              >
 237 
                )
163 
                <RecommendIcon style={{ color: '#7405f9' }} />
 238 
                .map((reaction) => reaction.icon)}
164 
                <span>{likesState}</span>
 239 
              <span>{totalReactions} reacciones</span>
165 
              </div>
 - 
 
166 
            )}
 240 
            </div>
167 
            <div
 241 
            <div
168 
              className="d-inline-flex align-items-center"
 242 
              className="d-inline-flex align-items-center"
169 
              style={{ gap: '5px' }}
 243 
              style={{ gap: '5px' }}
170 
            >
 244 
            >
Línea 181... Línea 255...
181 
          </div>
 255 
          </div>
182 
        )}
 256 
        )}
Línea 183... Línea 257...
183 
 
 257 
 
184 
        {!isShare && (
 258 
        {!isShare && (
185 
          <div className="feed__buttons">
 - 
 
186 
            <InputOption
 - 
 
187 
              Icon={feedIsLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
 - 
 
188 
              title={LABELS.LIKE}
 - 
 
189 
              color={feedIsLiked ? '#7405f9' : 'gray'}
 - 
 
190 
              onClick={() =>
 - 
 
191 
                handleLike(feedIsLiked ? feed_unlike_url : feed_like_url)
 - 
 
192 
              }
 259 
          <div className="feed__buttons">
193 
              withTitle
 - 
 
194 
            />
 260 
            <WithReactionIcon withTitle />
195 
            <InputOption
 261 
            <InputOption
196 
              Icon={ChatOutlinedIcon}
 262 
              Icon={ChatOutlinedIcon}
197 
              title={LABELS.COMMENT}
 263 
              title={LABELS.COMMENT}
198 
              color="gray"
 264 
              color="gray"