Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4677 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4677 Rev 5894
Línea 2... Línea 2...
2 
import React, { useState } from 'react'
 2 
import React, { useState } from 'react'
3 
import { axios } from '../../../../../utils'
 3 
import { axios } from '../../../../../utils'
4 
import { addNotification } from '../../../../../redux/notification/notification.actions'
 4 
import { addNotification } from '../../../../../redux/notification/notification.actions'
5 
import Avatar from '../../../../../shared/Avatar/Avatar'
 5 
import Avatar from '../../../../../shared/Avatar/Avatar'
6 
import { useDispatch } from 'react-redux'
 6 
import { useDispatch } from 'react-redux'
7 
import CoverModal from '../../../../../shared/profile/edit/cover-section/CoverModal'
 7 
import CoverModal from '../../../../../shared/cover/CoverModal'
- 
 
 8 
import { coverTypes } from '../../../../../shared/cover/cover.types'
8 
import ImageModal from '../../../../../shared/profile/edit/profile-info/profile-img/ImageModal'
 9 
import ImageModal from '../../../../../shared/profile/edit/profile-info/profile-img/ImageModal'
9 
import { profileTypes } from '../../../../../shared/profile/Profile.types'
 10 
import { profileTypes } from '../../../../../shared/profile/Profile.types'
10 
import EditIcon from '@mui/icons-material/EditOutlined'
 11 
import EditIcon from '@mui/icons-material/EditOutlined'
Línea 11... Línea 12...
11 
 
 12 
 
- 
 
 13 
