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 { axios } from '../../../utils'

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'

const TABS = {

  FEEDS: 'FEEDS',

  INFO: 'INFO'

}

const View = ({

  backendVars,

  addNotification,

  setTimelineUrl,

  setIntlLabels,

  labels

}) => {

  const {

    companyId,

    cover,

    image,

    totalFollowers,

    facebook,

    twitter,

    instagram,

    companyName,

    overview,

    locations,

    industry,

    companySize,

    foundationYear,

    website,

    timeline

  } = backendVars

  const [authorizedLinks, setAuthorizedLinks] = useState(null)

  const [followers, setFollowers] = useState(totalFollowers)

  const [initialLoading, setInitialLoading] = useState(true)

  const [isFollower, setIsFollower] = useState(false)

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

  const shouldSetInitialTab = useRef(true)

  useEffect(() => {

    setTimelineUrl(timeline)

    fetchAuthorizedLinks()

    shouldSetInitialTab.current = false

    setInitialLoading(false)

    setIntlLabels(labels)

  }, [])

  useEffect(() => {

    isFollower

      ? setCurrentTab(TABS.FEEDS)

      : setCurrentTab(TABS.INFO)

  }, [isFollower])

  const fetchAuthorizedLinks = async () => {

    const response = await axios.get(`/company/view/${companyId}`)

    const resData = response.data

    if (resData.success) {

      setAuthorizedLinks(resData.data)

      setFollowers(resData.data.total_followers)

      if (resData.data.link_unfollow) {

        setIsFollower(true)

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

      } else {

        setIsFollower(false)

      }

    }

  }

  const handleButtonAction = async (link) => {

    const response = await axios.post(link)

    const resData = response.data

    if (resData.success) {

      addNotification({

        style: 'success',

        msg: resData.data

      })

      fetchAuthorizedLinks()

    } else {

      addNotification({

        style: 'danger',

        msg: 'ha ocurrido un error'

      })

    }

  }

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

  return (

    <>

      <section className="cover-sec">

        <img

          id="user-cover-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">

          <div className="user_profile">

            <div className="user-pro-img">

              <img

                src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ''}`}

                alt="profile-image"

              />

            </div>

            <div className="user_pro_status horizontal-list">

              <h1>{companyName}</h1>

              <div className="row px-5" style={{ marginTop: '10px' }}>

                {facebook &&

                  <i

                    onClick={() => window.location.href = facebook}

                    className="cursor-pointer fa fa-facebook"

                    style={{ fontSize: '1.4rem' }}

                  />

                }

                {twitter &&

                  <i

                    onClick={() => window.location.href = twitter}

                    className="cursor-pointer fa fa-twitter"

                    style={{ fontSize: '1.4rem' }}

                  />

                }

                {instagram &&

                  <i

                    onClick={() => window.location.href = instagram}

                    className="fa fa-instagram cursor-pointer"

                    style={{ fontSize: '1.4rem' }}

                  />

                }

              </div>

              <div className="container horizontal-list">

                <div className="row ">

                  <div className="members_count">

                    <b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>

                    <p style={{ fontSize: '1rem' }} className="ellipsis">Seguidores</p>

                  </div>

                  {authorizedLinks?.link_unfollow &&

                    <button

                      className="btn btn-secondary"

                      onClick={() => handleButtonAction(authorizedLinks?.link_unfollow)}

                    >

                      Dejar de seguir

                    </button>

                  }

                  {authorizedLinks?.link_follow &&

                    <button

                      className="btn btn-secondary"

                      onClick={() => handleButtonAction(authorizedLinks?.link_follow)}

                    >

                      Seguir

                    </button>

                  }

                  {

                    (authorizedLinks?.link_request && authorizedLinks?.link_unfollow) &&

                    <button

                      className="btn btn-tertiary"

                      onClick={() => handleButtonAction(authorizedLinks?.link_request)}

                    >

                      ¿Trabaja en esta empresa?

                    </button>

                  }

                  {authorizedLinks?.link_accept &&

                    <button

                      className="btn btn-tertiary"

                      onClick={() => handleButtonAction(authorizedLinks?.link_accept)}

                    >

                      Aceptar

                    </button>

                  }

                  {authorizedLinks?.link_cancel &&

                    <button

                      title=""

                      className="btn btn-tertiary"

                      onClick={() => handleButtonAction(authorizedLinks?.link_cancel)}

                    >

                      Cancelar

                    </button>

                  }

                  {authorizedLinks?.link_reject &&

                    <button

                      title=""

                      className="btn btn-tertiary"

                      onClick={() => handleButtonAction(authorizedLinks?.link_reject)}

                    >

                      Rechazar

                    </button>

                  }

                  {authorizedLinks?.link_leave &&

                    <button

                      data-link="{{>link_leave}}"

                      title=""

                      className="btn btn-tertiary"

                      onClick={() => handleButtonAction(authorizedLinks?.link_leave)}

                    >

                      Abandonar esta empresa

                    </button>

                  }

                  {authorizedLinks?.link_contact &&

                    <a

                      href={authorizedLinks?.link_contact}

                      className="btn btn-primary"

                    >

                      Mensaje

                    </a>

                  }

                </div>

              </div>

            </div>

          </div>

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