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 { feedTypes } from '../../../redux/feed/feed.types'

import { useDispatch } from 'react-redux'

import { setIntlLabels } from '../../../redux/intl/intl.action'

import { setTimelineUrl } from '../../../redux/feed/feed.actions'

import Cover from '../../../shared/cover/Cover'

import GroupInfo from './component/GroupInfo'

import GroupAttr from './component/GroupAttr'

import ShareFeed from '../../../dashboard/components/share-feed/ShareFeed'

import FeedSection from '../../../dashboard/components/feed-section/FeedSection'

import SuggestWidget from '../../../shared/helpers/my-groups-helper/SuggestWidget'

import GroupMembers from './component/GroupMember'

const View = ({

  routeTimeline,

  groupId,

  cover,

  image,

  totalMembers,

  name,

  overview,

  groupType,

  industry,

  privacy,

  accessibility,

  website,

  withoutFeeds,

  linkInmail,

  labels,

}) => {

  const groupTabs = {

    FEED_TAB: 'FEED_TAB',

    INFO_TAB: 'INFO_TAB',

  }

  const [currentTab, setCurrentTab] = useState(

    withoutFeeds ? groupTabs.INFO_TAB : groupTabs.FEED_TAB

  )

  const dispatch = useDispatch()

  useEffect(() => {

    dispatch(setTimelineUrl(routeTimeline))

    dispatch(setIntlLabels(labels))

  }, [])

  return (

    <>

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

      <main className="main-section-data container px-0 mt-3">

        <div className="main-left-sidebar">

          <GroupInfo

            accessibility={accessibility}

            groupId={groupId}

            image={image}

            linkInmail={linkInmail}

            name={name}

            totalMembers={totalMembers}

          />

          <GroupMembers groupId={groupId} />

        </div>

        <div className="feed-section">

          <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"

            btnLabelAccept={labels.GROUP_VIEW}

          />

        </div>

      </main>

    </>

  )

}

export default View