Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import parse from 'html-react-parser'
import { axios } from '../../../utils'
import { connect } from 'react-redux'
import { setTimelineUrl } from '../../../redux/feed/feed.actions'
import { addNotification } from '../../../redux/notification/notification.actions'
import { feedTypes } from '../../../redux/feed/feed.types'
import FeedSection from '../../../dashboard/components/feed-section/FeedSection'
import ShareFeed from '../../../dashboard/components/share-feed/ShareFeed'
import GroupMembersHelper from '../../../shared/helpers/group-members-helper/GroupMembersHelper'
import GroupAttr from './component/GroupAttr'
import Cover from '../../../shared/cover/Cover'
import SuggestWidget from '../../../shared/helpers/my-groups-helper/SuggestWidget'

const View = (props) => {
  // backendVars Destructuring
  const {
    routeTimeline,
    groupId,
    cover,
    image,
    totalMembers,
    name,
    overview,
    groupType,
    industry,
    privacy,
    accessibility,
    website,
    withoutFeeds,
    linkInmail,
  } = props.backendVars

  // redux destructuring
  const { setTimelineUrl, addNotification } = props

  const groupTabs = {
    FEED_TAB: 'FEED_TAB',
    INFO_TAB: 'INFO_TAB',
  }

  // states
  const [currentTab, setCurrentTab] = useState(
    withoutFeeds ? groupTabs.INFO_TAB : groupTabs.FEED_TAB
  )
  const [actionLinks, setActionLinks] = useState({})
  const [linkInvite, setLinkInvite] = useState('')

  setTimelineUrl(routeTimeline)

  const load = () => {
    axios
      .get('')
      .then(({ data }) => {
        if (!data.success) {
          return addNotification({ style: 'error', msg: data.data })
        }
        setActionLinks(data.data)
      })
      .catch((err) => console.log('>>: err > ', err))
  }

  useEffect(() => {
    load()
  }, [])

  const handleActionLink = (url) => {
    axios
      .post(url)
      .then(({ data }) => {
        if (!data.success) {
          return addNotification({ style: 'error', msg: data.data })
        }
        addNotification({ style: 'success', msg: data.data })
        window.location.reload()
      })
      .catch((err) => console.log('>>: err > ', err))
  }

  return (
    <>
      <Cover cover={cover} id={groupId} type="group" />

      <main className="main-section-data container px-0 mt-3">
        <div className="main-left-sidebar">
          <div className="user_profile">
            <div className="user-pro-img">
              <img
                src={`/storage/type/group/code/${groupId}/${
                  image ? `filename/${image}` : ''
                }`}
                alt="profile-image"
              />
            </div>
            <div className="user_pro_status">
              <h1 className="font-weight-bold" style={{ fontSize: '1.5rem' }}>
                {name}
              </h1>
              <ul className="flw-status">
                <div className="container horizontal-list">
                  <div className="row ">
                    {linkInmail && (
                      <a href={linkInmail || '#'} className="btn btn-primary">
                        Contactar con el Administrador
                      </a>
                    )}
                    <div className="members_count">
                      <b style={{ fontSize: '1rem' }}>{totalMembers}</b>
                      <p>Miembros</p>
                    </div>
                    {actionLinks.link_accept && (
                      <button
                        onClick={() =>
                          handleActionLink(actionLinks.link_accept)
                        }
                        className="btn btn-primary"
                      >
                        Aceptar invitacion
                      </button>
                    )}
                    {actionLinks.link_cancel && (
                      <button
                        onClick={() =>
                          handleActionLink(actionLinks.link_cancel)
                        }
                        className="btn btn-primary"
                      >
                        Cancelar invitacion
                      </button>
                    )}
                    {!linkInvite && actionLinks.link_leave && (
                      <button
                        onClick={() => handleActionLink(actionLinks.link_leave)}
                        className="btn btn-primary"
                      >
                        Abandonar grupo
                      </button>
                    )}
                    {actionLinks.link_request && (
                      <button
                        onClick={() =>
                          handleActionLink(actionLinks.link_request)
                        }
                        className="btn btn-primary"
                      >
                        {accessibility === 'Auto unirse'
                          ? 'Unirse'
                          : 'Solicitar membresia'}
                      </button>
                    )}
                  </div>
                </div>
              </ul>
            </div>
          </div>
          <GroupMembersHelper
            groupId={groupId}
            handleFirstLinkInvite={(link) => setLinkInvite(link)}
          />
        </div>
        <div className="main-ws-sec">
          <div className="user-tab-sec">
            {!withoutFeeds && (
              <div className="row">
                <div className="col text-left pl-0">
                  <button
                    className={` ${
                      currentTab === groupTabs.FEED_TAB ? 'active' : ''
                    } animated fadeIn btn btn-link p-0 text-decoration-none`}
                    onClick={() => setCurrentTab(groupTabs.FEED_TAB)}
                  >
                    <span className="font-weight-bold">Ver Publicaciones</span>
                  </button>
                </div>
                <div className="col text-right pr-0">
                  <button
                    className={` ${
                      currentTab === groupTabs.INFO_TAB ? 'active' : ''
                    } animated fadeIn btn btn-link p-0 text-decoration-none`}
                    onClick={() => setCurrentTab(groupTabs.INFO_TAB)}
                  >
                    <span className="font-weight-bold">Ver Información</span>
                  </button>
                </div>
              </div>
            )}
          </div>
          {currentTab === groupTabs.FEED_TAB && (
            <div className="product-feed-tab fadeIn">
              <ShareFeed
                feedType={feedTypes.GROUP}
                postUrl={`/feed/add/group/${groupId}`}
                image={`/storage/type/group/code/${groupId}/${
                  image ? `filename/${image}` : ''
                }`}
              />
              <div className="posts-section">
                <FeedSection
                  routeTimeline={routeTimeline}
                  image={`/storage/type/group/code/${groupId}/${
                    image ? `filename/${image}` : ''
                  }`}
                />
              </div>
            </div>
          )}
          {currentTab === groupTabs.INFO_TAB && (
            <div className="product-feed-tab fadeIn">
              {overview && (
                <GroupAttr title="Visión General">
                  <span>{parse(overview)}</span>
                </GroupAttr>
              )}
              {groupType && (
                <GroupAttr title="Tipo">
                  <span>{groupType}</span>
                </GroupAttr>
              )}
              {industry && (
                <GroupAttr title="Industria">
                  <span>{industry}</span>
                </GroupAttr>
              )}
              {!!privacy && (
                <GroupAttr title="Privacidad">
                  <span>{privacy}</span>
                </GroupAttr>
              )}
              {!!accessibility && (
                <GroupAttr title="Accesibilidad">
                  <span>{accessibility}</span>
                </GroupAttr>
              )}
              {!!website && (
                <GroupAttr title="Página Web">
                  <span>{website}</span>
                </GroupAttr>
              )}
            </div>
          )}
        </div>
        <div className="right-sidebar">
          <SuggestWidget title="Grupos:" url="/helpers/groups-suggestion" />
        </div>
      </main>
    </>
  )
}

const mapDispatchToProps = {
  setTimelineUrl: (url) => setTimelineUrl(url),
  addNotification: (notification) => addNotification(notification),
}

export default connect(null, mapDispatchToProps)(View)