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

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="row">
                <div className="col-lg-3">
                  <div className="main-left-sidebar border-radius border-gray">
                    <div className="user_profile m-0 p-1">
                      <div className="user-pro-img">
                        <img
                          // src="<?php echo $this->url('storage', ['type' => 'group', 'code' => $group_id_encrypted, 'filename' => $image]) ?>"
                          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 "
                            >
                              <div className="col">
                                <p>Miembros</p>
                                <b style={{fontSize: '1rem'}} >{totalMembers}</b>
                              </div>
                              <div className="col">
                                <a
                                  href={linkInmail || '#'}
                                  className="btn btn-primary"
                                  title=""
                                >
                                  Mensaje
                                </a>
                              </div>
                              <div className="col">
                                <a
                                  href={linkInmail || '#'}
                                  className="btn btn-primary"
                                  title=""
                                >
                                  Mensaje
                                </a>
                              </div>
                              {
                                actionLinks.link_accept && (
                                  <div
                                    className="col"
                                  >
                                    <button
                                      onClick={() => handleActionLink(actionLinks.link_accept)}
                                      className="btn btn-primary"
                                      title=""
                                    >
                                      <span className="ellipsis">
                                        Aceptar invitacion
                                      </span>
                                    </button>
                                  </div>
                                )
                              }
                              {
                                actionLinks.link_cancel && (
                                  <div
                                    className="col"
                                  >
                                    <button
                                      onClick={() => handleActionLink(actionLinks.link_cancel)}
                                      className="btn btn-primary"
                                      title=""
                                    >
                                      <span className="ellipsis">
                                        Cancelar invitacion
                                      </span>
                                    </button>
                                  </div>
                                )
                              }
                              {
                                (!linkInvite && actionLinks.link_leave) && (
                                  <div
                                    className="col"
                                  >
                                    <button
                                      onClick={() => handleActionLink(actionLinks.link_leave)}
                                      className="btn btn-danger"
                                      title=""
                                    >
                                      <span className="ellipsis">
                                        Abandonar grupo
                                      </span>
                                    </button>
                                  </div>
                                )
                              }
                              {
                                actionLinks.link_request && (
                                  <div
                                    className="col"
                                  >
                                    <button
                                      onClick={() => handleActionLink(actionLinks.link_request)}
                                      className="btn btn-primary"
                                      title=""
                                    >
                                      Solicitar membresia
                                    </button>
                                  </div>
                                )
                              }
                              {
                                actionLinks.link_accept && (
                                  <div
                                    className="col"
                                  >
                                    <button
                                      onClick={() => handleActionLink(actionLinks.link_accept)}
                                      className="btn btn-success"
                                      title=""
                                    >
                                      <i className="fa fa-check"></i> Aceptar invitacion
                                    </button>
                                  </div>
                                )
                              }
                              {
                                actionLinks.link_cancel && (
                                  <div className="col">
                                    <button
                                      onClick={() => handleActionLink(actionLinks.link_cancel)}
                                      className="btn btn-danger"
                                      title=""
                                    >
                                      Cancelar invitacion
                                    </button>
                                  </div>
                                )
                              }
                              {
                                (!linkInvite && actionLinks.link_leave) && (
                                  <div
                                    className="col"
                                  >
                                    <button
                                      onClick={() => handleActionLink(actionLinks.link_leave)}
                                      className="btn btn-danger"
                                      title=""
                                    >
                                      Abandonar grupo
                                    </button>
                                  </div>
                                )
                              }
                              {
                                actionLinks.link_request && (
                                  <div className="col">
                                    <button
                                      onClick={() => handleActionLink(actionLinks.link_request)}
                                      className="btn btn-primary"
                                      title=""
                                    >
                                      Solicitar membresia
                                    </button>
                                  </div>
                                )
                              }
                            </div>
                          </div>
                          
                        </ul>
                      </div>
                    </div>
                  </div>
                  <GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />
                </div>

                <div className="col-lg-6">
                  <div className="message-btn d-block d-md-none d-lg-none d-sm-none">
                    
                  </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);
                                   (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.FEED_TAB ? "active" : ""
                                } animated fadeIn btn btn-link p-0 text-decoration-none`}
                                onClick={(e) => {
                                  e.preventDefault();
                                  setCurrentTab(groupTabs.FEED_TAB);
                                    (groupTabs.FEED_TAB);
                                }}
                              >
                                <span className="ellipsis text-dark font-weight-bold">Ver Publicaciones</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",
                      }}
                    >
                      <div className="">
                        <ShareFeed
                          feedType={feedTypes.GROUP}
                          postUrl={`/feed/add/group/${groupId}`}
                        />
                      </div>
                      {/* <!--posts-section star--> */}
                      <div className="posts-section">
                        <FeedSection routeTimeline={routeTimeline} />
                      </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 ? "block" : "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>
                </div>
                {/* <!--main-ws-sec end--> */}

                <div className="col-lg-3 d-sm-none d-none d-md-block d-lg-block">
                  <div className="right-sidebar border-radius border-gray">
                    {/* <?php echo $this->similarGroupsHelper($group_id) ?> */}
                    <SuggestedGroupsHelper groupId={groupId} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </React.Fragment>
  );
};

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


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