Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1105 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log | 

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(true);
  const [currentTab, setCurrentTab] = useState(TABS.FEEDS);
  const [suggestionCompanies, setSuggestionCompanies] = useState([])
  const shouldSetInitialTab = useRef(true);

  useEffect(async () => {
    setTimelineUrl(timeline);
    await 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)
    }
  }

  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) => {
     ('>>: tab> ', tab)
    setCurrentTab(tab)
  }
  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">
                      <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>
                        <ul className="flw-status">
                          <li>
                            <span style={{fontSize: '1rem'}} >Seguidores</span>
                            <b style={{fontSize: '1rem'}} id="total-followers">{followers}</b>
                          </li>
                        </ul>
                      </div>
                      {/* <!--user_pro_status end--> */}
                      <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-square" 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>
                    {/* <!--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">
                      {isFollower && !initialLoading && (
                        <div
                          className="row"
                        >
                          <div
                            className="col text-right"
                          >
                              <button
                                className="btn btn-link"
                                onClick={() => changeCurrentTab(TABS.FEEDS) }
                              >
                                <img src="/images/ic1.png" alt="" />
                                <span className="p-2 default-link ">Ver Publicaciones</span>
                              </button>
                          </div>
                          <div
                            className="col text-left"
                          >
                              <button
                                className="btn btn-link"
                                onClick={() => changeCurrentTab(TABS.INFO) }
                              >
                                <img src="/images/ic2.png" alt="" />
                                <span className="p-2 default-link">Ver Info</span>
                              </button>
                          </div>
                        </div>
                      )}

                      {/* <!-- tab-feed end--> */}
                    </div>
                    {!initialLoading && (
                      <React.Fragment>
                        {
                          currentTab === TABS.FEEDS ?
                            <div
                              className="product-feed-tab animated fadeIn"
                              id="feed-dd"
                              style={{
                                display:
                                  currentTab === TABS.FEEDS && isFollower
                                    ? "block"
                                    : "none",
                              }}
                            >
                              {/* <!--posts-section star--> */}
                              <div className="posts-section">
                                <FeedSection routeTimeline={timeline} />
                              </div>
                              {/* <!--posts-section end--> */}
                            </div>
                          :
                            <div
                              className="product-feed-tab animated fadeIn"
                              id="feed-dd"
                              style={{
                                display:
                                  currentTab === TABS.INFO || !isFollower
                                    ? "block"
                                    : "none",
                              }}
                            >
                              {!!overview && (
                                <div className="user-profile-extended-ov">
                                  <h3>Visión general</h3>
                                  <span>{parse(overview)}</span>
                                </div>
                              )}
                              {!!locations.length && (
                                <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>
                          }
                      </React.Fragment>
                    )}
                    {initialLoading && (
                      <div
                        style={{
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                        }}
                      >
                        <Spinner />
                      </div>
                    )}

                    {/* <!--user-profile-ov end-->  */}
                  </div>
                  {/* <!--main-ws-sec end--> */}
                </div>
                <div className="col-lg-3">
                  <div className="right-sidebar">
                    {/* <?php echo $this->companySuggestionHelper($company_id)?> */}
                    <div
                      className="message-btn"
                      id="div-user-buttons"
                      style={{ position: "relative" }}
                    >
                      {authorizedLinks?.link_unfollow && (
                        <a
                          href="#"
                          className="btn-remove-follower"
                          onClick={(e) => {
                            e.preventDefault();
                            handleButtonAction(authorizedLinks?.link_unfollow);
                          }}
                        >
                          <i className="fa fa-user-times"></i> Dejar de seguir
                        </a>
                      )}
                      {authorizedLinks?.link_follow && (
                        <a
                          href="#"
                          className="btn-add-follower"
                          onClick={(e) => {
                            e.preventDefault();
                            handleButtonAction(authorizedLinks?.link_follow);
                          }}
                        >
                          <i className="fa fa-plus"></i> Seguir
                        </a>
                      )}
                      {authorizedLinks?.link_request && (
                        <a
                          href="#"
                          className="btn-request"
                          onClick={(e) => {
                            e.preventDefault();
                            handleButtonAction(authorizedLinks?.link_request);
                          }}
                        >
                          <i className="fa  fa-user-plus"></i>
                          Trabaja en esta empresa?
                        </a>
                      )}
                      {authorizedLinks?.link_accept && (
                        <a
                          href="#"
                          className="btn-accept"
                          onClick={(e) => {
                            e.preventDefault();
                            handleButtonAction(authorizedLinks?.link_accept);
                          }}
                        >
                          <i className="fa fa-check"></i> Aceptar
                        </a>
                      )}
                      {authorizedLinks?.link_cancel && (
                        <a
                          href="#"
                          title=""
                          className="btn-cancel"
                          onClick={(e) => {
                            e.preventDefault();
                            handleButtonAction(authorizedLinks?.link_cancel);
                          }}
                        >
                          <i className="fa fa-user-times "></i> Cancelar
                        </a>
                      )}
                      {authorizedLinks?.link_reject && (
                        <a
                          href="#"
                          title=""
                          className="btn-reject"
                          onClick={(e) => {
                            e.preventDefault();
                            handleButtonAction(authorizedLinks?.link_reject);
                          }}
                        >
                          <i className="fa fa-user-times "></i> Rechazar
                        </a>
                      )}
                      {authorizedLinks?.link_leave && (
                        <a
                          href="#"
                          data-link="{{>link_leave}}"
                          title=""
                          className="btn-leave"
                          onClick={(e) => {
                            e.preventDefault();
                            handleButtonAction(authorizedLinks?.link_leave);
                          }}
                        >
                          <i className="fa fa-user-times "></i>
                          Abandonar esta empresa
                        </a>
                      )}
                      {authorizedLinks?.link_contact && (
                        <a
                          href={authorizedLinks?.link_contact}
                          title=""
                          className="btn-send-message"
                        >
                          <i className="fa fa-envelope "></i> Mensaje
                        </a>
                      )}
                      {loading && (
                        <div className="spinner-container">
                          <Spinner />
                        </div>
                      )}
                    </div>
                    <div
                        className="widget suggestions full-width d-none d-md-block d-lg-block"
                        style={{
                          height: "450px",
                          overflowY: "auto",
                        }}
                      >
                        <div className="sd-title">
                          <h3>Empresas similares</h3>
                        </div>
                        {/* <!--sd-title end--> */}
                        {suggestionCompanies.length ? (
                          suggestionCompanies.map(element => {
                            return(
                              <div className="suggestion-usd" key={element.id}>
                                <img
                                  style={{ width: "50px", 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>
                  </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);