const GroupActions = ({
- 
 
 14 
  cover,
- 
 
 15 
  groupId,
- 
 
 16 
  name,
- 
 
 17 
  image,
- 
 
 18 
  groupType,
- 
 
 19 
  linkInmail,
- 
 
 20 
  actionLinks,
- 
 
 21 
  accessibility,
- 
 
 22 
  imageProfileCover,
- 
 
 23 
  imageSizeCover,
12 
const GroupActions = ({ cover, groupId, name, image, groupType, linkInmail, actionLinks, accessibility, imageProfileCover, imageSizeCover }) => {
 24 
}) => {
- 
 
 25 
  const [modalToShow, setModalToShow] = useState(null)
13 
    const [modalToShow, setModalToShow] = useState(null)
 26 
  const [coverImg, setCoverImg] = useState({
- 
 
 27 
    path: `/storage/type/group-cover/code/${groupId}/${
- 
 
 28 
      cover ? `filename/${cover}` : ''
- 
 
 29 
    }`,
- 
 
 30 
  })
14 
    const [coverImg, setCoverImg] = useState({ path: `/storage/type/group-cover/code/${groupId}/${cover ? `filename/${cover}` : ""}` })
 31 
  const [profileImg, setProfileImg] = useState({
- 
 
 32 
    path: `/storage/type/group/code/${groupId}/${
- 
 
 33 
      image ? `filename/${image}` : ''
- 
 
 34 
    }`,
15 
    const [profileImg, setProfileImg] = useState({ path: `/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}` })
 35 
  })
16 
    const dispatch = useDispatch();
 36 
  const dispatch = useDispatch()
Línea 17... Línea 37...
17 
    const PATH = window.location.pathname
 37 
  const PATH = window.location.pathname
Línea 18... Línea 38...
18 
 
 38 
 
- 
 
 39 
  const closeModal = () => setModalToShow(null)
19 
    const closeModal = () => setModalToShow(null)
 40 
 
20 
 
 41 
  const handleActionLink = (url) => {
21 
    const handleActionLink = (url) => {
 42 
    axios
22 
        axios.post(url)
 43 
      .post(url)
23 
            .then(({ data }) => {
 44 
      .then(({ data }) => {
24 
                if (!data.success) {
 45 
        if (!data.success) {
25 
                    return dispatch(addNotification({ style: 'error', msg: data.data }))
 46 
          return dispatch(addNotification({ style: 'error', msg: data.data }))
26 
                }
 47 
        }
27 
                addNotification({ style: 'success', msg: data.data })
 48 
        addNotification({ style: 'success', msg: data.data })
28 
                window.location.reload()
 49 
        window.location.reload()
Línea 29... Línea 50...
29 
            })
 50 
      })
30 
            .catch(err => console.log('>>: err > ', err))
 51 
      .catch((err) => console.log('>>: err > ', err))
31 
    }
 52 
  }
- 
 
 53 
 
32 
 
 54 
  return (
- 
 
 55 
    <>
- 
 
 56 
      <div className="group__actions">
- 
 
 57 
        <div
- 
 
 58 
          className="group__actions-cover position-relative"
- 
 
 59 
          style={{ height: '300px' }}
33 
    return (
 60 
        >
- 
 
 61 
          <img
34 
        <>
 62 
            src={coverImg.path}
- 
 
 63 
            alt="Profile cover"
- 
 
 64 
            className="sidebar__cover"
35 
            <div className="group__actions">
 65 
          />
- 
 
 66 
          {PATH.includes('edit') && (
36 
                <div className="group__actions-cover position-relative" style={{height: '300px'}}>
 67 
            <button
37 
                    <img src={coverImg.path} alt='Profile cover' className='sidebar__cover' />
 68 
              className="button-icon cover__edit-btn"
38 
                    {PATH.includes('edit') &&
 69 
              onClick={() => setModalToShow('cover')}
39 
                        <button className='button-icon cover__edit-btn' onClick={() => setModalToShow('cover')}>
 70 
            >
40 
                            <EditIcon />
 71 
              <EditIcon />
41 
                        </button>
 72 
            </button>
42 
                    }
 73 
          )}
43 
                </div>
 74 
        </div>
44 
                <div className="group__actions-body">
 75 
        <div className="group__actions-body">
45 
                    <div className='card__image-options'>
 76 
          <div className="card__image-options">
46 
                        {PATH.includes('edit')
 77 
            {PATH.includes('edit') ? (
47 
                            ? <img
 78 
              <img
48 
                                alt='Profile Image'
 79 
                alt="Profile Image"
49 
                                className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}
 80 
                className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}
- 
 
 81 
                src={profileImg.path}
50 
                                src={profileImg.path}
 82 
                onClick={() => PATH.includes('edit') && setModalToShow('image')}
51 
                                onClick={() => PATH.includes('edit') && setModalToShow('image')}
 83 
                style={{ zIndex: 10 }}
52 
                                style={{ zIndex: 10 }}
 84 
              />
53 
                            />
 85 
            ) : (
54 
                            : <Avatar imageUrl={profileImg.path} size='xl' name={name} />
 86 
              <Avatar imageUrl={profileImg.path} size="xl" name={name} />
55 
                        }
 87 
            )}
56 
                    </div>
 88 
          </div>
57 
                    <h1>{name}</h1>
 89 
          <h1>{name}</h1>
58 
                    <span>{groupType}</span>
 90 
          <span>{groupType}</span>
59 
                    <div className="row" style={{ gap: '.5rem' }}>
 91 
          <div className="row" style={{ gap: '.5rem' }}>
60 
                        {linkInmail &&
 92 
            {linkInmail && (
61 
                            <a href={linkInmail} className="button btn btn-primary">
 93 
              <a href={linkInmail} className="button btn btn-primary">
62 
                                Contactar con el Administrador
 94 
                Contactar con el Administrador
63 
                            </a>
 95 
              </a>
64 
                        }
 96 
            )}
65 
                        {actionLinks?.link_accept &&
 97 
            {actionLinks?.link_accept && (
66 
                            <button
 98 
              <button
67 
                                onClick={() => handleActionLink(actionLinks?.link_accept)}
 99 
                onClick={() => handleActionLink(actionLinks?.link_accept)}
68 
                                className="button btn btn-primary"
 100 
                className="button btn btn-primary"
69 
                            >
 101 
              >
70 
                                Aceptar invitacion
 102 
                Aceptar invitacion
71 
                            </button>
 103 
              </button>
72 
                        }
 104 
            )}
73 
                        {actionLinks?.link_cancel &&
 105 
            {actionLinks?.link_cancel && (
74 
                            <button
 106 
              <button
75 
                                onClick={() => handleActionLink(actionLinks?.link_cancel)}
 107 
                onClick={() => handleActionLink(actionLinks?.link_cancel)}
76 
                                className="button btn btn-secondary"
 108 
                className="button btn btn-secondary"
77 
                            >
 109 
              >
78 
                                Cancelar invitacion
 110 
                Cancelar invitacion
79 
                            </button>
 111 
              </button>
80 
                        }
 112 
            )}
81 
                        {actionLinks?.link_leave &&
 113 
            {actionLinks?.link_leave && (
82 
                            <button
 114 
              <button
83 
                                onClick={() => handleActionLink(actionLinks?.link_leave)}
 115 
                onClick={() => handleActionLink(actionLinks?.link_leave)}
84 
                                className="button btn btn-secondary"
 116 
                className="button btn btn-secondary"
85 
                            >
 117 
              >
86 
                                Abandonar grupo
 118 
                Abandonar grupo
87 
                            </button>
 119 
              </button>
88 
                        }
 120 
            )}
89 
                        {actionLinks?.link_request &&
 121 
            {actionLinks?.link_request && (
90 
                            <button
 122 
              <button
91 
                                onClick={() => handleActionLink(actionLinks?.link_request)}
 123 
                onClick={() => handleActionLink(actionLinks?.link_request)}
92 
                                className="button btn btn-primary"
 124 
                className="button btn btn-primary"
93 
                            >
 125 
              >
- 
 
 126 
                {accessibility === 'Auto unirse'
94 
                                {accessibility === 'Auto unirse' ? 'Unirse' : 'Solicitar membresia'}
 127 
                  ? 'Unirse'
95 
                            </button>
 128 
                  : 'Solicitar membresia'}
- 
 
 129 
              </button>
96 
                        }
 130 
            )}
97 
                    </div>
 131 
          </div>
98 
                </div>
 132 
        </div>
99 
            </div>
 133 
      </div>
100 
            <CoverModal
 134 
      <CoverModal
101 
                isModalOpen={modalToShow === 'cover'}
 135 
        isOpen={modalToShow === 'cover'}
102 
                coverType={profileTypes.GROUP}
 136 
        type={coverTypes.GROUP}
103 
                groupId={groupId}
 137 
        id={groupId}
104 
                handleCoverSectionModalOpen={() => closeModal()}
 138 
        size={imageSizeCover}
105 
                imageSizeCover={imageSizeCover}
 139 
        onClose={() => closeModal()}
106 
                setCoverImg={(newImage) => setCoverImg(newImage)}
 140 
        onComplete={(newImage) => setCoverImg(newImage)}
107 
            />
 141 
      />
108 
            <ImageModal
 142 
      <ImageModal
109 
                handleModalOpen={() => closeModal()}
 143 
        handleModalOpen={() => closeModal()}
110 
                isModalOpen={modalToShow === 'image'}
 144 
        isModalOpen={modalToShow === 'image'}
111 
                groupId={groupId}
 145 
        groupId={groupId}
112 
                imageProfileCover={imageProfileCover}
 146 
        imageProfileCover={imageProfileCover}
113 
                profileType={profileTypes.GROUP}
 147 
        profileType={profileTypes.GROUP}
114 
                setProfileImg={(newImage) => setProfileImg(newImage)}
 148 
        setProfileImg={(newImage) => setProfileImg(newImage)}
Línea 115... Línea -...
115 
            />
 - 
 
116 
        </>
 149 
      />
- 
 
 150 
    </>