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)