Proyectos de Subversion LeadersLinked - Antes de SPA

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

import React, { useEffect, useRef } from "react";

import { useState } from "react";

import { connect } from "react-redux";

import { axios } from "../../../utils";

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

import parse from "html-react-parser";

import { addNotification } from "../../../redux/notification/notification.actions";

import Spinner from "../../../shared/loading-spinner/Spinner";

import { setTimelineUrl } from "../../../redux/feed/feed.actions";

import FeedSection from "../../../dashboard/components/feed-section/FeedSection";

const TABS = {

  FEEDS: "FEEDS",

  INFO: "INFO",

};

const View = (props) => {

  // backendVars destructuring

  const {

    companyId,

    cover,

    image,

    totalFollowers,

    facebook,

    twitter,

    instagram,

    companyName,

    overview,

    locations,

    industry,

    companySize,

    foundationYear,

    website,

    timeline,

  } = props.backendVars;

  // redux destructuring

  const { addNotification, setTimelineUrl } = props;

  // const [isFollower, setIsFollower] = useState(!!+follower);

  const [authorizedLinks, setAuthorizedLinks] = useState(null);

  const [loading, setLoading] = useState(false);

  const [followers, setFollowers] = useState(totalFollowers);

  const [initialLoading, setInitialLoading] = useState(true);

  const [isFollower, setIsFollower] = useState(false);

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

  const [suggestionCompanies, setSuggestionCompanies] = useState([])

  const [lookMore, setLookMore] = useState(false);

  const shouldSetInitialTab = useRef(true);

  useEffect(() => {

    setTimelineUrl(timeline);

    fetchAuthorizedLinks();

    shouldSetInitialTab.current = false;

    setInitialLoading(false);

    getSuggestionCompanies()

  }, []);

  const getSuggestionCompanies = async () => {

    try {

      setLoading(true);

      const response = await axios.get(`/helpers/company-suggestion/${companyId}`);

      if (response.data.success)

        setSuggestionCompanies(response.data.data)

    } catch (error) {

      console.log('>>: error > ', error)

    } finally {

      setLoading(false)

    }

  }

  useEffect(() => {

    isFollower

      ? setCurrentTab(TABS.FEEDS)

      : setCurrentTab(TABS.INFO)

  }, [isFollower]);

  const fetchAuthorizedLinks = async () => {

    setLoading(true);

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

    const resData = response.data;

    (resData);

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

      }

    }

    return setLoading(false);

  };

  const handleButtonAction = async (link) => {

    setLoading(true);

    const response = await axios.post(link);

    const resData = response.data;

    if (resData.success) {

      addNotification({

        style: "success",

        msg: resData.data,

      });

      fetchAuthorizedLinks();

    } else {

      setLoading(false);

      addNotification({

        style: "danger",

        msg: "ha ocurrido un error",

      });

    }

  };

  const changeCurrentTab = (tab) => {

    setCurrentTab(tab)

  }

  const getData = () => {

    let infoFollows = [...suggestionCompanies]

    if (!lookMore) {

      infoFollows = infoFollows.slice(0, 3);

    }

    return infoFollows

  }

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

        <div className="main-section-data">

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

            {loading &&

              <div className="spinner-container">

                <Spinner />

              </div>

            }

            <div className="peopleYouMayKnow">

              <div className="sd-title d-flex align-items-center justify-content-between">

                <h3>Empresas similares:</h3>

                {suggestionCompanies.length >= 5 &&

                  <a href="#" onClick={(e) => {

                    e.preventDefault()

                    setLookMore(!lookMore)

                  }}>

                    {lookMore ? 'Ver menos' : 'Ver mas'}

                  </a>

                }

              </div>

              <div className="suggest-list">

                {suggestionCompanies.length

                  ? getData().map(element => {

                    return (

                      <div className='user' key={element.id}>

                        <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>

                          <a href={element.profile} target="_blank" rel="noreferrer">

                            <img src={element.image} alt={`${element.name} profile image`} />

                          </a>

                          <h4>{element.name}</h4>

                        </div>

                        <a

                          className="btn btn-primary"

                          href={element.profile}

                          target='_blank'

                          rel="noreferrer"

                          style={{ fontSize: '.9rem', borderRadius: '4px' }}

                        >

                          MÁS INF

                        </a>

                      </div>

                    )

                  })

                  : <div className="view-more">Sin empresas similares</div>

                }

              </div>

            </div>

          </div>

        </div>

      </main >

    </>

  );

};

const mapDispatchToProps = {

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

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

};

export default connect(null, mapDispatchToProps)(View);