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