Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6863 Rev 6865
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from '../../utils'
 2 
import { axios } from '../../utils'
3 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from 'react-redux'
4 
import { useLocation } from 'react-router-dom'
 4 
import { useLocation, useParams } from 'react-router-dom'
5 
import { addNotification } from '../../redux/notification/notification.actions'
 5 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import EditIcon from '@mui/icons-material/EditOutlined'
 6 
import EditIcon from '@mui/icons-material/EditOutlined'
Línea 7... Línea 7...
7 
 
 7 
 
8 
import Avatar from '../UI/AvatarImage'
 8 
import Avatar from '../UI/AvatarImage'
9 
import CoverModal from '../cover/CoverModal'
 9 
import CoverModal from '../cover/CoverModal'
Línea 10... Línea 10...
10 
import ImageModal from '../modals/ImageModal'
 10 
import ImageModal from '../modals/ImageModal'
11 
 
 11 
 
12 
const GroupActions = ({
 - 
 
13 
  cover,
 12 
const GroupActions = ({
14 
  groupId,
 13 
  cover,
15 
  name,
 14 
  name,
16 
  image,
 - 
 
17 
  groupType,
 - 
 
18 
  linkInmail,
 15 
  image,
19 
  actionLinks,
 16 
  groupType,
20 
  accessibility,
 17 
  accessibility,
- 
 
 18 
  coverSize,
- 
 
 19 
  imageSize,
- 
 
 20 
  linkInmail,
- 
 
 21 
  linkAccept,
- 
 
 22 
  linkCancel,
21 
  imageProfileCover,
 23 
  linkLeave,
22 
  imageSizeCover,
 24 
  linkRequest,
23 
}) => {
 - 
 
24 
  const [coverImg, setCoverImg] = useState(
 - 
 
25 
    `/storage/type/group-cover/code/${groupId}/filename/${cover}`
 25 
}) => {
26 
  )
 - 
 
27 
  const [profileImg, setProfileImg] = useState(
 - 
 
28 
    `/storage/type/group/code/${groupId}/filename/${image}`
 26 
  const [profileImg, setProfileImg] = useState('')
29 
  )
 27 
  const [coverImg, setCoverImg] = useState('')
30 
  const [isEdit, setIsEdit] = useState(false)
 - 
 
31 
  const [modalToShow, setModalToShow] = useState(null)
 28 
  const [isEdit, setIsEdit] = useState(false)
- 
 
 29 
  const [modalToShow, setModalToShow] = useState(null)
- 
 
 30 
  const { pathname } = useLocation()
Línea 32... Línea 31...
32 
  const dispatch = useDispatch()
 31 
  const { uuid } = useParams()
33 
  const { pathname } = useLocation()
 32 
  const dispatch = useDispatch()
34 
 
 33 
 
Línea 54... Línea 53...
54 
 
 53 
 
55 
  useEffect(() => {
 54 
  useEffect(() => {
56 
    setIsEdit(pathname.includes('edit'))
 55 
    setIsEdit(pathname.includes('edit'))
Línea -... Línea 56...
- 
 
 56 
  }, [pathname])
- 
 
 57 
 
- 
 
 58 
  useEffect(() => {
- 
 
 59 
    setCoverImg(`/storage/type/group-cover/code/${uuid}/filename/${cover}`)
- 
 
 60 
    setProfileImg(`/storage/type/group/code/${uuid}/filename/${image}`)
57 
  }, [pathname])
 61 
  }, [cover, image])
58 
 
 62 
 
59 
  return (
 63 
  return (
60 
    <>
 64 
    <>
61 
      <div className="group__actions">
 65 
      <div className="group__actions">
Línea 93... Línea 97...
93 
            {linkInmail && (
 97 
            {linkInmail && (
94 
              <a href={linkInmail} className="button btn btn-primary">
 98 
              <a href={linkInmail} className="button btn btn-primary">
95 
                Contactar con el Administrador
 99 
                Contactar con el Administrador
96 
              </a>
 100 
              </a>
97 
            )}
 101 
            )}
98 
            {actionLinks?.link_accept && (
 102 
            {linkAccept && (
99 
              <button
 103 
              <button
100 
                onClick={() => handleActionLink(actionLinks?.link_accept)}
 104 
                onClick={() => handleActionLink(linkAccept)}
101 
                className="button btn btn-primary"
 105 
                className="button btn btn-primary"
102 
              >
 106 
              >
103 
                Aceptar invitacion
 107 
                Aceptar invitacion
104 
              </button>
 108 
              </button>
105 
            )}
 109 
            )}
106 
            {actionLinks?.link_cancel && (
 110 
            {linkCancel && (
107 
              <button
 111 
              <button
108 
                onClick={() => handleActionLink(actionLinks?.link_cancel)}
 112 
                onClick={() => handleActionLink(linkCancel)}
109 
                className="button btn btn-secondary"
 113 
                className="button btn btn-secondary"
110 
              >
 114 
              >
111 
                Cancelar invitacion
 115 
                Cancelar invitacion
112 
              </button>
 116 
              </button>
113 
            )}
 117 
            )}
114 
            {actionLinks?.link_leave && (
 118 
            {linkLeave && (
115 
              <button
 119 
              <button
116 
                onClick={() => handleActionLink(actionLinks?.link_leave)}
 120 
                onClick={() => handleActionLink(linkLeave)}
117 
                className="button btn btn-secondary"
 121 
                className="button btn btn-secondary"
118 
              >
 122 
              >
119 
                Abandonar grupo
 123 
                Abandonar grupo
120 
              </button>
 124 
              </button>
121 
            )}
 125 
            )}
122 
            {actionLinks?.link_request && (
 126 
            {linkRequest && (
123 
              <button
 127 
              <button
124 
                onClick={() => handleActionLink(actionLinks?.link_request)}
 128 
                onClick={() => handleActionLink(linkRequest)}
125 
                className="button btn btn-primary"
 129 
                className="button btn btn-primary"
126 
              >
 130 
              >
127 
                {accessibility === 'Auto unirse'
 131 
                {accessibility === 'Auto unirse'
128 
                  ? 'Unirse'
 132 
                  ? 'Unirse'
129 
                  : 'Solicitar membresia'}
 133 
                  : 'Solicitar membresia'}
Línea 132... Línea 136...
132 
          </div>
 136 
          </div>
133 
        </div>
 137 
        </div>
134 
      </div>
 138 
      </div>
135 
      <CoverModal
 139 
      <CoverModal
136 
        isOpen={modalToShow === 'cover'}
 140 
        isOpen={modalToShow === 'cover'}
137 
        sizes={imageSizeCover}
 141 
        sizes={coverSize}
138 
        onClose={() => closeModal()}
 142 
        onClose={() => closeModal()}
139 
        onComplete={(newImage) => setCoverImg(newImage)}
 143 
        onComplete={(newImage) => setCoverImg(newImage)}
140 
      />
 144 
      />
141 
      <ImageModal
 145 
      <ImageModal
142 
        show={modalToShow === 'image'}
 146 
        show={modalToShow === 'image'}
143 
        id={groupId}
 147 
        id={uuid}
144 
        sizes={imageProfileCover}
 148 
        sizes={imageSize}
145 
        onClose={() => closeModal()}
 149 
        onClose={() => closeModal()}
146 
        onComplete={(newImage) => setProfileImg(newImage)}
 150 
        onComplete={(newImage) => setProfileImg(newImage)}
147 
      />
 151 
      />
148 
    </>
 152 
    </>
149 
  )
 153 
  )