Proyectos de Subversion LeadersLinked - SPA

Rev

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

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