Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 639 Rev 735
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from "../../utils";
 2 
import { axios } from '../../utils'
3 
import { useLocation } from "react-router-dom";
 3 
import { useLocation } from 'react-router-dom'
4 
import { getBackendVars } from "../../services/backendVars";
 4 
import { getBackendVars } from '../../services/backendVars'
5 
import { addNotification } from "../../redux/notification/notification.actions";
 5 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import { Col, Container, Row } from "react-bootstrap";
 6 
import { Col, Container, Row } from 'react-bootstrap'
7 
import { useDispatch, useSelector } from "react-redux";
 7 
import { useDispatch, useSelector } from 'react-redux'
8 
import parse from "html-react-parser";
 8 
import parse from 'html-react-parser'
9 
 
 9 
 
10 
import TungstenIcon from "@mui/icons-material/Tungsten";
 10 
import TungstenIcon from '@mui/icons-material/Tungsten'
11 
import RecommendIcon from "@mui/icons-material/Recommend";
 11 
import RecommendIcon from '@mui/icons-material/Recommend'
12 
import FavoriteIcon from "@mui/icons-material/FavoriteTwoTone";
 12 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
13 
import SendOutlinedIcon from "@mui/icons-material/SendOutlined";
 13 
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
14 
import ChatOutlinedIcon from "@mui/icons-material/ChatOutlined";
 14 
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
15 
import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
 15 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
16 
import VolunteerActivismIcon from "@mui/icons-material/VolunteerActivism";
 16 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
17 
 
 17 
 
18 
import {
 - 
 
19 
  CommentForm,
 - 
 
20 
  CommentsList,
 - 
 
21 
} from "../../components/feed/CommentSection";
 18 
import { CommentForm, CommentsList } from '../../components/feed/CommentSection'
22 
import HomeNews from "../../components/widgets/default/HomeNews";
 19 
import HomeNews from '../../components/widgets/default/HomeNews'
23 
import InputOption from "../../components/dashboard/linkedin/action-button/InputOption";
 20 
import InputOption from '../../components/dashboard/linkedin/action-button/InputOption'
24 
import withExternalShare from "../../components/dashboard/linkedin/withExternalShare";
 21 
import withExternalShare from '../../components/dashboard/linkedin/withExternalShare'
25 
import Paraphrase from "../../components/UI/Paraphrase";
 22 
import Paraphrase from '../../components/UI/Paraphrase'
26 
import StyledContainer from "../../components/widgets/WidgetLayout";
 23 
import StyledContainer from '../../components/widgets/WidgetLayout'
27 
import withReactions from "../../hocs/withReaction";
 24 
import withReactions from '../../hocs/withReaction'
28 
import MobileShare from "../../components/dashboard/linkedin/mobile-share/MobileShare";
 25 
import MobileShare from '../../components/dashboard/linkedin/mobile-share/MobileShare'
Línea 29... Línea 26...
29 
 
 26 
 
