Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 200 Rev 520
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 
 
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,
 - 
 
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 ReactionsButton from "../../components/UI/buttons/ReactionsButton";
 21 
import ReactionsButton from '../../components/UI/buttons/ReactionsButton'
25 
import withExternalShare from "../../components/dashboard/linkedin/withExternalShare";
 22 
import withExternalShare from '../../components/dashboard/linkedin/withExternalShare'
- 
 
 23 
import Paraphrase from '../../components/UI/Paraphrase'
Línea 26... Línea 24...
26 
 
 24 
 
27 
const PostViewPage = () => {
 25 
const PostViewPage = () => {
28 
  const [post, setPost] = useState({});
 26 
  const [post, setPost] = useState({})
29 
  const [totalSends, setTotalSends] = useState(0);
 27 
  const [totalSends, setTotalSends] = useState(0)
30 
  const [reactions, setReactions] = useState([]);
 28 
  const [reactions, setReactions] = useState([])
31 
  const [myReaction, setMyReaction] = useState("");
 29 
  const [myReaction, setMyReaction] = useState('')
32 
  const [totalReactions, setTotalReactions] = useState(0);
 30 
  const [totalReactions, setTotalReactions] = useState(0)
33 
  const [comments, setComments] = useState([]);
 - 
 
34 
  const [readMore, setReadMore] = useState(false);
 31 
  const [comments, setComments] = useState([])
35 
  const [showComments, setShowComments] = useState(false);
 32 
  const [showComments, setShowComments] = useState(false)
36 
  const labels = useSelector(({ intl }) => intl.labels);
 33 
  const labels = useSelector(({ intl }) => intl.labels)
37 
  const dispatch = useDispatch();
 34 
  const dispatch = useDispatch()
Línea 38... Línea 35...
38 
  const { pathname } = useLocation();
 35 
  const { pathname } = useLocation()
39 
 
 36 
 
40 
  const reactionsOptions = [
 37 
  const reactionsOptions = [
41 
    {
 38 
    {
42 
      type: "r",
 39 
      type: 'r',
43 
      icon: <RecommendIcon style={{ color: "#7405f9" }} />,
 40 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
44 
    },
 41 
    },
45 
    {
 42 
    {
46 
      type: "s",
 43 
      type: 's',
47 
      icon: <VolunteerActivismIcon style={{ color: "#6495ED" }} />,
 44 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
48 
    },
 45 
    },
49 
    {
 46 
    {
50 
      type: "l",
 47 
      type: 'l',
51 
      icon: <FavoriteIcon style={{ color: "#DF704D" }} />,
 48 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
52 
    },
 49 
    },
53 
    {
 50 
    {
54 
      type: "i",
 51 
      type: 'i',
55 
      icon: (
 52 
      icon: (
56 
        <TungstenIcon
 53 
        <TungstenIcon
57 
          style={{ color: "#F5BB5C", transform: "rotate(180deg)" }}
 54 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
58 
        />
 55 
        />
59 
      ),
 56 
      ),
60 
    },
 57 
    },
61 
    {
 58 
    {
62 
      type: "f",
 59 
      type: 'f',
63 
      icon: <EmojiEmotionsIcon style={{ color: "#FF7F50" }} />,
 60 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
64 
    },
 - 
 
65 
  ];
 - 
 
Línea 66... Línea 61...
66 
 
 61 
    },
67 
  const readMoreHandler = () => setReadMore(!readMore);
 62 
  ]
68 
 
 63 
 
Línea 69... Línea 64...
69 
  const displayCommentSection = () => {
 64 
  const displayCommentSection = () => {
70 
    setShowComments(!showComments);
 65 
    setShowComments(!showComments)
71 
  };
 66 
  }
Línea 72... Línea 67...
72 
 
 67 
 
73 
  const getComments = () => {
 68 
  const getComments = () => {
74 
    axios.get(post.comments_url).then((response) => {
 69 
    axios.get(post.comments_url).then((response) => {
Línea 75... Línea 70...
75 
      const { data, success } = response.data;
 70 
      const { data, success } = response.data
76 
 
 71 
 
77 
      if (!success) {
 72 
      if (!success) {
Línea 78... Línea 73...
78 
        const errorMessage =
 73 
        const errorMessage =
79 
          typeof data === "string" ? data : "Error interno. Intente más tarde.";
 74 
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'
80 
 
 75 
 
Línea 81... Línea 76...
81 
        dispatch(addNotification({ style: "danger", msg: errorMessage }));
 76 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
82 
        return;
 77 
        return
83 
      }
 78 
      }
Línea 84... Línea 79...
84 
 
 79 
 
85 
      setComments(data);
 80 
      setComments(data)
86 
    });
 81 
    })
87 
  };
 - 
 
88 
 
 - 
 
89 
  const handleExternalShare = (value) => {
 - 
 
90 
    setTotalSends(value);
 - 
 
91 
  };
 - 
 
92 
 
 - 
 
93 
  const ExternalShareButton = withExternalShare(
 - 
 
94 
    InputOption,
 - 
 
95 
    post.share_external_url,
 82 
  }
96 
    {
 - 
 
97 
      Icon: SendOutlinedIcon,
 - 
 
98 
      color: "gray",
 - 
 
99 
      title: "Enviar",
 - 
 
100 
      shareUrl: post.share_increment_external_counter_url,
 - 
 
101 
      setValue: handleExternalShare,
 - 
 
102 
      withTitle: true,
 - 
 
103 
    }
 - 
 
104 
  );
 - 
 
105 
 
 - 
 
106 
  const htmlParsedText = (fullStringText) => {
 - 
 
107 
    const fullText = parse(fullStringText);
 - 
 
108 
    if (fullStringText.length > 500) {
 - 
 
109 
      const shortenedString = fullStringText.substr(0, 500);
 - 
 
110 
      const shortenedText = parse(`${shortenedString}... `);
 - 
 
111 
      return (
 - 
 
112 
        <>
 - 
 
Línea 113... Línea 83...
113 
          {readMore ? fullText : shortenedText}
 83 
 
114 
          <span className="cursor-pointer" onClick={readMoreHandler}>
 84 
  const handleExternalShare = (value) => {
115 
            {readMore ? " Leer menos" : " Leer más"}
 85 
    setTotalSends(value)
Línea 116... Línea 86...
116 
          </span>
 86 
  }
117 
        </>
 87 
 
Línea 118... Línea 88...
118 
      );
 88 
  const ExternalShareButton = withExternalShare(
119 
    }
 89 
    InputOption,
120 
    return <p>{fullText}</p>;
 90 
    post.share_external_url
Línea 121... Línea 91...
121 
  };
 91 
  )
122 
 
 92 
 
123 
  const addComment = ({ comment }) => {
 93 
  const addComment = ({ comment }) => {
Línea 124... Línea 94...
124 
    const formData = new FormData();
 94 
    const formData = new FormData()
125 
    formData.append("comment", comment);
 95 
    formData.append('comment', comment)
126 
 
 96 
 
Línea 127... Línea 97...
127 
    axios.post(post.comments_add_url, formData).then((response) => {
 97 
    axios.post(post.comments_add_url, formData).then((response) => {
128 
      const { success, data } = response.data;
 98 
      const { success, data } = response.data
129 
 
 99 
 
130 
      if (!success) {
 100 
      if (!success) {
131 
        const errorMessage =
 101 
        const errorMessage =
Línea 132... Línea 102...
132 
          typeof data === "string" ? data : "Error interno. Intente más tarde.";
 102 
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'
133 
 
 103 
 
134 
        dispatch(addNotification({ style: "danger", msg: errorMessage }));
 104 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
135 
        return;
 105 
        return
136 
      }
 106 
      }
Línea 137... Línea 107...
137 
 
 107 
 
138 
      setComments((prevMessages) => [...prevMessages, data]);
 108 
      setComments((prevMessages) => [...prevMessages, data])
139 
    });
 109 
    })
Línea 140... Línea 110...
140 
  };
 110 
  }
141 
 
 111 
 
142 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
 112 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
143 
    axios
 113 
    axios
144 
      .post(deleteCommentUrl)
 114 
      .post(deleteCommentUrl)
145 
      .then((response) => {
 115 
      .then((response) => {
146 
        const { success, data } = response.data;
 116 
        const { success, data } = response.data
147 
 
 117 
 
148 
        if (!success) {
 118 
        if (!success) {
149 
          const errorMessage =
 119 
          const errorMessage =
Línea 150... Línea 120...
150 
            typeof data === "string"
 120 
            typeof data === 'string'
151 
              ? data
 121 
              ? data
152 
              : "Error interno. Intente más tarde.";
 122 
              : 'Error interno. Intente más tarde.'
153 
 
 123 
 
154 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
 124 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
155 
          return;
 125 
          return
156 
        }
 126 
        }
157 
 
 127 
 
158 
        setComments((prevComments) =>
 128 
        setComments((prevComments) =>
159 
          prevComments.filter((comment) => comment.unique !== commentUnique)
 129 
          prevComments.filter((comment) => comment.unique !== commentUnique)
160 
        );
 130 
        )
161 
        dispatch(addNotification({ style: "success", msg: data }));
 131 
        dispatch(addNotification({ style: 'success', msg: data }))
162 
      })
 132 
      })
163 
      .catch((error) => {
 133 
      .catch((error) => {
164 
        dispatch(addNotification({ style: "danger", msg: error }));
 - 
 
165 
        throw new Error(error);
 134 
        dispatch(addNotification({ style: 'danger', msg: error }))
166 
      });
 135 
        throw new Error(error)
Línea 167... Línea 136...
167 
  };
 136 
      })
168 
 
 137 
  }
