Proyectos de Subversion LeadersLinked - Antes de SPA

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

import Avatar from '../UI/AvatarImage'
import CoverModal from '../cover/CoverModal'
import ImageModal from '../modals/ImageModal'
import { styled } from 'styled-components'

const CoverButton = styled(IconButton)`
  color: #8a2be2 !important;
  position: absolute !important;
  right: 20px;
  top: 20px;

  &:hover {
    background-color: #8a2be2 !important;
    color: #fff !important;
  }
`

const GroupActions = ({
  cover,
  name,
  image,
  groupType,
  accessibility,
  coverSize,
  imageSize,
  linkInmail,
  linkAccept,
  linkCancel,
  linkLeave,
  linkRequest,
  refetch,
}) => {
  const [profileImg, setProfileImg] = useState('')
  const [coverImg, setCoverImg] = useState('')
  const [isEdit, setIsEdit] = useState(false)
  const [modalToShow, setModalToShow] = useState(null)
  const { pathname } = useLocation()
  const { uuid } = useParams()
  const dispatch = useDispatch()

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

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

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

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

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

  useEffect(() => {
    setCoverImg(
      `/storage/type/group-cover/code/${uuid}${
        cover ? `/filename/${cover}` : '/'
      }`
    )
    setProfileImg(
      `/storage/type/group/code/${uuid}${image ? `/filename/${image}` : '/'}`
    )
  }, [cover, image])

  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 && (
            <CoverButton onClick={() => setModalToShow('cover')}>
              <EditIcon />
            </CoverButton>
          )}
        </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} 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>
            )}
            {linkAccept && (
              <button
                onClick={() => handleActionLink(linkAccept)}
                className="button btn btn-primary"
              >
                Aceptar invitacion
              </button>
            )}
            {linkCancel && (
              <button
                onClick={() => handleActionLink(linkCancel)}
                className="button btn btn-secondary"
              >
                Cancelar invitacion
              </button>
            )}
            {linkLeave && (
              <button
                onClick={() => handleActionLink(linkLeave)}
                className="button btn btn-secondary"
              >
                Abandonar grupo
              </button>
            )}
            {linkRequest && (
              <button
                onClick={() => handleActionLink(linkRequest)}
                className="button btn btn-primary"
              >
                {accessibility === 'Auto unirse'
                  ? 'Unirse'
                  : 'Solicitar membresia'}
              </button>
            )}
          </div>
        </div>
      </div>
      <CoverModal
        isOpen={modalToShow === 'cover'}
        sizes={coverSize}
        onClose={() => closeModal()}
        onComplete={(newImage) => setCoverImg(newImage)}
      />
      <ImageModal
        show={modalToShow === 'image'}
        id={uuid}
        sizes={imageSize}
        onClose={() => closeModal()}
        onComplete={(newImage) => setProfileImg(newImage)}
      />
    </>
  )
}

export default GroupActions