Proyectos de Subversion LeadersLinked - SPA

Rev

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

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