Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { useDispatch } from 'react-redux'
import { useLocation } from 'react-router-dom'
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 [coverImg, setCoverImg] = useState(
    `/storage/type/group-cover/code/${groupId}/filename/${cover}`
  )
  const [profileImg, setProfileImg] = useState(
    `/storage/type/group/code/${groupId}/filename/${image}`
  )
  const [isEdit, setIsEdit] = useState(false)
  const [modalToShow, setModalToShow] = useState(null)
  const dispatch = useDispatch()
  const { pathname } = useLocation()

  const closeModal = () => {
    setModalToShow(null)
  }

  const handleActionLink = (url) => {
    axios
      .post(url)
      .then(({ data: response }) => {
        const { data, success } = response

        if (!success) {
          dispatch(addNotification({ style: 'error', msg: data }))
          return
        }

        addNotification({ style: 'success', msg: data })
      })
      .catch((err) => console.log('>>: err > ', err))
  }

  useEffect(() => {
    setIsEdit(pathname.includes('edit'))
  }, [pathname])

  return (
    <>
      <div className="group__actions">
        <div
          className="group__actions-cover position-relative"
          style={{ height: '300px' }}
        >
          <img src={coverImg} alt="Profile cover" className="sidebar__cover" />
          {isEdit && (
            <button
              className="button-icon cover__edit-btn"
              onClick={() => setModalToShow('cover')}
            >
              <EditIcon />
            </button>
          )}
        </div>
        <div className="group__actions-body">
          <div className="card__image-options">
            {isEdit ? (
              <img
                alt="Profile Image"
                className={`img ${isEdit && 'cursor-pointer'}`}
                src={profileImg}
                onClick={() => isEdit && 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'}
        id={groupId}
        sizes={imageProfileCover}
        onClose={() => closeModal()}
        onComplete={(newImage) => setProfileImg(newImage)}
      />
    </>
  )
}

export default GroupActions