Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

import { useState } from "react";

import { connect } from "react-redux";

import FeedSection from "../../../dashboard/components/feed-section/FeedSection";

import ShareFeed from "../../../dashboard/components/share-feed/ShareFeed";

import { setTimelineUrl } from "../../../redux/feed/feed.actions";

import { feedTypes } from "../../../redux/feed/feed.types";

import GroupMembersHelper from "../../../shared/helpers/group-members-helper/GroupMembersHelper";

import SuggestedGroupsHelper from "../../../shared/helpers/suggested-groups-helper/SuggestedGroupsHelper";

import styled from "styled-components";

import parse from "html-react-parser";

import { axios } from "../../../utils";

import { addNotification } from "../../../redux/notification/notification.actions";

import Footer from "../../../shared/helpers/footer/Footer";

const StyledTabWrapper = styled.div`

  ul {

    display: flex;

    li a {

      margin: 1rem;

      width: 25px;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      color: black;

      img {

        filter: grayscale(100%);

      }

    }

    li.active a {

      img {

        filter: grayscale(0);

      }

    }

  }

`;

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: 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(res => {

        if (res.data.success) {

          setActionLinks(res.data.data)

        } else {

          AddNotification({

            type: 'error',

            payload: res.data.data

          })

        }

      })

      .catch(err => {

        console.log('>>: err > ', err)

      })

  }

  React.useEffect(() => {

    load()

  }, [])

  const handleActionLink = (url) => {

    axios.post(url)

      .then(res => {

        if (res.data.success) {

          AddNotification({

            style: 'success',

            msg: res.data.data

          })

          window.location.reload()

        } else {

          AddNotification({

            style: 'error',

            msg: res.data.data

          })

        }

      })

      .catch(err => {

        console.log('>>: err > ', err)

      })

  }

  return (

    <React.Fragment>

      <section className="cover-sec">

        <img

          // src="<?php echo $this->url('storage', ['type' => 'group-cover', 'code' => $group_id_encrypted, 'filename' => $cover]) ?>"

          src={`/storage/type/group-cover/code/${groupId}/${cover ? `filename/${cover}` : ""

            }`}

          alt="cover-image"

        />

      </section>

      <main>

        <div className="main-section">

          <div className="ph-5">

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

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

                <div className="user_profile border-gray overflow-hidden m-0 p-1">

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

                                title=""

                              >

                                <span className="ellipsis">

                                  Aceptar invitacion

                                </span>

                              </button>

                            )

                          }

                          {

                            actionLinks.link_cancel && (

                              <button

                                onClick={() => handleActionLink(actionLinks.link_cancel)}

                                className="btn btn-primary"

                                title=""

                              >

                                <span className="ellipsis">

                                  Cancelar invitacion

                                </span>

                              </button>

                            )

                          }

                          {

                            (!linkInvite && actionLinks.link_leave) && (

                              <button

                                onClick={() => handleActionLink(actionLinks.link_leave)}

                                className="btn btn-primary"

                                title=""

                              >

                                <span className="ellipsis">

                                  Abandonar grupo

                                </span>

                              </button>

                            )

                          }

                          {

                            actionLinks.link_request && (

                              <button

                                onClick={() => handleActionLink(actionLinks.link_request)}

                                className="btn btn-primary"

                                title=""

                              >

                                {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={(e) => {

                              e.preventDefault();

                              setCurrentTab(groupTabs.FEED_TAB);

                            }}

                          >

                            <span className="ellipsis text-dark font-weight-bold">Ver Publicaciones</span>

                          </button>

                        </div>

                        <div className="col text-right pl-0">

                          <button

                            className={` ${currentTab === groupTabs.INFO_TAB ? "active" : ""

                              } animated fadeIn btn btn-link p-0 text-decoration-none`}

                            onClick={(e) => {

                              e.preventDefault();

                              setCurrentTab(groupTabs.INFO_TAB);

                            }}

                          >

                            <span className="ellipsis text-dark font-weight-bold">Ver Información</span>

                          </button>

                        </div>

                      </div>

                    )

                  }

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

                </div>

                {/* <!--user-tab-sec end--> */}

                <div

                  className="product-feed-tab animated fadeIn"

                  id="feed-dd"

                  style={{

                    display:

                      currentTab === groupTabs.FEED_TAB ? "block" : "none",

                  }}

                >

                  <ShareFeed

                    feedType={feedTypes.GROUP}

                    postUrl={`/feed/add/group/${groupId}`}

                    image={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}

                  />

                  {/* <!--posts-section star--> */}

                  <div className="posts-section">

                    <FeedSection

                      routeTimeline={routeTimeline}

                      image={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}

                    />

                  </div>

                  {/* <!--posts-section end--> */}

                </div>

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

                <div

                  className="product-feed-tab  animated fadeIn"

                  id="info-dd"

                  style={{ display: currentTab === groupTabs.INFO_TAB ? "flex" : "none", }}

                >

                  <div className="main-ws-sec">

                    {/* <!--user-tab-sec start--> */}

                    {!!overview && (

                      <div className="user-profile-extended-ov">

                        <h3>Visión General</h3>

                        <span id="overview-description">

                          {parse(overview)}

                        </span>

                      </div>

                    )}

                    {/* <!--user-tab-sec endit--> */}

                    {/* <!--user-tab-sec start--> */}

                    {!!groupType && (

                      <div className="user-profile-extended-ov">

                        <h3>Tipo</h3>

                        <span id="overview-type">{groupType}</span>

                      </div>

                    )}

                    {/* <!--user-tab-sec endit--> */}

                    {/* <!--user-tab-sec start--> */}

                    {!!industry && (

                      <div className="user-profile-extended-ov">

                        <h3>Industria</h3>

                        <span id="overview-industry">{industry}</span>

                      </div>

                    )}

                    {/* <!--user-tab-sec endit--> */}

                    {/* <!--user-tab-sec start--> */}

                    {/* <?php if($privacy) : ?> */}

                    {!!privacy && (

                      <div className="user-profile-extended-ov">

                        <h3>Privacidad</h3>

                        <span id="overview-privacy">{privacy}</span>

                      </div>

                    )}

                    {/* <!--user-tab-sec endit--> */}

                    {/* <!--user-tab-sec start--> */}

                    {!!accessibility && (

                      <div className="user-profile-extended-ov">

                        <h3>Accesibilidad</h3>

                        <span id="overview-accessibility">

                          {accessibility}

                        </span>

                      </div>

                    )}

                    {/* <!--user-tab-sec endit--> */}

                    {/* <!--user-tab-sec start--> */}

                    {!!website && (

                      <div className="user-profile-extended-ov">

                        <h3>Página Web</h3>

                        <span id="overview-website">{website}</span>

                      </div>

                    )}

                    {/* <!--user-tab-sec endit--> */}

                    {/* <!--user-profile-ov end--> */}

                  </div>

                  {/* <!--main-ws-sec end--> */}

                </div>

              </div>

              <SuggestedGroupsHelper groupId={groupId} />

            </div>

          </div >

        </div >

      </main >

    </React.Fragment >

  );

};

const mapDispatchToProps = {

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

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

};

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