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 (

    <React.Fragment>

      <section className="cover-sec">

        <img

          id="user-cover-img"

          src={`/storage/type/company-cover/code/${companyId}/${cover ? `filename/${cover}` : ""

            }`}

          alt="cover-image"

        />

      </section>

      <main>

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

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

                            <a

                              className="btn btn-primary"

                              href={element.profile}

                              target='_blank'

                              rel="noreferrer"

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

                            >

                              MÁS INF

                            </a>

                          </div>

                        </div>

                      )

                    })

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

                  }

                </div>

              </div>

            </div>

          </div>

        </div>

      </main >

    </React.Fragment >

  );

};

const mapDispatchToProps = {

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

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

};

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