Proyectos de Subversion LeadersLinked - Antes de SPA

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

import { useState } from "react";

import { connect } from "react-redux";

import styled from "styled-components";

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

    }

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

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

              <div className="row">

                <div className="col-lg-3">

                  <div className="main-left-sidebar">

                    <div className="user_profile border-gray border-radius pb-5">

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

                        <img

                          id="company-img"

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

                            }`}

                          alt="profile-image"

                        />

                      </div>

                      {/* <!--user-pro-img end--> */}

                      <div className="user_pro_status">

                        <h1>{companyName}</h1>

                        <div

                          className="row"

                          style={{

                            margin: '-1px'

                          }}

                        >

                          {

                            facebook && (

                              <div

                                className="col col-md col-sm"

                              >

                                <i onClick={() => window.location.href = facebook} className="cursor-pointer fa fa-facebook" style={{ fontSize: '1.4rem' }} />

                              </div>

                            )

                          }

                          {

                            twitter && (

                              <div

                                className="col col-md col-sm"

                              >

                                <i onClick={() => window.location.href = twitter} className="cursor-pointer fa fa-twitter" style={{ fontSize: '1.4rem' }} />

                              </div>

                            )

                          }

                          {

                            instagram && (

                              <div

                                className="col col-md col-sm"

                              >

                                <i onClick={() => window.location.href = instagram} className="fa fa-instagram cursor-pointer" style={{ fontSize: '1.4rem' }} />

                              </div>

                            )

                          }

                        </div>

                        <div

                          className="container"

                        >

                          <div

                            className="row overflow-auto"

                          >

                            <div

                              className="col"

                            >

                              <span style={{ fontSize: '1rem' }} >Seguidores</span>

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

                            </div>

                            {authorizedLinks?.link_unfollow && (

                              <div

                                className="col"

                              >

                                <button

                                  href="#"

                                  className="btn btn-primary"

                                  onClick={(e) => {

                                    e.preventDefault();

                                    handleButtonAction(authorizedLinks?.link_unfollow);

                                  }}

                                >

                                  Dejar de seguir

                                </button>

                              </div>

                            )}

                            {authorizedLinks?.link_follow && (

                              <div

                                className="col"

                              >

                                <button

                                  href="#"

                                  className="btn btn-primary"

                                  onClick={(e) => {

                                    e.preventDefault();

                                    handleButtonAction(authorizedLinks?.link_follow);

                                  }}

                                >

                                  Seguir

                                </button>

                              </div>

                            )}

                            {authorizedLinks?.link_request && (

                              <div

                                className="col"

                              >

                                <button

                                  href="#"

                                  className="btn btn-primary"

                                  onClick={(e) => {

                                    e.preventDefault();

                                    handleButtonAction(authorizedLinks?.link_request);

                                  }}

                                >

                                  Trabaja en esta empresa?

                                </button>

                              </div>

                            )}

                            {authorizedLinks?.link_accept && (

                              <div

                                className="col"

                              >

                                <button

                                  href="#"

                                  className="btn btn-primary"

                                  onClick={(e) => {

                                    e.preventDefault();

                                    handleButtonAction(authorizedLinks?.link_accept);

                                  }}

                                >

                                  Aceptar

                                </button>

                              </div>

                            )}

                            {authorizedLinks?.link_cancel && (

                              <div

                                className="col"

                              >

                                  <button

                                    href="#"

                                    title=""

                                    className="btn btn-primary"

                                    onClick={(e) => {

                                      e.preventDefault();

                                      handleButtonAction(authorizedLinks?.link_cancel);

                                    }}

                                  >

                                    Cancelar

                                  </button>

                              </div>

                            )}

                            {authorizedLinks?.link_reject && (

                              <div

                                className="col"

                              >

                                <button

                                  href="#"

                                  title=""

                                  className="btn btn-primary"

                                  onClick={(e) => {

                                    e.preventDefault();

                                    handleButtonAction(authorizedLinks?.link_reject);

                                  }}

                                >

                                  Rechazar

                                </button>

                              </div>

                            )}

                            {authorizedLinks?.link_leave && (

                              <div

                                className="col"

                              >

                                <button

                                  href="#"

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

                                  title=""

                                  className="btn btn-primary"

                                  onClick={(e) => {

                                    e.preventDefault();

                                    handleButtonAction(authorizedLinks?.link_leave);

                                  }}

                                >

                                  Abandonar esta empresa

                                </button>

                              </div>

                            )}

                            {authorizedLinks?.link_contact && (

                              <div

                                className="col"

                              >

                                <button

                                  href={authorizedLinks?.link_contact}

                                  title=""

                                  className="btn btn-primary"

                                >

                                  Mensaje

                                </button>

                              </div>

                            )}

                          </div>

                        </div>

                      </div>

                      {/* <!--user_pro_status end--> */}

                    </div>

                    {/* <!--user_profile end--> */}

                    <CompanyFollowersHelper companyId={companyId} />

                  </div>

                  {/* <!--main-left-sidebar end--> */}

                </div>

                <div className="col-lg-6">

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

                              >

                                <span className="p-2 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)}

                            >

                              <span className="p-2 default-link font-weight-bold text-dark">Ver Info</span>

                            </button>

                          </div>

                        </div>

                      }

                      {/* <!-- tab-feed end--> */}

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

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

                <div className="col-lg-3">

                  <div className="right-sidebar">

                    {loading && (

                      <div className="spinner-container">

                        <Spinner />

                      </div>

                    )}

                    <div

                      className="widget suggestions full-width d-none d-md-block d-lg-block"

                      style={{

                        height: "auto",

                        overflowY: "auto",

                      }}

                    >

                      <div className="sd-title">

                        <h3>Empresas similares</h3>

                      </div>

                      {/* <!--sd-title end--> */}

                      {suggestionCompanies.length ? (

                        getData().map(element => {

                          return (

                            <div className="suggestion-usd d-flex justify-content-start align-items-center " key={element.id}>

                              <img

                                style={{ width: "10%", height: "auto" }}

                                src={element.image}

                                alt=""

                              />

                              <div

                                className="sgt-text"

                              >

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

                                  <h4 className="text-dark">{element.name}</h4>

                                </a>

                              </div>

                            </div>

                          )

                        })

                      ) : (

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

                      )}

                      <div

                        className="w-100 text-center"

                      >

                        <button className="btn btn-primary" onClick={() => setLookMore(!lookMore)}>

                          Ver mas

                        </button>

                      </div>

                    </div>

                  </div>

                  {/* <!--right-sidebar end--> */}

                </div>

              </div>

            </div>

            {/* <!-- main-section-data end--> */}

          </div>

        </div>

      </main>

    </React.Fragment >

  );

};

// const mapStateToProps = (state) => ({

// })

const mapDispatchToProps = {

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

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

};

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