Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 200
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 
import TungstenIcon from '@mui/icons-material/Tungsten'
 9 
import TungstenIcon from "@mui/icons-material/Tungsten";
10 
import RecommendIcon from '@mui/icons-material/Recommend'
 10 
import RecommendIcon from "@mui/icons-material/Recommend";
11 
import AccessTimeIcon from '@mui/icons-material/AccessTime'
 11 
import AccessTimeIcon from "@mui/icons-material/AccessTime";
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,
18 
import { CommentForm, CommentsList } from '../../components/feed/CommentSection'
 21 
} from "../../components/feed/CommentSection";
19 
import HomeNews from '../../components/widgets/default/HomeNews'
 22 
import HomeNews from "../../components/widgets/default/HomeNews";
20 
import InputOption from '../../components/feed/linkedin/InputOption'
 23 
import InputOption from "../../components/dashboard/linkedin/action-button/InputOption";
21 
import ReactionsButton from '../../components/UI/buttons/ReactionsButton'
 24 
import ReactionsButton from "../../components/UI/buttons/ReactionsButton";
22 
import withExternalShare from '../../components/feed/linkedin/withExternalShare'
 25 
import withExternalShare from "../../components/dashboard/linkedin/withExternalShare";
Línea 23... Línea 26...
23 
 
 26 
 
