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