Proyectos de Subversion LeadersLinked - SPA

Rev

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

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