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