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