Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6830 Rev 6863
Línea 1... Línea 1...
1 
import React, { 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 { addNotification } from '../../redux/notification/notification.actions'
 5 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import EditIcon from '@mui/icons-material/EditOutlined'
 6 
import EditIcon from '@mui/icons-material/EditOutlined'
Línea 6... Línea 7...
6 
 
 7 
 
7 
import Avatar from '../UI/AvatarImage'
 8 
import Avatar from '../UI/AvatarImage'
Línea 18... Línea 19...
18 
  actionLinks,
 19 
  actionLinks,
19 
  accessibility,
 20 
  accessibility,
20 
  imageProfileCover,
 21 
  imageProfileCover,
21 
  imageSizeCover,
 22 
  imageSizeCover,
22 
}) => {
 23 
}) => {
- 
 
 24 
  const [coverImg, setCoverImg] = useState(
- 
 
 25 
    `/storage/type/group-cover/code/${groupId}/filename/${cover}`
- 
 
 26 
  )
- 
 
 27 
  const [profileImg, setProfileImg] = useState(
- 
 
 28 
    `/storage/type/group/code/${groupId}/filename/${image}`
- 
 
 29 
  )
- 
 
 30 
  const [isEdit, setIsEdit] = useState(false)
23 
  const [modalToShow, setModalToShow] = useState(null)
 31 
  const [modalToShow, setModalToShow] = useState(null)
24 
  const [coverImg, setCoverImg] = useState({
 - 
 
25 
    path: `/storage/type/group-cover/code/${groupId}/${
 - 
 
26 
      cover ? `filename/${cover}` : ''
 - 
 
27 
    }`,
 - 
 
28 
  })
 - 
 
29 
  const [profileImg, setProfileImg] = useState({
 - 
 
30 
    path: `/storage/type/group/code/${groupId}/${
 - 
 
31 
      image ? `filename/${image}` : ''
 - 
 
32 
    }`,
 - 
 
33 
  })
 - 
 
34 
  const dispatch = useDispatch()
 32 
  const dispatch = useDispatch()
35 
  const PATH = window.location.pathname
 33 
  const { pathname } = useLocation()
Línea 36... Línea 34...
36 
 
 34 
 
- 
 
 35 
  const closeModal = () => {
- 
 
 36 
    setModalToShow(null)
Línea 37... Línea 37...
37 
  const closeModal = () => setModalToShow(null)
 37 
  }
38 
 
 38 
 
39 
  const handleActionLink = (url) => {
 39 
  const handleActionLink = (url) => {
40 
    axios
 40 
    axios
- 
 
 41 
      .post(url)
- 
 
 42 
      .then(({ data: response }) => {
41 
      .post(url)
 43 
        const { data, success } = response
42 
      .then(({ data }) => {
 44 
 
- 
 
 45 
        if (!success) {
43 
        if (!data.success) {
 46 
          dispatch(addNotification({ style: 'error', msg: data }))
- 
 
 47 
          return
44 
          return dispatch(addNotification({ style: 'error', msg: data.data }))
 48 
        }
45 
        }
 - 
 
46 
        addNotification({ style: 'success', msg: data.data })
 49 
 
47 
        window.location.reload()
 50 
        addNotification({ style: 'success', msg: data })
48 
      })
 51 
      })
Línea -... Línea 52...
- 
 
 52 
      .catch((err) => console.log('>>: err > ', err))
- 
 
 53 
  }
- 
 
 54 
 
- 
 
 55 
  useEffect(() => {
49 
      .catch((err) => console.log('>>: err > ', err))
 56 
    setIsEdit(pathname.includes('edit'))
50 
  }
 57 
  }, [pathname])
51 
 
 58 
 
52 
  return (
 59 
  return (
53 
    <>
 60 
    <>
54 
      <div className="group__actions">
 61 
      <div className="group__actions">
55 
        <div
 62 
        <div
56 
          className="group__actions-cover position-relative"
 - 
 
57 
          style={{ height: '300px' }}
 - 
 
58 
        >
 - 
 
59 
          <img
 63 
          className="group__actions-cover position-relative"
60 
            src={coverImg.path}
 - 
 
61 
            alt="Profile cover"
 64 
          style={{ height: '300px' }}
62 
            className="sidebar__cover"
 65 
        >
63 
          />
 66 
          <img src={coverImg} alt="Profile cover" className="sidebar__cover" />
64 
          {PATH.includes('edit') && (
 67 
          {isEdit && (
65 
            <button
 68 
            <button
66 
              className="button-icon cover__edit-btn"
 69 
              className="button-icon cover__edit-btn"
67 
              onClick={() => setModalToShow('cover')}
 70 
              onClick={() => setModalToShow('cover')}
68 
            >
 71 
            >
69 
              <EditIcon />
 72 
              <EditIcon />
70 
            </button>
 73 
            </button>
71 
          )}
 74 
          )}
72 
        </div>
 75 
        </div>
73 
        <div className="group__actions-body">
 76 
        <div className="group__actions-body">
74 
          <div className="card__image-options">
 77 
          <div className="card__image-options">
75 
            {PATH.includes('edit') ? (
 78 
            {isEdit ? (
76 
              <img
 79 
              <img
77 
                alt="Profile Image"
 80 
                alt="Profile Image"
78 
                className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}
 81 
                className={`img ${isEdit && 'cursor-pointer'}`}
79 
                src={profileImg.path}
 82 
                src={profileImg}
80 
                onClick={() => PATH.includes('edit') && setModalToShow('image')}
 83 
                onClick={() => isEdit && setModalToShow('image')}
81 
                style={{ zIndex: 10 }}
 84 
                style={{ zIndex: 10 }}
82 
              />
 85 
              />
Línea 135... Línea 138...
135 
        onClose={() => closeModal()}
 138 
        onClose={() => closeModal()}
136 
        onComplete={(newImage) => setCoverImg(newImage)}
 139 
        onComplete={(newImage) => setCoverImg(newImage)}
137 
      />
 140 
      />
138 
      <ImageModal
 141 
      <ImageModal
139 
        show={modalToShow === 'image'}
 142 
        show={modalToShow === 'image'}
140 
        onClose={() => closeModal()}
 - 
 
141 
        sizes={imageProfileCover}
 - 
 
142 
        id={groupId}
 143 
        id={groupId}
- 
 
 144 
        sizes={imageProfileCover}
- 
 
 145 
        onClose={() => closeModal()}
143 
        onComplete={(newImage) => setProfileImg(newImage)}
 146 
        onComplete={(newImage) => setProfileImg(newImage)}
144 
      />
 147 
      />
145 
    </>
 148 
    </>
146 
  )
 149 
  )
147 
}
 150 
}