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)