Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 1979 Rev 2134
Línea 1... Línea 1...
1 
import React, { useRef, useState, useEffect } from "react";
 1 
import React, { useRef, useState, useEffect } from 'react'
2 
import { useDispatch } from "react-redux";
 2 
import { useDispatch } from 'react-redux'
3 
import { axios, debounce } from "../../../utils";
 3 
import { axios, debounce } from '../../../utils'
4 
import useOutsideClick from "../../../hooks/useOutsideClick";
 4 
import useOutsideClick from '../../../hooks/useOutsideClick'
5 
 
 5 
 
- 
 
 6 
import { REACTIONS } from '@app/constants/feed'
6 
import { addNotification } from "../../../redux/notification/notification.actions";
 7 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
 
 8 
 
8 
import ReactionIcon from "@mui/icons-material/Recommend";
 9 
import ReactionIcon from '@mui/icons-material/Recommend'
9 
import FunIcon from "../icons/Fun";
 - 
 
10 
import LoveItIcon from "../icons/LoveIt";
 - 
 
11 
import SupportIcon from "../icons/Support";
 - 
 
12 
import InterestIcon from "../icons/Interest";
 - 
 
13 
import RecommendIcon from "../icons/Recommned";
 - 
 
Línea 14... Línea 10...
14 
 
 10 
 
15 
const initialReaction = {
 11 
const initialReaction = {
16 
  label: "Reaccionar",
 12 
  label: 'Reaccionar',
17 
  icon: <ReactionIcon />,
 13 
  icon: <ReactionIcon />,
18 
  type: "default",
 14 
  type: 'default'
Línea 19... Línea 15...
19 
};
 15 
}
20 
 
 16 
 
