Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4061 Rev 5115
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useRef, useState } from 'react'
 2 
import React, { useEffect, useRef, useState } from 'react'
3 
import { useDispatch } from 'react-redux';
 3 
import { useDispatch } from 'react-redux'
4 
import { deleteFeed } from '../../../redux/feed/feed.actions';
 4 
import { deleteFeed } from '../../../redux/feed/feed.actions'
5 
import { addNotification } from '../../../redux/notification/notification.actions';
 5 
import { addNotification } from '../../../redux/notification/notification.actions'
6 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal';
 6 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
7 
import { axios } from '../../../utils';
 7 
import { axios } from '../../../utils'
Línea 8... Línea 8...
8 
 
 8 
 
9 
const FeedHeader = ({
 9 
const FeedHeader = ({
10 
    ownerName,
 10 
  ownerName,
11 
    ownerImage,
 11 
  ownerImage,
12 
    ownerTimeElapse,
 12 
  ownerTimeElapse,
13 
    ownerUrl,
 13 
  ownerUrl,
14 
    feedDeleteUrl,
 14 
  feedDeleteUrl,
15 
    feedUnique
 15 
  feedUnique
16 
}) => {
 - 
 
17 
 
 16 
}) => {
18 
    const [showConfirmModal, setShowConfirmModal] = useState(false);
 17 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
19 
    const [displayOption, setDisplayOption] = useState(false)
 18 
  const [displayOption, setDisplayOption] = useState(false)
20 
    const deleteButton = useRef();
 19 
  const deleteButton = useRef()
21 
    const dispatch = useDispatch()
 20 
  const dispatch = useDispatch()
22 
 
 21 
 
23 
    const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal);
 22 
  const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal)
24 
 
 23 
 
25 
    const deleteFeedHandler = () => {
 24 
  const deleteFeedHandler = () => {
26 
        axios.post(feedDeleteUrl)
 25 
    axios.post(feedDeleteUrl)
27 
            .then((res) => {
 26 
      .then((res) => {
28 
                const { data } = res
 27 
        const { data } = res
29 
                if (!data.success) {
 28 
        if (!data.success) {
30 
                    dispatch(addNotification({ style: "danger", msg: data.data }))
 - 
 
31 
                    return
 - 
 
32 
                }
 - 
 
33 
                dispatch(addNotification({ style: "success", msg: data.data }))
 - 
 
34 
                handleShowConfirmModal()
 - 
 
35 
                dispatch(deleteFeed(feedUnique));
 29 
          dispatch(addNotification({ style: 'danger', msg: data.data }))
36 
            });
 - 
 
37 
    };
 - 
 
38 
 
 - 
 
39 
    useEffect(() => {
 - 
 
40 
        const handleClickOutside = (event) => {
 - 
 
41 
            if (deleteButton.current && !deleteButton.current.contains(event.target)) {
 - 
 
42 
                setDisplayOption(false)
 - 
 
43 
            }
 30 
          return
- 
 
 31 
        }
- 
 
 32 
        dispatch(addNotification({ style: 'success', msg: data.data }))
- 
 
 33 
        handleShowConfirmModal()
- 
 
 34 
        dispatch(deleteFeed(feedUnique))
- 
 
 35 
      })
- 
 
 36 
  }
- 
 
 37 
 
- 
 
 38 
  useEffect(() => {
- 
 
 39 
    const handleClickOutside = (event) => {
- 
 
 40 
      if (deleteButton.current && !deleteButton.current.contains(event.target)) {
- 
 
 41 
        setDisplayOption(false)
- 
 
 42 
      }
44 
        }
 43 
    }
45 
        document.addEventListener("mousedown", handleClickOutside);
 44 
    document.addEventListener('mousedown', handleClickOutside)
46 
 
 45 
 
47 
        return () => {
 46 
    return () => {
48 
            document.removeEventListener("mousedown", handleClickOutside);
 47 
      document.removeEventListener('mousedown', handleClickOutside)
49 
        };
 48 
    }
Línea 50... Línea 49...
50 
    }, [deleteButton]);
 49 
  }, [deleteButton])
51 
 
 50 
 
52 
    return (
 51 
  return (
53 
        <>
 52 
        <>
54 
            <div className="post_topbar" >
 53 
            <div className="post_topbar" >
55 
                <div className="usy-dt">
 54 
                <div className="usy-dt">
56 
                    <a href={ownerUrl}>
 55 
                    <a href={ownerUrl}>
57 
                        <img
 56 
                        <img
58 
                            src={ownerImage}
 57 
                            src={ownerImage}
59 
                            alt=""
 58 
                            alt=""
60 
                            style={{ width: "50px", height: "auto", }}
 59 
                            style={{ width: '50px', height: 'auto' }}
61 
                        />
 60 
                        />
62 
                    </a>
 61 
                    </a>
63 
                    <div className="usy-name">
 62 
                    <div className="usy-name">
Línea 83... Línea 82...
83 
                                        className="option-btn"
 82 
                                        className="option-btn"
84 
                                        onClick={handleShowConfirmModal}
 83 
                                        onClick={handleShowConfirmModal}
85 
                                        ref={deleteButton}
 84 
                                        ref={deleteButton}
86 
                                    >
 85 
                                    >
87 
                                        <i className="fa fa-trash-o mr-1" />
 86 
                                        <i className="fa fa-trash-o mr-1" />
88 
                                        Borrar
 87 
                                        {LABELS.DELETE}
89 
                                    </button>
 88 
                                    </button>
90 
                                </li>
 89 
                                </li>
91 
                            </ul>
 90 
                            </ul>
92 
                        </div>
 91 
                        </div>
93 
                        <ConfirmModal
 92 
                        <ConfirmModal
Línea 98... Línea 97...
98 
                        />
 97 
                        />
99 
                    </div>
 98 
                    </div>
100 
                }
 99 
                }
101 
            </div >
 100 
            </div >
102 
        </>
 101 
        </>
103 
    )
 102 
  )
104 
}
 103 
}
Línea 105... Línea -...
105 
 
 - 
 
106 
export default FeedHeader
 104 
 
- 
 
 105 
export default FeedHeader