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'

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 (
    <>
      <section className="cover-sec">
        <img
          src={`/storage/type/company-cover/code/${companyId}/${
            cover ? `filename/${cover}` : ''
          }`}
          alt="cover-image"
        />
      </section>
      <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="main-ws-sec">
          <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 animated fadeIn"
              id="feed-dd feed"
              style={{ display: 'block' }}
            >
              <div className="posts-section">
                <FeedSection
                  routeTimeline={timeline}
                  image={`/storage/type/company/code/${companyId}/${
                    image ? `filename/${image}` : ''
                  }`}
                />
              </div>
            </div>
          )}
          {currentTab === TABS.INFO && (
            <div
              className="product-feed-tab animated fadeIn"
              id="feed-dd info"
              style={{ display: 'block' }}
            >
              {overview && (
                <div className="user-profile-extended-ov">
                  <h3>Visión general</h3>
                  <span>{parse(overview)}</span>
                </div>
              )}
              {locations && (
                <div className="user-profile-extended-ov st2">
                  <h3>Ubicación</h3>
                  <span>
                    {locations.map(({ formatted_address, is_main }, index) => (
                      <React.Fragment key={index}>
                        {index >= 0 ? <hr /> : ''}
                        <p>
                          {`${formatted_address} ${
                            is_main === 'y' ? '(Principal)' : ''
                          }`}
                        </p>
                      </React.Fragment>
                    ))}
                  </span>
                </div>
              )}
              {industry && (
                <div className="user-profile-ov">
                  <h3>Industria</h3>
                  <span>{industry}</span>
                </div>
              )}
              {companySize && (
                <div className="user-profile-ov">
                  <h3>Tamaño de la empresa</h3>
                  <span>{companySize}</span>
                </div>
              )}
              {foundationYear && (
                <div className="user-profile-ov">
                  <h3>Año de fundación</h3>
                  <span>{foundationYear}</span>
                </div>
              )}
              {website && (
                <div className="user-profile-ov">
                  <h3>Página web</h3>
                  <span>{website}</span>
                </div>
              )}
            </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)