24 
const PostViewPage = () => {
 27 
const PostViewPage = () => {
25 
  const [post, setPost] = useState({})
 28 
  const [post, setPost] = useState({});
26 
  const [totalSends, setTotalSends] = useState(0)
 29 
  const [totalSends, setTotalSends] = useState(0);
27 
  const [reactions, setReactions] = useState([])
 30 
  const [reactions, setReactions] = useState([]);
28 
  const [myReaction, setMyReaction] = useState('')
 31 
  const [myReaction, setMyReaction] = useState("");
29 
  const [totalReactions, setTotalReactions] = useState(0)
 32 
  const [totalReactions, setTotalReactions] = useState(0);
30 
  const [comments, setComments] = useState([])
 33 
  const [comments, setComments] = useState([]);
31 
  const [readMore, setReadMore] = useState(false)
 34 
  const [readMore, setReadMore] = useState(false);
32 
  const [showComments, setShowComments] = useState(false)
 35 
  const [showComments, setShowComments] = useState(false);
33 
  const labels = useSelector(({ intl }) => intl.labels)
 36 
  const labels = useSelector(({ intl }) => intl.labels);
34 
  const dispatch = useDispatch()
 37 
  const dispatch = useDispatch();
Línea 35... Línea 38...
35 
  const { pathname } = useLocation()
 38 
  const { pathname } = useLocation();
36 
 
 39 
 
37 
  const reactionsOptions = [
 40 
  const reactionsOptions = [
38 
    {
 41 
    {
39 
      type: 'r',
 42 
      type: "r",
40 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
 43 
      icon: <RecommendIcon style={{ color: "#7405f9" }} />,
41 
    },
 44 
    },
42 
    {
 45 
    {
43 
      type: 's',
 46 
      type: "s",
44 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
 47 
      icon: <VolunteerActivismIcon style={{ color: "#6495ED" }} />,
45 
    },
 48 
    },
46 
    {
 49 
    {
47 
      type: 'l',
 50 
      type: "l",
48 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
 51 
      icon: <FavoriteIcon style={{ color: "#DF704D" }} />,
49 
    },
 52 
    },
50 
    {
 53 
    {
51 
      type: 'i',
 54 
      type: "i",
52 
      icon: (
 55 
      icon: (
53 
        <TungstenIcon
 56 
        <TungstenIcon
54 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
 57 
          style={{ color: "#F5BB5C", transform: "rotate(180deg)" }}
55 
        />
 58 
        />
56 
      ),
 59 
      ),
57 
    },
 60 
    },
58 
    {
 61 
    {
59 
      type: 'f',
 62 
      type: "f",
60 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
 63 
      icon: <EmojiEmotionsIcon style={{ color: "#FF7F50" }} />,
Línea 61... Línea 64...
61 
    },
 64 
    },
Línea 62... Línea 65...
62 
  ]
 65 
  ];
63 
 
 66 
 
64 
  const readMoreHandler = () => setReadMore(!readMore)
 67 
  const readMoreHandler = () => setReadMore(!readMore);
Línea 65... Línea 68...
65 
 
 68 
 
66 
  const displayCommentSection = () => {
 69 
  const displayCommentSection = () => {
67 
    setShowComments(!showComments)
 70 
    setShowComments(!showComments);
Línea 68... Línea 71...
68 
  }
 71 
  };
69 
 
 72 
 
70 
  const getComments = () => {
 73 
  const getComments = () => {
Línea 71... Línea 74...
71 
    axios.get(post.comments_url).then((response) => {
 74 
    axios.get(post.comments_url).then((response) => {
72 
      const { data, success } = response.data
 75 
      const { data, success } = response.data;
73 
 
 76 
 
Línea 74... Línea 77...
74 
      if (!success) {
 77 
      if (!success) {
75 
        const errorMessage =
 78 
        const errorMessage =
76 
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'
 79 
          typeof data === "string" ? data : "Error interno. Intente más tarde.";
Línea 77... Línea 80...
77 
 
 80 
 
78 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 81 
        dispatch(addNotification({ style: "danger", msg: errorMessage }));
79 
        return
 82 
        return;
Línea 80... Línea 83...
80 
      }
 83 
      }
81 
 
 84 
 
82 
      setComments(data)
 85 
      setComments(data);
83 
    })
 86 
    });
84 
  }
 87 
  };
85 
 
 88 
 
86 
  const handleExternalShare = (value) => {
 89 
  const handleExternalShare = (value) => {
87 
    setTotalSends(value)
 90 
    setTotalSends(value);
88 
  }
 91 
  };
89 
 
 92 
 
90 
  const ExternalShareButton = withExternalShare(
 93 
  const ExternalShareButton = withExternalShare(
91 
    InputOption,
 94 
    InputOption,
Línea 92... Línea 95...
92 
    post.share_external_url,
 95 
    post.share_external_url,
93 
    {
 96 
    {
94 
      Icon: SendOutlinedIcon,
 97 
      Icon: SendOutlinedIcon,
95 
      color: 'gray',
 98 
      color: "gray",
96 
      title: 'Enviar',
 99 
      title: "Enviar",
97 
      shareUrl: post.share_increment_external_counter_url,
 100 
      shareUrl: post.share_increment_external_counter_url,
98 
      setValue: handleExternalShare,
 101 
      setValue: handleExternalShare,
99 
      withTitle: true,
 102 
      withTitle: true,
100 
    }
 103 
    }
101 
  )
 104 
  );
102 
 
 105 
 
103 
  const htmlParsedText = (fullStringText) => {
 106 
  const htmlParsedText = (fullStringText) => {
104 
    const fullText = parse(fullStringText)
 107 
    const fullText = parse(fullStringText);
105 
    if (fullStringText.length > 500) {
 108 
    if (fullStringText.length > 500) {
106 
      const shortenedString = fullStringText.substr(0, 500)
 109 
      const shortenedString = fullStringText.substr(0, 500);
107 
      const shortenedText = parse(`${shortenedString}... `)
 110 
      const shortenedText = parse(`${shortenedString}... `);
Línea 108... Línea 111...
108 
      return (
 111 
      return (
109 
        <>
 112 
        <>
110 
          {readMore ? fullText : shortenedText}
 113 
          {readMore ? fullText : shortenedText}
Línea 111... Línea 114...
111 
          <span className="cursor-pointer" onClick={readMoreHandler}>
 114 
          <span className="cursor-pointer" onClick={readMoreHandler}>
112 
            {readMore ? ' Leer menos' : ' Leer más'}
 115 
            {readMore ? " Leer menos" : " Leer más"}
Línea 113... Línea 116...
113 
          </span>
 116 
          </span>
114 
        </>
 117 
        </>
115 
      )
 118 
      );
Línea 116... Línea 119...
116 
    }
 119 
    }
117 
    return <p>{fullText}</p>
 120 
    return <p>{fullText}</p>;
118 
  }
 121 
  };
Línea 119... Línea 122...
119 
 
 122 
 
120 
  const addComment = ({ comment }) => {
 123 
  const addComment = ({ comment }) => {
121 
    const formData = new FormData()
 124 
    const formData = new FormData();
Línea 122... Línea 125...
122 
    formData.append('comment', comment)
 125 
    formData.append("comment", comment);
123 
 
 126 
 
124 
    axios.post(post.comments_add_url, formData).then((response) => {
 127 
    axios.post(post.comments_add_url, formData).then((response) => {
125 
      const { success, data } = response.data
 128 
      const { success, data } = response.data;
126 
 
 129 
 
Línea 127... Línea 130...
127 
      if (!success) {
 130 
      if (!success) {
128 
        const errorMessage =
 131 
        const errorMessage =
129 
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'
 132 
          typeof data === "string" ? data : "Error interno. Intente más tarde.";
130 
 
 133 
 
131 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 134 
        dispatch(addNotification({ style: "danger", msg: errorMessage }));
Línea 132... Línea 135...
132 
        return
 135 
        return;
133 
      }
 136 
      }
134 
 
 137 
 
Línea 135... Línea 138...
135 
      setComments((prevMessages) => [...prevMessages, data])
 138 
      setComments((prevMessages) => [...prevMessages, data]);
136 
    })
 139 
    });
137 
  }
 140 
  };
138 
 
 141 
 
139 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
 142 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
140 
    axios
 143 
    axios
141 
      .post(deleteCommentUrl)
 144 
      .post(deleteCommentUrl)
142 
      .then((response) => {
 145 
      .then((response) => {
143 
        const { success, data } = response.data
 146 
        const { success, data } = response.data;
144 
 
 147 
 
Línea 145... Línea 148...
145 
        if (!success) {
 148 
        if (!success) {
146 
          const errorMessage =
 149 
          const errorMessage =
147 
            typeof data === 'string'
 150 
            typeof data === "string"
148 
              ? data
 151 
              ? data
149 
              : 'Error interno. Intente más tarde.'
 152 
              : "Error interno. Intente más tarde.";
150 
 
 153 
 
151 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 154 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
152 
          return
 155 
          return;
153 
        }
 156 
        }
154 
 
 157 
 
155 
        setComments((prevComments) =>
 158 
        setComments((prevComments) =>
156 
          prevComments.filter((comment) => comment.unique !== commentUnique)
 159 
          prevComments.filter((comment) => comment.unique !== commentUnique)
157 
        )
 160 
        );
158 
        dispatch(addNotification({ style: 'success', msg: data }))
 161 
        dispatch(addNotification({ style: "success", msg: data }));
159 
      })
 162 
      })
160 
      .catch((error) => {
 163 
      .catch((error) => {
161 
        dispatch(addNotification({ style: 'danger', msg: error }))
 164 
        dispatch(addNotification({ style: "danger", msg: error }));
Línea 162... Línea 165...
162 
        throw new Error(error)
 165 
        throw new Error(error);
163 
      })
 166 
      });
164 
  }
 167 
  };