169 
  useEffect(() => {
 138 
 
170 
    getBackendVars(pathname)
 139 
  useEffect(() => {
171 
      .then((post) => {
 140 
    getBackendVars(pathname)
Línea 172... Línea 141...
172 
        setMyReaction(post.my_reaction);
 141 
      .then((post) => {
173 
        setTotalSends(post.total_share_external);
 142 
        setMyReaction(post.my_reaction)
174 
        setPost(post);
 143 
        setTotalSends(post.total_share_external)
175 
      })
 144 
        setPost(post)
176 
      .catch((error) => {
 145 
      })
Línea 177... Línea 146...
177 
        dispatch(
 146 
      .catch(() => {
178 
          addNotification({
 147 
        dispatch(
Línea 179... Línea 148...
179 
            style: "danger",
 148 
          addNotification({
180 
            message: "Error interno. Por favor, inténtelo de nuevo más tarde.",
 149 
            style: 'danger',
181 
          })
 150 
            message: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
182 
        );
 151 
          })
Línea 219... Línea 188...
219 
                    <p>{post.addedOn}</p>
 188 
                    <p>{post.addedOn}</p>
220 
                    <AccessTimeIcon className="time__elapse-icon" />
 189 
                    <AccessTimeIcon className="time__elapse-icon" />
221 
                  </div>
 190 
                  </div>
222 
                </div>
 191 
                </div>
223 
              </div>
 192 
              </div>
224 
              {post.description && htmlParsedText(post.description)}
 193 
              <Paraphrase>{post.description}</Paraphrase>
225 
              {post.file && (
 194 
              {post.file && (
226 
                <a href={post.file} download>
 195 
                <a href={post.file} download>
227 
                  <img
 196 
                  <img
228 
                    className="pdf"
 197 
                    className="pdf"
229 
                    src="/images/extension/pdf.png"
 198 
                    src="/images/extension/pdf.png"
Línea 251... Línea 220...
251 
                currentReaction={myReaction}
 220 
                currentReaction={myReaction}
252 
                withLabel
 221 
                withLabel
253 
                onChange={({ reactions }) => setReactions(reactions)}
 222 
                onChange={({ reactions }) => setReactions(reactions)}
254 
              />
 223 
              />
255 
              <InputOption
 224 
              <InputOption
256 
                Icon={ChatOutlinedIcon}
 225 
                icon={ChatOutlinedIcon}
257 
                title={labels.comments}
 226 
                label={labels.comments}
258 
                color="gray"
 227 
                iconColor="gray"
- 
 
 228 
                className="btn feed__share-option"
259 
                onClick={displayCommentSection}
 229 
                onClick={displayCommentSection}
260 
                withTitle
 - 
 
261 
              />
 230 
              />
262 
              <ExternalShareButton />
 231 
              <ExternalShareButton
- 
 
 232 
                icon={SendOutlinedIcon}
- 
 
 233 
                iconColor="gray"
- 
 
 234 
                label={labels.send}
- 
 
 235 
                shareUrl={post.increment_external_counter_url}
- 
 
 236 
                setValue={handleExternalShare}
- 
 
 237 
              />
263 
            </div>
 238 
            </div>
264 
            {showComments && (
 239 
            {showComments && (
265 
              <>
 240 
              <>
266 
                <CommentForm onSubmit={addComment} />
 241 
                <CommentForm onSubmit={addComment} />
267 
                <CommentsList comments={comments} onDelete={deleteComment} />
 242 
                <CommentsList comments={comments} onDelete={deleteComment} />
Línea 272... Línea 247...
272 
        <Col md="4">
 247 
        <Col md="4">
273 
          <HomeNews currentPost={post.uuid} />
 248 
          <HomeNews currentPost={post.uuid} />
274 
        </Col>
 249 
        </Col>
275 
      </Row>
 250 
      </Row>
276 
    </Container>
 251 
    </Container>
277 
  );
 252 
  )
278 
};
 253 
}
Línea 279... Línea 254...
279 
 
 254