WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/dashboard/post/post.js

 /* eslint-disable react/prop-types */
 import React, { useEffect, useState } from 'react'
+import parse from 'html-react-parser'
 import { axios } from '../../utils'
+import { useDispatch } from 'react-redux'
+import { setIntlLabels } from '../../redux/intl/intl.action'
+import { ReactionButton } from '../components/feed/withReaction'
 import { addNotification } from '../../redux/notification/notification.actions'
-import parse from 'html-react-parser'
 // Components
 import HomeNews from '../components/home-section/HomeNews'
 import InputOption from '../templates/linkedin/Feed/InputOption'
+import withExternalShare from '../templates/linkedin/Feed/withExternalShare'
-import withExternalShare from '../templates/linkedin/Feed/withExternalShare'
-// Icons
-import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined'
+import FeedCommentSection from '../components/feed/feed-comment/FeedCommentSection'
 import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt'
 import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
+import AccessTimeIcon from '@mui/icons-material/AccessTime'
+import RecommendIcon from '@mui/icons-material/Recommend'
+import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
+import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
-import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
-import AccessTimeIcon from '@mui/icons-material/AccessTime'
+import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
-// Styles
-import '../templates/linkedin/Feed/Feed.scss'
-import FeedCommentSection from '../components/feed/feed-comment/FeedCommentSection'
+import TungstenIcon from '@mui/icons-material/Tungsten'
-import { useDispatch } from 'react-redux'
 import { setIntlLabels } from '../../redux/intl/intl.action'
+import '../templates/linkedin/Feed/Feed.scss'
 export default function PostView({ post, labels }) {
-export default function PostView({ post, labels }) {
+  const [externalShare, setExternalShare] = useState(post.total_share_external)
-  const [isLiked, setIsLiked] = useState(post.is_liked)
+  const [ownerReactions, setOwnerReaction] = useState(post.reactions)
-  const [externalShare, setExternalShare] = useState(post.total_share_external)
+  const [totalReactions, setTotalReactions] = useState(0)
+  const [comments, setComments] = useState([])
+  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
+  const [showComments, setShowComments] = useState(false)
+  const dispatch = useDispatch()
+  const reactionsOptions = [
+    {
+      type: 'r',
+      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
+    },
+    {
+      type: 's',
+      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
+    },
+    {
+      type: 'l',
+      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
+    },
+    {
+      type: 'i',
+      icon: (
+        <TungstenIcon
+          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
+        />
+      ),
+    },
+    {
-  const [comments, setComments] = useState([])
+      type: 'f',
-  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
+      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
-  const [showComments, setShowComments] = useState(false)
+    },
   const dispatch = useDispatch()
       shareUrl: post.share_increment_external_counter_url,
       setValue: handleExternalShare,
+    }
+  )
-  const handleLike = (url) => {
-    axios.post(url).then(({ data: response }) => {
-      if (!response.success) {
-        addNotification({ style: 'danger', msg: response.data })
-        return
-      }
-      setIsLiked(!isLiked)
-    })
-  }
   const htmlParsedText = (fullStringText) => {
     const fullText = parse(fullStringText)
     if (fullStringText.length > 500) {
       const shortenedString = fullStringText.substr(0, 500)
+      )
+    }
     return <p>{fullText}</p>
+  }
+  const saveReaction = async (type) => {
+    const reactionTypesUrl = {
+      r: post.save_reaction_recommended_url,
+      s: post.save_reaction_support_url,
+      l: post.save_reaction_love_url,
+      i: post.save_reaction_interest_url,
+      f: post.save_reaction_fun_url,
+    }
+    await axios.post(reactionTypesUrl[type]).then((res) => {
+      const { success, data } = res.data
+      if (!success) {
+        dispatch(addNotification({ style: 'danger', msg: data }))
+      }
+      setOwnerReaction(data.reactions)
+      return true
+    })
+  }
+  const deleteReaction = async () => {
+    await axios.post(post.delete_reaction_url).then((res) => {
+      const { success, data } = res.data
+      if (!success) {
+        dispatch(addNotification({ style: 'danger', msg: data }))
+        return
+      }
+      setOwnerReaction(data.reactions)
+      return true
+    })
+  }
   useEffect(() => {
     dispatch(setIntlLabels(labels))
   }, [])
   useEffect(() => {
+    if (showComments && !comments.length) getComments()
+  }, [showComments])
+  useEffect(() => {
+    const feedReactions = ownerReactions.reduce(
+      (acc, reaction) => acc + Number(reaction.total),
+    )
-    if (showComments && !comments.length) getComments()
+    setTotalReactions(feedReactions)
-  }, [showComments])
+  }, [ownerReactions])
   return (
     <div className="container">
       <div className="d-flex flex-column flex-md-row" style={{ gap: '1rem' }}>
         <div className="col-12 col-md-8 p-0">
           <div className="feed">
-            <div className="feed__body">
+            <div className="_body">
               {post.image && (
                 <img
                   src={`/storage/type/post/code/${post.uuid}/filename/${post.image}`}
                   className="Entradas"
                   loading="lazy"
                 />
               )}
             </div>
-            <div className="feed__body">
+            <div className="_body">
-              <div className="feed__header">
+              <div className="_header">
-                <div className="feed__info">
+                <div className="_info">
                   <h2>{post.title}</h2>
                   <div className="time__elapse">
             <div
               className="px-3 d-flex align-items-center justify-content-end"
               style={{ gap: '5px' }}
+            >
               {!!externalShare && (
-                <span>{`${externalShare} ${LABELS.SENDS.toLowerCase()}`}</span>
+                <span>{`${externalShare} ${labels.SENDS.toLowerCase()}`}</span>
               )}
             </div>
-            <div className="feed__buttons">
+            <div className="reactions-counter">
-              <InputOption
+              {reactionsOptions
-                Icon={isLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
+                .filter((option) =>
-                title={isLiked ? LABELS.UNLIKE : LABELS.LIKE}
+                  ownerReactions.find(
-                color={isLiked ? '#7405f9' : 'gray'}
+                    (reaction) => reaction.reaction === option.type
-                onClick={() =>
+                  )
+                )
-                  handleLike(isLiked ? post.unlike_url : post.like_url)
+                .map((reaction) => reaction.icon)}
+              <span>{totalReactions} reacciones</span>
-                }
+            </div>
+            <div className="_buttons">
+              <ReactionButton
+                onSelect={saveReaction}
+                onDelete={deleteReaction}
+                myReaction={post.my_reaction}
               />
               <InputOption
                 Icon={ChatOutlinedIcon}
-                title={LABELS.COMMENTS}
+                title={labels.COMMENTS}
                 color="gray"
                 onClick={displayCommentSection}
               />
               <ExternalShareButton />
             </div>

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/dashboard/post/post.js – Rev 5617 → 5812