165 
 
 168 
 
166 
  useEffect(() => {
 169 
  useEffect(() => {
Línea 167... Línea 170...
167 
    getBackendVars(pathname)
 170 
    getBackendVars(pathname)
168 
      .then((post) => {
 171 
      .then((post) => {
169 
        setMyReaction(post.my_reaction)
 172 
        setMyReaction(post.my_reaction);
170 
        setTotalSends(post.total_share_external)
 173 
        setTotalSends(post.total_share_external);
171 
        setPost(post)
 174 
        setPost(post);
Línea 172... Línea 175...
172 
      })
 175 
      })
173 
      .catch((error) => {
 176 
      .catch((error) => {
Línea 174... Línea 177...
174 
        dispatch(
 177 
        dispatch(
175 
          addNotification({
 178 
          addNotification({
176 
            style: 'danger',
 179 
            style: "danger",
177 
            message: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
 180 
            message: "Error interno. Por favor, inténtelo de nuevo más tarde.",
Línea 269... Línea 272...
269 
        <Col md="4">
 272 
        <Col md="4">
270 
          <HomeNews currentPost={post.uuid} />
 273 
          <HomeNews currentPost={post.uuid} />
271 
        </Col>
 274 
        </Col>
272 
      </Row>
 275 
      </Row>
273 
    </Container>
 276 
    </Container>
274 
  )
 277 
  );
275 
}
 278 
};
Línea 276... Línea 279...
276 
 
 279