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>
                        <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>
      </main >
    </>
  );
};

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
  setTimelineUrl: (url) => setTimelineUrl(url),
};

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