30 
const PostViewPage = () => {
 27 
const PostViewPage = () => {
31 
  const [post, setPost] = useState({});
 28 
  const [post, setPost] = useState({})
32 
  const [totalSends, setTotalSends] = useState(0);
 29 
  const [totalSends, setTotalSends] = useState(0)
33 
  const [reactions, setReactions] = useState([]);
 30 
  const [reactions, setReactions] = useState([])
34 
  const [myReaction, setMyReaction] = useState("");
 31 
  const [myReaction, setMyReaction] = useState('')
35 
  const [totalReactions, setTotalReactions] = useState(0);
 32 
  const [totalReactions, setTotalReactions] = useState(0)
36 
  const [isMobile, setIsMobile] = useState(false);
 33 
  const [isMobile, setIsMobile] = useState(false)
37 
  const [comments, setComments] = useState([]);
 34 
  const [comments, setComments] = useState([])
38 
  const [showComments, setShowComments] = useState(false);
 35 
  const [showComments, setShowComments] = useState(false)
39 
  const labels = useSelector(({ intl }) => intl.labels);
 36 
  const labels = useSelector(({ intl }) => intl.labels)
40 
  const dispatch = useDispatch();
 37 
  const dispatch = useDispatch()
Línea 41... Línea 38...
41 
  const { pathname } = useLocation();
 38 
  const { pathname } = useLocation()
42 
 
 39 
 
43 
  const reactionsOptions = [
 40 
  const reactionsOptions = [
44 
    {
 41 
    {
45 
      type: "r",
 42 
      type: 'r',
46 
      icon: <RecommendIcon style={{ color: "#7405f9" }} />,
 43 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />
47 
    },
 44 
    },
48 
    {
 45 
    {
49 
      type: "s",
 46 
      type: 's',
50 
      icon: <VolunteerActivismIcon style={{ color: "#6495ED" }} />,
 47 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />
51 
    },
 48 
    },
52 
    {
 49 
    {
53 
      type: "l",
 50 
      type: 'l',
54 
      icon: <FavoriteIcon style={{ color: "#DF704D" }} />,
 51 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />
55 
    },
 52 
    },
56 
    {
 53 
    {
57 
      type: "i",
 54 
      type: 'i',
58 
      icon: (
 55 
      icon: (
59 
        <TungstenIcon
 56 
        <TungstenIcon
60 
          style={{ color: "#F5BB5C", transform: "rotate(180deg)" }}
 57 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
61 
        />
 58 
        />
62 
      ),
 59 
      )
63 
    },
 60 
    },
64 
    {
 61 
    {
65 
      type: "f",
 62 
      type: 'f',
66 
      icon: <EmojiEmotionsIcon style={{ color: "#FF7F50" }} />,
 63 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />
Línea 67... Línea 64...
67 
    },
 64 
    }
68 
  ];
 65 
  ]
69 
 
 66 
 
Línea 70... Línea 67...
70 
  const displayCommentSection = () => {
 67 
  const displayCommentSection = () => {
71 
    setShowComments(!showComments);
 68 
    setShowComments(!showComments)
72 
  };
 69 
  }
Línea 73... Línea 70...
73 
 
 70 
 
74 
  const getComments = () => {
 71 
  const getComments = () => {
75 
    axios.get(post.comments_url).then((response) => {
 72 
    axios.get(post.comments_url).then((response) => {
Línea 76... Línea 73...
76 
      const { data, success } = response.data;
 73 
      const { data, success } = response.data
77 
 
 74 
 
78 
      if (!success) {
 75 
      if (!success) {
Línea 79... Línea 76...
79 
        const errorMessage =
 76 
        const errorMessage =
80 
          typeof data === "string" ? data : "Error interno. Intente más tarde.";
 77 
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'
81 
 
 78 
 
Línea 82... Línea 79...
82 
        dispatch(addNotification({ style: "danger", msg: errorMessage }));
 79 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
83 
        return;
 80 
        return
84 
      }
 81 
      }
Línea 85... Línea 82...
85 
 
 82 
 
86 
      setComments(data);
 83 
      setComments(data)
87 
    });
 84 
    })
88 
  };
 85 
  }
Línea 89... Línea 86...
89 
 
 86 
 
90 
  const handleExternalShare = (value) => {
 87 
  const handleExternalShare = (value) => {
91 
    setTotalSends(value);
 88 
    setTotalSends(value)
92 
  };
 89 
  }
93 
 
 90 
 
94 
  const ExternalShareButton = withExternalShare(
 91 
  const ExternalShareButton = withExternalShare(
Línea 95... Línea 92...
95 
    InputOption,
 92 
    InputOption,
96 
    post.share_external_url
 93 
    post.share_external_url
97 
  );
 94 
  )
Línea 98... Línea 95...
98 
 
 95 
 
99 
  const ReactionButton = withReactions(InputOption, {
 96 
  const ReactionButton = withReactions(InputOption, {
Línea 100... Línea 97...
100 
    saveUrl: post.save_reaction_url,
 97 
    saveUrl: post.save_reaction_url,
101 
    deleteUrl: post.delete_reaction_url,
 98 
    deleteUrl: post.delete_reaction_url,
102 
    currentReaction: myReaction,
 99 
    currentReaction: myReaction,
Línea 103... Línea 100...
103 
    onSelect: (reactions) => setReactions(reactions),
 100 
    onSelect: (reactions) => setReactions(reactions)
104 
  });
 101 
  })
105 
 
 102 
 
Línea 106... Línea 103...
106 
  const addComment = ({ comment }) => {
 103 
  const addComment = (comment) => {
107 
    const formData = new FormData();
 104 
    const formData = new FormData()
108 
    formData.append("comment", comment);
 105 
    formData.append('comment', comment)
Línea 109... Línea 106...
109 
 
 106 
 
110 
    axios.post(post.comments_add_url, formData).then((response) => {
 107 
    axios.post(post.comments_add_url, formData).then((response) => {
111 
      const { success, data } = response.data;
 108 
      const { success, data } = response.data
112 
 
 109 
 
113 
      if (!success) {
 110 
      if (!success) {
Línea 114... Línea 111...
114 
        const errorMessage =
 111 
        const errorMessage =
115 
          typeof data === "string" ? data : "Error interno. Intente más tarde.";
 112 
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'
116 
 
 113 
 
117 
        dispatch(addNotification({ style: "danger", msg: errorMessage }));
 114 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
118 
        return;
 115 
        return
Línea 119... Línea 116...
119 
      }
 116 
      }
120 
 
 117 
 
121 
      setComments((prevMessages) => [...prevMessages, data]);
 118 
      setComments((prevMessages) => [...prevMessages, data])
Línea 122... Línea 119...
122 
    });
 119 
    })
123 
  };
 120 
  }
124 
 
 121 
 
125 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
 122 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
126 
    axios
 123 
    axios
127 
      .post(deleteCommentUrl)
 124 
      .post(deleteCommentUrl)
128 
      .then((response) => {
 125 
      .then((response) => {
129 
        const { success, data } = response.data;
 126 
        const { success, data } = response.data
130 
 
 127 
 
131 
        if (!success) {
 128 
        if (!success) {
Línea 132... Línea 129...
132 
          const errorMessage =
 129 
          const errorMessage =
133 
            typeof data === "string"
 130 
            typeof data === 'string'
134 
              ? data
 131 
              ? data
135 
              : "Error interno. Intente más tarde.";
 132 
              : 'Error interno. Intente más tarde.'
136 
 
 133 
 
137 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
 134 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
138 
          return;
 135 
          return
139 
        }
 136 
        }
140 
 
 137 
 
141 
        setComments((prevComments) =>
 138 
        setComments((prevComments) =>
142 
          prevComments.filter((comment) => comment.unique !== commentUnique)
 139 
          prevComments.filter((comment) => comment.unique !== commentUnique)
143 
        );
 140 
        )
144 
        dispatch(addNotification({ style: "success", msg: data }));
 141 
        dispatch(addNotification({ style: 'success', msg: data }))
145 
      })
 142 
      })
146 
      .catch((error) => {
 143 
      .catch((error) => {
147 
        dispatch(addNotification({ style: "danger", msg: error }));
 144 
        dispatch(addNotification({ style: 'danger', msg: error }))
Línea 148... Línea 145...
148 
        throw new Error(error);
 145 
        throw new Error(error)
149 
      });
 146 
      })
150 
  };
 147 
  }
