Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, useState } from 'react'

import parse from 'html-react-parser'

import { connect } from 'react-redux'

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

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

import { addNotification } from '../../../redux/notification/notification.actions'

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

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

import CompanyFollowersHelper from '../../../shared/helpers/company-followers-helper/CompanyFollowers'

import CompanyInfo from '../components/CompanyInfo'

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

import { coverTypes } from '../../../shared/cover/cover.types'

import CompanyAttr from '../components/CompanyAttr'

const TABS = {

  FEEDS: 'FEEDS',

  INFO: 'INFO',

}

const View = ({ backendVars, setTimelineUrl, setIntlLabels, labels }) => {

  const {

    companyId,

    cover,

    image,

    totalFollowers,

    facebook,

    twitter,

    instagram,

    companyName,

    overview,

    locations,

    industry,

    companySize,

    foundationYear,

    website,

    timeline,

  } = backendVars

  const [isFollower, setIsFollower] = useState(false)

  const [currentTab, setCurrentTab] = useState(TABS.INFO)

  const shouldSetInitialTab = useRef(true)

  useEffect(() => {

    setTimelineUrl(timeline)

    shouldSetInitialTab.current = false

    setIntlLabels(labels)

  }, [])

  useEffect(() => {

    isFollower ? setCurrentTab(TABS.FEEDS) : setCurrentTab(TABS.INFO)

  }, [isFollower])

  useEffect(() => {

    if (shouldSetInitialTab.current && isFollower) setCurrentTab(TABS.FEEDS)

  }, [isFollower])

  const changeCurrentTab = (tab) => setCurrentTab(tab)

  const markIsFollower = (val) => setIsFollower(val)

  return (

    <>

      <Cover cover={cover} id={companyId} type={coverTypes.COMPANY} />

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

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

          <CompanyInfo

            companyId={companyId}

            companyName={companyName}

            image={image}

            facebook={facebook}

            instagram={instagram}

            totalFollowers={totalFollowers}

            twitter={twitter}

            markFollower={markIsFollower}

          />

          <div className="d-none d-md-block">

            <CompanyFollowersHelper companyId={companyId} />

          </div>

        </div>

        <div className="feed-section">

          <div className="user-tab-sec rewivew">

            <div className="row">

              {isFollower && (

                <div className="col text-left pl-0">

                  <button

                    className="btn btn-link p-0 text-decoration-none"

                    onClick={() => changeCurrentTab(TABS.FEEDS)}

                    style={{ padding: '0 !important' }}

                  >

                    <span className="p-0 default-link font-weight-bold text-dark">

                      Ver Publicaciones

                    </span>

                  </button>

                </div>

              )}

              <div className="col text-right pr-0">

                <button

                  className="btn btn-link p-0 text-decoration-none"

                  onClick={() => changeCurrentTab(TABS.INFO)}

                  style={{ padding: '0 !important' }}

                >

                  <span className="p-0 default-link font-weight-bold text-dark">

                    Ver Información

                  </span>

                </button>

              </div>

            </div>

          </div>

          {currentTab === TABS.FEEDS && (

            <div className="product-feed-tab fadeIn">

              <FeedSection

                routeTimeline={timeline}

                image={`/storage/type/company/code/${companyId}/${

                  image ? `filename/${image}` : ''

                }`}

              />

            </div>

          )}

          {currentTab === TABS.INFO && (

            <div className="product-feed-tab fadeIn">

              {overview && (

                <CompanyAttr title="Visión general">

                  <span>{parse(overview)}</span>

                </CompanyAttr>

              )}

              {locations && (

                <CompanyAttr title="Ubicación">

                  <ul>

                    {locations.map(({ formatted_address, is_main }, index) => (

                      <li key={index}>

                        <p>

                          {is_main === 'y'

                            ? `${formatted_address} (Principal)`

                            : formatted_address}

                        </p>

                      </li>

                    ))}

                  </ul>

                </CompanyAttr>

              )}

              {industry && (

                <CompanyAttr title="Industria">

                  <span>{industry}</span>

                </CompanyAttr>

              )}

              {companySize && (

                <CompanyAttr title="Tamaño de la empresa">

                  <span>{companySize}</span>

                </CompanyAttr>

              )}

              {foundationYear && (

                <CompanyAttr title="Año de fundación">

                  <span>{foundationYear}</span>

                </CompanyAttr>

              )}

              {website && (

                <CompanyAttr title="Pagina web">

                  <span>{website}</span>

                </CompanyAttr>

              )}

            </div>

          )}

        </div>

        <div className="right-sidebar">

          <SuggestWidget

            title="Empresas similares:"

            url={`/helpers/company-suggestion/${companyId}`}

          />

        </div>

      </main>

    </>

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

  setTimelineUrl: (url) => setTimelineUrl(url),

  setIntlLabels: (labels) => setIntlLabels(labels),

}

export default connect(null, mapDispatchToProps)(View)