Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { axios } from '../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import EditIcon from '@mui/icons-material/EditOutlined'

import Avatar from '../UI/AvatarImage'
import CoverModal from '../cover/CoverModal'
import ImageModal from '../modals/ImageModal'

const GroupActions = ({
  cover,
  groupId,
  name,
  image,
  groupType,
  linkInmail,
  actionLinks,
  accessibility,
  imageProfileCover,
  imageSizeCover,
}) => {
  const [modalToShow, setModalToShow] = useState(null)
  const [coverImg, setCoverImg] = useState({
    path: `/storage/type/group-cover/code/${groupId}/${
      cover ? `filename/${cover}` : ''
    }`,
  })
  const [profileImg, setProfileImg] = useState({
    path: `/storage/type/group/code/${groupId}/${
      image ? `filename/${image}` : ''
    }`,
  })
  const dispatch = useDispatch()
  const PATH = window.location.pathname

  const closeModal = () => setModalToShow(null)

  const handleActionLink = (url) => {
    axios
      .post(url)
      .then(({ data }) => {
        if (!data.success) {
          return dispatch(addNotification({ style: 'error', msg: data.data }))
        }
        addNotification({ style: 'success', msg: data.data })
        window.location.reload()
      })
      .catch((err) => console.log('>>: err > ', err))
  }

  return (
    <>
      <div className="group__actions">
        <div
          className="group__actions-cover position-relative"
          style={{ height: '300px' }}
        >
          <img
            src={coverImg.path}
            alt="Profile cover"
            className="sidebar__cover"
          />
          {PATH.includes('edit') && (
            <button
              className="button-icon cover__edit-btn"
              onClick={() => setModalToShow('cover')}
            >
              <EditIcon />
            </button>
          )}
        </div>
        <div className="group__actions-body">
          <div className="card__image-options">
            {PATH.includes('edit') ? (
              <img
                alt="Profile Image"
                className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}
                src={profileImg.path}
                onClick={() => PATH.includes('edit') && setModalToShow('image')}
                style={{ zIndex: 10 }}
              />
            ) : (
              <Avatar imageUrl={profileImg.path} size="xl" name={name} />
            )}
          </div>
          <h1>{name}</h1>
          <span>{groupType}</span>
          <div className="row" style={{ gap: '.5rem' }}>
            {linkInmail && (
              <a href={linkInmail} className="button btn btn-primary">
                Contactar con el Administrador
              </a>
            )}
            {actionLinks?.link_accept && (
              <button
                onClick={() => handleActionLink(actionLinks?.link_accept)}
                className="button btn btn-primary"
              >
                Aceptar invitacion
              </button>
            )}
            {actionLinks?.link_cancel && (
              <button
                onClick={() => handleActionLink(actionLinks?.link_cancel)}
                className="button btn btn-secondary"
              >
                Cancelar invitacion
              </button>
            )}
            {actionLinks?.link_leave && (
              <button
                onClick={() => handleActionLink(actionLinks?.link_leave)}
                className="button btn btn-secondary"
              >
                Abandonar grupo
              </button>
            )}
            {actionLinks?.link_request && (
              <button
                onClick={() => handleActionLink(actionLinks?.link_request)}
                className="button btn btn-primary"
              >
                {accessibility === 'Auto unirse'
                  ? 'Unirse'
                  : 'Solicitar membresia'}
              </button>
            )}
          </div>
        </div>
      </div>
      <CoverModal
        isOpen={modalToShow === 'cover'}
        sizes={imageSizeCover}
        onClose={() => closeModal()}
        onComplete={(newImage) => setCoverImg(newImage)}
      />
      <ImageModal
        show={modalToShow === 'image'}
        onClose={() => closeModal()}
        sizes={imageProfileCover}
        id={groupId}
        onComplete={(newImage) => setProfileImg(newImage)}
      />
    </>
  )
}

export default GroupActions