Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 634 | Rev 645 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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