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;

  transition: all 200ms ease;

  &: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