151 
 
 148 
 
152 
  useEffect(() => {
 149 
  useEffect(() => {
Línea 153... Línea 150...
153 
    getBackendVars(pathname)
 150 
    getBackendVars(pathname)
154 
      .then((post) => {
 151 
      .then((post) => {
155 
        setMyReaction(post.my_reaction);
 152 
        setMyReaction(post.my_reaction)
156 
        setTotalSends(post.total_share_external);
 153 
        setTotalSends(post.total_share_external)
157 
        setPost(post);
 154 
        setPost(post)
Línea 158... Línea 155...
158 
      })
 155 
      })
159 
      .catch(() => {
 156 
      .catch(() => {
Línea 160... Línea 157...
160 
        dispatch(
 157 
        dispatch(
161 
          addNotification({
 158 
          addNotification({
162 
            style: "danger",
 159 
            style: 'danger',
Línea 163... Línea 160...
163 
            message: "Error interno. Por favor, inténtelo de nuevo más tarde.",
 160 
            message: 'Error interno. Por favor, inténtelo de nuevo más tarde.'
164 
          })
 161 
          })
165 
        );
 162 
        )
166 
      });
 163 
      })
Línea 167... Línea 164...
167 
  }, [pathname]);
 164 
  }, [pathname])
168 
 
 165 
 
169 
  useEffect(() => {
 166 
  useEffect(() => {
170 
    if (showComments && !comments.length) {
 167 
    if (showComments && !comments.length) {
171 
      getComments();
 168 
      getComments()
172 
    }
 169 
    }
173 
  }, [showComments]);
 170 
  }, [showComments])
