Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from "react";
import parse from "html-react-parser";
import { axios } from "../../../utils";
import { connect } from "react-redux";
import { setTimelineUrl } from "../../../redux/feed/feed.actions";
import { addNotification } from "../../../redux/notification/notification.actions";
import { feedTypes } from "../../../redux/feed/feed.types";
import FeedSection from "../../../dashboard/components/feed-section/FeedSection";
import ShareFeed from "../../../dashboard/components/share-feed/ShareFeed";
import GroupMembersHelper from "../../../shared/helpers/group-members-helper/GroupMembersHelper";
import SuggestedGroupsHelper from "../../../shared/helpers/suggested-groups-helper/SuggestedGroupsHelper";


const View = (props) => {
  // backendVars Destructuring
  const {
    routeTimeline,
    groupId,
    cover,
    image,
    totalMembers,
    name,
    overview,
    groupType,
    industry,
    privacy,
    accessibility,
    website,
    withoutFeeds,
    linkInmail
  } = props.backendVars;

  // redux destructuring
  const { setTimelineUrl, addNotification } = props;

  const groupTabs = {
    FEED_TAB: "FEED_TAB",
    INFO_TAB: "INFO_TAB",
  };

  // states
  const [currentTab, setCurrentTab] = useState(withoutFeeds ? groupTabs.INFO_TAB : groupTabs.FEED_TAB);
  const [actionLinks, setActionLinks] = useState({})
  const [linkInvite, setLinkInvite] = useState('')

  setTimelineUrl(routeTimeline);

  const load = () => {
    axios.get('')
      .then(({ data }) => {
        if (!data.success) {
          return addNotification({ style: 'error', msg: data.data })
        }
        setActionLinks(data.data)
      })
      .catch(err => console.log('>>: err > ', err))
  }

  useEffect(() => {
    load()
  }, [])

  const handleActionLink = (url) => {
    axios.post(url)
      .then(({ data }) => {
        if (!data.success) {
          return addNotification({ style: 'error', msg: data.data })
        }
        addNotification({ style: 'success', msg: data.data })
        window.location.reload()
      })
      .catch(err => console.log('>>: err > ', err))
  }

  return (
    <>
      <section className="cover-sec">
        <img
          src={`/storage/type/group-cover/code/${groupId}/${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/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
                  alt="profile-image"
                />
              </div>
              <div className="user_pro_status">
                <h1 className="font-weight-bold" style={{ fontSize: '1.5rem' }} >{name}</h1>
                <ul className="flw-status">
                  <div className="container horizontal-list">
                    <div className="row ">
                      {
                        linkInmail &&
                        <a
                          href={linkInmail || '#'}
                          className="btn btn-primary"
                        >
                          Contactar con el Administrador
                        </a>
                      }
                      <div className="members_count">
                        <b style={{ fontSize: '1rem' }} >{totalMembers}</b>
                        <p>Miembros</p>
                      </div>
                      {
                        actionLinks.link_accept &&
                        <button
                          onClick={() => handleActionLink(actionLinks.link_accept)}
                          className="btn btn-primary"
                        >
                          Aceptar invitacion
                        </button>
                      }
                      {
                        actionLinks.link_cancel &&
                        <button
                          onClick={() => handleActionLink(actionLinks.link_cancel)}
                          className="btn btn-primary"
                        >
                          Cancelar invitacion
                        </button>
                      }
                      {
                        (!linkInvite && actionLinks.link_leave) &&
                        <button
                          onClick={() => handleActionLink(actionLinks.link_leave)}
                          className="btn btn-primary"
                        >
                          Abandonar grupo
                        </button>
                      }
                      {
                        actionLinks.link_request &&
                        <button
                          onClick={() => handleActionLink(actionLinks.link_request)}
                          className="btn btn-primary"
                        >
                          {accessibility === 'Auto unirse' ? 'Unirse' : 'Solicitar membresia'}
                        </button>
                      }
                    </div>
                  </div>

                </ul>
              </div>
            </div>
            <GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />
          </div>
          <div className="main-ws-sec">
            <div className="user-tab-sec">
              {
                !withoutFeeds &&
                <div className="row">
                  <div className="col text-left pl-0">
                    <button
                      className={` ${currentTab === groupTabs.FEED_TAB ? "active" : ""} animated fadeIn btn btn-link p-0 text-decoration-none`}
                      onClick={() => setCurrentTab(groupTabs.FEED_TAB)}
                    >
                      <span className="font-weight-bold">Ver Publicaciones</span>
                    </button>
                  </div>
                  <div className="col text-right pr-0">
                    <button
                      className={` ${currentTab === groupTabs.INFO_TAB ? "active" : ""} animated fadeIn btn btn-link p-0 text-decoration-none`}
                      onClick={() => setCurrentTab(groupTabs.INFO_TAB)}
                    >
                      <span className="font-weight-bold">Ver Información</span>
                    </button>
                  </div>
                </div>
              }
            </div>
            <div
              className="product-feed-tab animated fadeIn"
              style={{ display: currentTab === groupTabs.FEED_TAB ? "flex" : "none" }}
            >
              <ShareFeed
                feedType={feedTypes.GROUP}
                postUrl={`/feed/add/group/${groupId}`}
                image={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
              />
              <div className="posts-section">
                <FeedSection
                  routeTimeline={routeTimeline}
                  image={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
                />
              </div>
            </div>
            <div
              className="product-feed-tab  animated fadeIn"
              style={{ display: currentTab === groupTabs.INFO_TAB ? "flex" : "none", }}
            >
              <div className="main-ws-sec">
                {!!overview &&
                  <div className="user-profile-extended-ov">
                    <h3>Visión General</h3>
                    <span id="overview-description">
                      {parse(overview)}
                    </span>
                  </div>
                }
                {!!groupType &&
                  <div className="user-profile-extended-ov">
                    <h3>Tipo</h3>
                    <span id="overview-type">{groupType}</span>
                  </div>
                }
                {!!industry &&
                  <div className="user-profile-extended-ov">
                    <h3>Industria</h3>
                    <span id="overview-industry">{industry}</span>
                  </div>
                }
                {!!privacy &&
                  <div className="user-profile-extended-ov">
                    <h3>Privacidad</h3>
                    <span id="overview-privacy">{privacy}</span>
                  </div>
                }
                {!!accessibility &&
                  <div className="user-profile-extended-ov">
                    <h3>Accesibilidad</h3>
                    <span id="overview-accessibility">
                      {accessibility}
                    </span>
                  </div>
                }
                {!!website &&
                  <div className="user-profile-extended-ov">
                    <h3>Página Web</h3>
                    <span id="overview-website">{website}</span>
                  </div>
                }
              </div>
            </div>
          </div>
          <div className="right-sidebar">
            <SuggestedGroupsHelper groupId={groupId} />
          </div>
        </div>
      </main >
    </>
  );
};

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


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