21 
const ReactionsButton = ({
 17 
const ReactionsButton = ({
22 
  currentReaction,
 18 
  currentReaction,
23 
  onChange = () => null,
 19 
  onChange = () => null,
24 
  withLabel,
 20 
  withLabel,
25 
  saveUrl,
 21 
  saveUrl,
26 
  deleteUrl,
 22 
  deleteUrl,
27 
  ...rest
 23 
  ...rest
28 
}) => {
 24 
}) => {
29 
  const [reaction, setReaction] = useState(initialReaction);
 25 
  const [reaction, setReaction] = useState(initialReaction)
30 
  const [isHover, setIsHover] = useState(false);
 26 
  const [isHover, setIsHover] = useState(false)
31 
  const rectionBtn = useRef(null);
 27 
  const rectionBtn = useRef(null)
32 
  const dispatch = useDispatch();
 - 
 
33 
  useOutsideClick(rectionBtn, () => setIsHover(false));
 - 
 
34 
 
 - 
 
35 
  const reactions = [
 - 
 
36 
    {
 - 
 
37 
      type: "r",
 - 
 
38 
      icon: <RecommendIcon />,
 - 
 
39 
      label: "Me gusta",
 - 
 
40 
    },
 - 
 
41 
    {
 - 
 
42 
      type: "s",
 - 
 
43 
      icon: <SupportIcon />,
 - 
 
44 
      label: "Dar apoyo",
 - 
 
45 
    },
 - 
 
46 
    {
 - 
 
47 
      type: "l",
 - 
 
48 
      icon: <LoveItIcon />,
 - 
 
49 
      label: "Me encanta",
 - 
 
50 
    },
 - 
 
51 
    {
 - 
 
52 
      type: "i",
 - 
 
53 
      icon: <InterestIcon />,
 - 
 
54 
      label: "Me interesa",
 - 
 
55 
    },
 - 
 
56 
    {
 - 
 
57 
      type: "f",
 - 
 
58 
      icon: <FunIcon />,
 - 
 
59 
      label: "Me divierte",
 - 
 
Línea 60... Línea 28...
60 
    },
 28 
  const dispatch = useDispatch()
61 
  ];
 29 
  useOutsideClick(rectionBtn, () => setIsHover(false))
62 
 
 30 
 
Línea 63... Línea 31...
63 
  const saveReaction = (type) => {
 31 
  const saveReaction = (type) => {
64 
    const formData = new FormData();
 32 
    const formData = new FormData()
Línea 65... Línea 33...
65 
    formData.append("reaction", type);
 33 
    formData.append('reaction', type)
66 
 
 34 
 
67 
    axios.post(saveUrl, formData).then((res) => {
 35 
    axios.post(saveUrl, formData).then((res) => {
68 
      const { success, data } = res.data;
 36 
      const { success, data } = res.data
Línea 69... Línea 37...
69 
 
 37 
 
70 
      if (!success) {
 38 
      if (!success) {
Línea 71... Línea 39...
71 
        dispatch(addNotification({ style: "danger", msg: data }));
 39 
        dispatch(addNotification({ style: 'danger', msg: data }))
72 
        return;
 40 
        return
73 
      }
 41 
      }
Línea 74... Línea 42...
74 
 
 42 
 
75 
      const newReaction = reactions.find((reaction) => reaction.type === type);
 43 
      const newReaction = REACTIONS.find((reaction) => reaction.type === type)
76 
      setReaction(newReaction);
 44 
      setReaction(newReaction)
Línea 77... Línea 45...
77 
 
 45 
 
78 
      onChange(data);
 46 
      onChange(data)
79 
    });
 47 
    })
80 
  };
 48 
  }
Línea 81... Línea 49...
81 
 
 49 
 
82 
  const deleteReaction = () => {
 50 
  const deleteReaction = () => {
83 
    axios.post(deleteUrl).then((res) => {
 51 
    axios.post(deleteUrl).then((res) => {
84 
      const { success, data } = res.data;
 52 
      const { success, data } = res.data
Línea 85... Línea 53...
85 
 
 53 
 
Línea 86... Línea 54...
86 
      if (!success) {
 54 
      if (!success) {
Línea 87... Línea 55...
87 
        dispatch(addNotification({ style: "danger", msg: data }));
 55 
        dispatch(addNotification({ style: 'danger', msg: data }))
88 
        return;
 - 
 
89 
      }
 56 
        return
90 
 
 - 
 
Línea 91... Línea 57...
91 
      onChange(data);
 57 
      }
92 
      setReaction(initialReaction);
 58 
 
93 
    });
 59 
      onChange(data)
94 
  };
 60 
      setReaction(initialReaction)
Línea 95... Línea 61...
95 
 
 61 
    })
96 
  const onHover = debounce(() => setIsHover(true), 500);
 62 
  }
Línea 97... Línea 63...
97 
 
 63 
 
98 
  const onUnhover = debounce(() => setIsHover(false), 500);
 64 
  const onHover = debounce(() => setIsHover(true), 500)
99 
 
 65 
 
100 
  useEffect(() => {
 66 
  const onUnhover = debounce(() => setIsHover(false), 500)
101 
    const currentOption = reactions.find(
 67 
 
102 
      ({ type }) => type === currentReaction
 68 
  useEffect(() => {
103 
    );
 69 
    const currentOption = REACTIONS.find(({ type }) => type === currentReaction)
104 
 
 70 
 
105 
    if (!currentOption) {
 71 
    if (!currentOption) {
106 
      setReaction(initialReaction);
 72 
      setReaction(initialReaction)
107 
      return;
 73 
      return
108 
    }
 74 
    }
109 
 
 75 
 
110 
    setReaction(currentOption);
 76 
    setReaction(currentOption)
111 
  }, [currentReaction]);
 77 
  }, [currentReaction])
112 
 
 78 
 
113 
  return (
 79 
  return (
114 
    <>
 80 
    <>
115 
      <button
 81 
      <button
116 
        {...rest}
 82 
        {...rest}
117 
        onMouseOver={onHover}
 83 
        onMouseOver={onHover}
118 
        onMouseOut={onUnhover}
 84 
        onMouseOut={onUnhover}
119 
        ref={rectionBtn}
 85 
        ref={rectionBtn}
120 
        onClick={() =>
 86 
        onClick={() =>
121 
          reaction.type !== "default"
 87 
          reaction.type !== 'default'
122 
            ? deleteReaction()
 88 
            ? deleteReaction()
123 
            : saveReaction(reactions[0].type)
 89 
            : saveReaction(REACTIONS[0].type)
124 
        }
 90 
        }
125 
      >
 91 
      >
126 
        {reaction.icon}
 92 
        {reaction.icon}
127 
        {withLabel && reaction.label}
 93 
        {withLabel && reaction.label}
128 
        <div className={`reactions ${isHover ? "active" : ""}`}>
 94 
        <div className={`reactions ${isHover ? 'active' : ''}`}>
129 
          {reactions.map(({ icon, type, label }) => (
 95 
          {REACTIONS.map(({ icon, type, label }) => (
Línea 130... Línea 96...
130 
            <button
 96 
            <button