174 
 
 171 
 
175 
  useEffect(() => {
 172 
  useEffect(() => {
176 
    const feedReactions = reactions.reduce(
 173 
    const feedReactions = reactions.reduce(
177 
      (acc, reaction) => acc + Number(reaction.total),
 174 
      (acc, reaction) => acc + Number(reaction.total),
178 
      0
 175 
      0
179 
    );
 176 
    )
180 
 
 177 
 
181 
    setTotalReactions(feedReactions);
 178 
    setTotalReactions(feedReactions)
182 
  }, [reactions]);
 179 
  }, [reactions])
183 
 
 180 
 
184 
  useEffect(() => {
 181 
  useEffect(() => {
185 
    const ua = navigator.userAgent.toLowerCase();
 182 
    const ua = navigator.userAgent.toLowerCase()
186 
    const isAndroid = ua.includes("android");
 183 
    const isAndroid = ua.includes('android')
187 
 
 184 
 
188 
    if (isAndroid) {
 185 
    if (isAndroid) {
Línea 220... Línea 217...
220 
            </div>
 217 
            </div>
221 
            <StyledContainer.Actions>
 218 
            <StyledContainer.Actions>
222 
              <ReactionButton />
 219 
              <ReactionButton />
223 
              <InputOption
 220 
              <InputOption
224 
                icon={ChatOutlinedIcon}
 221 
                icon={ChatOutlinedIcon}
225 
                iconColor="gray"
 222 
                iconColor='gray'
226 
                label={labels.comment}
 223 
                label={labels.comment}
227 
                onClick={displayCommentSection}
 224 
                onClick={displayCommentSection}
228 
              />
 225 
              />
229 
              {!isMobile ? (
 226 
              {!isMobile ? (
230 
                <ExternalShareButton
 227 
                <ExternalShareButton
231 
                  icon={SendOutlinedIcon}
 228 
                  icon={SendOutlinedIcon}
232 
                  iconColor="gray"
 229 
                  iconColor='gray'
233 
                  label={labels.send}
 230 
                  label={labels.send}
234 
                  shareUrl={post.increment_external_counter_url}
 231 
                  shareUrl={post.increment_external_counter_url}
235 
                  setValue={handleExternalShare}
 232 
                  setValue={handleExternalShare}
236 
                />
 233 
                />
237 
              ) : (
 234 
              ) : (
238 
                <MobileShare
 235 
                <MobileShare
239 
                  shareData={{
 236 
                  shareData={{
240 
                    title: "Leaders Linked",
 237 
                    title: 'Leaders Linked',
241 
                    text: parse(post.description),
 238 
                    text: parse(post.description),
242 
                    url: post.share_external_url,
 239 
                    url: post.share_external_url
243 
                  }}
 240 
                  }}
244 
                >
 241 
                >
245 
                  <SendOutlinedIcon />
 242 
                  <SendOutlinedIcon />
246 
                  {labels.send}
 243 
                  {labels.send}
247 
                </MobileShare>
 244 
                </MobileShare>
248 
              )}
 245 
              )}
249 
            </StyledContainer.Actions>
 246 
            </StyledContainer.Actions>
250 
            {showComments && (
 247 
            {showComments && (
251 
              <>
 248 
              <div className='px-3 pb-2'>
252 
                <CommentForm onSubmit={addComment} />
 249 
                <CommentForm onSubmit={addComment} />
253 
                <CommentsList comments={comments} onDelete={deleteComment} />
 250 
                <CommentsList comments={comments} onDelete={deleteComment} />
254 
              </>
 251 
              </div>
255 
            )}
 252 
            )}
256 
          </StyledContainer>
 253 
          </StyledContainer>
257 
        </Col>
 254 
        </Col>
258 
        <Col md="4">
 255 
        <Col md='4'>
259 
          <HomeNews currentPost={post.uuid} />
 256 
          <HomeNews currentPost={post.uuid} />
260 
        </Col>
 257 
        </Col>
261 
      </Row>
 258 
      </Row>
262 
    </Container>
 259 
    </Container>
263 
  );
 260 
  )
264 
};
 261 
}
Línea 265... Línea 262...
265 
 
 262