Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5115 Rev 5697
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 { axios } from '../../../utils'
4 
import { deleteFeed } from '../../../redux/feed/feed.actions'
 4 
import { deleteFeed } from '../../../redux/feed/feed.actions'
- 
 
 5 
import { useDispatch } from 'react-redux'
5 
import { addNotification } from '../../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../../redux/notification/notification.actions'
- 
 
 7 
 
6 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
 8 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
7 
import { axios } from '../../../utils'
 9 
import GroupsRoundedIcon from '@mui/icons-material/GroupsRounded'
Línea 8... Línea 10...
8 
 
 10 
 
9 
const FeedHeader = ({
 11 
const FeedHeader = ({
10 
  ownerName,
 12 
  ownerName,
11 
  ownerImage,
 13 
  ownerImage,
12 
  ownerTimeElapse,
 14 
  ownerTimeElapse,
13 
  ownerUrl,
 15 
  ownerUrl,
14 
  feedDeleteUrl,
 16 
  feedDeleteUrl,
- 
 
 17 
  feedUnique,
15 
  feedUnique
 18 
  feedType,
16 
}) => {
 19 
}) => {
17 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
 20 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
18 
  const [displayOption, setDisplayOption] = useState(false)
 21 
  const [displayOption, setDisplayOption] = useState(false)
19 
  const deleteButton = useRef()
 22 
  const deleteButton = useRef()
Línea 20... Línea 23...
20 
  const dispatch = useDispatch()
 23 
  const dispatch = useDispatch()
Línea 21... Línea 24...
21 
 
 24 
 
22 
  const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal)
 25 
  const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal)
23 
 
 - 
 
24 
  const deleteFeedHandler = () => {
 26 
 
25 
    axios.post(feedDeleteUrl)
 27 
  const deleteFeedHandler = () => {
26 
      .then((res) => {
 28 
    axios.post(feedDeleteUrl).then((res) => {
27 
        const { data } = res
 29 
      const { data } = res
28 
        if (!data.success) {
 30 
      if (!data.success) {
29 
          dispatch(addNotification({ style: 'danger', msg: data.data }))
 31 
        dispatch(addNotification({ style: 'danger', msg: data.data }))
30 
          return
 32 
        return
31 
        }
 33 
      }
32 
        dispatch(addNotification({ style: 'success', msg: data.data }))
 34 
      dispatch(addNotification({ style: 'success', msg: data.data }))
33 
        handleShowConfirmModal()
 35 
      handleShowConfirmModal()
Línea 34... Línea 36...
34 
        dispatch(deleteFeed(feedUnique))
 36 
      dispatch(deleteFeed(feedUnique))
35 
      })
 37 
    })
- 
 
 38 
  }
- 
 
 39 
 
36 
  }
 40 
  useEffect(() => {
- 
 
 41 
    const handleClickOutside = (event) => {
37 
 
 42 
      if (
38 
  useEffect(() => {
 43 
        deleteButton.current &&
39 
    const handleClickOutside = (event) => {
 44 
        !deleteButton.current.contains(event.target)
40 
      if (deleteButton.current && !deleteButton.current.contains(event.target)) {
 45 
      ) {
Línea 47... Línea 52...
47 
      document.removeEventListener('mousedown', handleClickOutside)
 52 
      document.removeEventListener('mousedown', handleClickOutside)
48 
    }
 53 
    }
49 
  }, [deleteButton])
 54 
  }, [deleteButton])
Línea 50... Línea 55...
50 
 
 55 
 
51 
  return (
 56 
  return (
52 
        <>
 57 
    <>
53 
            <div className="post_topbar" >
 58 
      <div className="post_topbar">
54 
                <div className="usy-dt">
 59 
        <div className="usy-dt">
55 
                    <a href={ownerUrl}>
 60 
          <a href={ownerUrl}>
56 
                        <img
 61 
            <img
57 
                            src={ownerImage}
 62 
              src={ownerImage}
58 
                            alt=""
 63 
              alt=""
59 
                            style={{ width: '50px', height: 'auto' }}
 64 
              style={{ width: '50px', height: 'auto' }}
60 
                        />
 65 
            />
61 
                    </a>
 66 
          </a>
62 
                    <div className="usy-name">
 67 
          <div className="usy-name">
63 
                        <a href={ownerUrl}>
 68 
            <a href={ownerUrl}>
64 
                            <h3>{ownerName}</h3>
 69 
              <h3>{ownerName}</h3>
65 
                        </a>
 70 
            </a>
- 
 
 71 
            <span>
66 
                        <span>
 72 
              {feedType === 'g' && <GroupsRoundedIcon />}
67 
                            {ownerTimeElapse}
 73 
              {ownerTimeElapse}
68 
                        </span>
 74 
            </span>
69 
                    </div>
 75 
          </div>
70 
                </div>
 76 
        </div>
71 
                {feedDeleteUrl &&
 77 
        {feedDeleteUrl && (
72 
                    <div className="cursor-pointer d-flex align-items-center">
 78 
          <div className="cursor-pointer d-flex align-items-center">
73 
                        <img
 79 
            <img
74 
                            src='/images/icons/options.png'
 80 
              src="/images/icons/options.png"
75 
                            className='cursor-pointer img-icon options'
 81 
              className="cursor-pointer img-icon options"
76 
                            onClick={() => setDisplayOption(!displayOption)}
 82 
              onClick={() => setDisplayOption(!displayOption)}
77 
                        />
 83 
            />
78 
                        <div className={`feed-options ${displayOption ? 'active' : ''}`}>
 84 
            <div className={`feed-options ${displayOption ? 'active' : ''}`}>
79 
                            <ul>
 85 
              <ul>
80 
                                <li>
 86 
                <li>
81 
                                    <button
 87 
                  <button
82 
                                        className="option-btn"
 88 
                    className="option-btn"
83 
                                        onClick={handleShowConfirmModal}
 89 
                    onClick={handleShowConfirmModal}
84 
                                        ref={deleteButton}
 90 
                    ref={deleteButton}
85 
                                    >
 91 
                  >
86 
                                        <i className="fa fa-trash-o mr-1" />
 92 
                    <i className="fa fa-trash-o mr-1" />
87 
                                        {LABELS.DELETE}
 93 
                    {LABELS.DELETE}
88 
                                    </button>
 94 
                  </button>
89 
                                </li>
 95 
                </li>
90 
                            </ul>
 96 
              </ul>
91 
                        </div>
 97 
            </div>
92 
                        <ConfirmModal
 98 
            <ConfirmModal
93 
                            show={showConfirmModal}
 99 
              show={showConfirmModal}
94 
                            onClose={() => handleShowConfirmModal(false)}
 100 
              onClose={() => handleShowConfirmModal(false)}
95 
                            onAccept={deleteFeedHandler}
 101 
              onAccept={deleteFeedHandler}
96 
                            acceptLabel="Aceptar"
 102 
              acceptLabel="Aceptar"
97 
                        />
 103 
            />
98 
                    </div>
 104 
          </div>
99 
                }
 105 
        )}
100 
            </div >
 106 
      </div>
101 
        </>
 107 
    </>
102 
  )
 108 
  )
Línea 103... Línea 109...
103 
}
 109 
}