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 Spinner from '../../../shared/loading-spinner/Spinner'

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 [initialLoading, setInitialLoading] = useState(true)

  const [isFollower, setIsFollower] = useState(false)

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

  const shouldSetInitialTab = useRef(true)

  useEffect(() => {

    setTimelineUrl(timeline)

    shouldSetInitialTab.current = false

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

            {!initialLoading &&

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

          }

          {

            initialLoading &&

            <div

              style={{

                display: 'flex',

                justifyContent: 'center',

                alignItems: 'center'

              }}

            >

              <Spinner />

            </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)