Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { connect } from "react-redux";
import { setTimelineUrl } from "../../../redux/feed/feed.actions";
import { feedTypes } from "../../../redux/feed/feed.types";
import PeopleYouMayKnow from "../../../shared/helpers/people-you-may-know/PeopleYouMayKnow";
import NotificationAlert from "../../../shared/notification/NotificationAlert";
import FeedSection from "../feed-section/FeedSection";
import ShareFeed from "../share-feed/ShareFeed";
import ShareModal from "../share-modal/ShareModal";
import parse from "html-react-parser";

import styles from "./HomeSection.module.scss";
import { axios } from "../../../utils";
import { addNotification } from "../../../redux/notification/notification.actions";

const HomeSection = (props) => {
  // props destructuring
  const { routeTimeline, addNotification } = props;

  // backendVars destructuring
  const { image, fullName, country, visits, connections, description, feed } = props.backendVars;

  // redux destructuring
  const { setTimelineUrl } = props;
  const [news, setNews] = React.useState([])
  const loadNews = () => {
    axios.get('/helpers/posts')
      .then(res => {
        if(res.data.success){
          setNews(res.data.data)
        }
      })
      .catch(err => {
        addNotification({
          style: "error",
          msg: "Disculpe, ha ocurrido un error buscando novedades",
        });
      })
  }
  React.useEffect(() => {
    loadNews()
  }, [])
  setTimelineUrl(routeTimeline);
  return (
    <div>
      <div className="main-section">
        <div className={styles.mainSection}>
          {/* <!--  LEFT COLUMN START --> */}
          <div className={styles.sectionHeader}>
            <div className={styles.userProfile}>
              <div className={styles.userProfile__header}>
                <div className={styles.userProfile__header__imgContainer}>
                  <img src={image} alt="profile-image" />
                </div>
                <div className={styles.userProfile__header__nameContainer}>
                  <p
                    className="text-center font-weight-bold"
                  >
                    {fullName}
                  </p>
                  {
                    !!description && (
                      <p
                        className="text-center p-1 small-text-children"
                      >
                        {parse(description)}
                      </p>
                    )
                  }
                  {
                    !!country && (
                      <p
                        className="text-center"
                      >
                        <i className="pl-2 fa fa-map-marker px-2"></i>
                        {country}
                      </p>
                    )
                  }
                </div>
              </div>
              <div className={styles.userProfile__headerBackground}></div>
              <ul className={styles.userProfile__connectionInfo}>
                <li
                  className={styles.userProfile__connectionInfo__infoContainer}
                >
                  <p
                    className={
                      styles.userProfile__connectionInfo__infoContainer__title
                    }
                  >
                    Vistas
                    <span
                      className={
                        styles.userProfile__connectionInfo__infoContainer__info
                      }
                    >
                      {visits}
                    </span>
                  </p>
                </li>
                <li
                  className={styles.userProfile__connectionInfo__infoContainer}
                >
                  <p
                    className={
                      styles.userProfile__connectionInfo__infoContainer__title
                    }
                  >
                    Conexiones
                    <span
                      className={
                        styles.userProfile__connectionInfo__infoContainer__info
                      }
                    >
                      {connections}
                    </span>
                  </p>
                </li>
              </ul>
            </div>
            <div className={`${styles.widget} ${styles.mobile_widget}`}>
              <div className={styles.widget__app}>
                <a href="#">
                  <img
                    className={styles.widget__app__img}
                    src="/images/icon-persons-you-may-know.png"
                    alt=""
                  />
                </a>
                <a href="#" className={styles.widget__app__title} title="">
                  Personas Sugeridas
                </a>
              </div>
              <div className={styles.widget__app}>
                <a href="#">
                  <img
                    className={styles.widget__app__img}
                    src="/images/icon-recent-news.png"
                    alt=""
                  />
                </a>
                <a href="#" className={styles.widget__app__title} title="">
                  Noticias
                </a>
              </div>
            </div>
            <div className={styles.widget}>
              <div className={styles.widget__app}>
                <a href="#">
                  <img
                    className={styles.widget__app__img}
                    src="/images/logo-onroom.png"
                    alt=""
                  />
                </a>
                <a href="#" className={styles.widget__app__title} title="">
                  CESA ON ROOM
                </a>
              </div>
              {/* <div className={styles.widget__app}>
                <a href="#">
                  <img
                    className={styles.widget__app__img}
                    src="/images/logo-meeting-small.jpeg"
                    alt=""
                  />
                </a>
                <a href="#" className={styles.widget__app__title} title="">
                  CESA Meeting
                </a>
              </div> */}
              <div className={styles.widget__app}>
                <a href="#">
                  <img
                    className={styles.widget__app__img}
                    src="/images/logo-2getskills.jpeg"
                    alt=""
                  />
                </a>
                <a href="#" className={styles.widget__app__title} title="">
                  Microaprendizaje
                </a>
              </div>
            </div>
          </div>
          {/* <!--  LEFT COLUMN END --> */}

          {/* <!-- CENTER COLUMN START --> */}
          <div className={styles.feedSection}>
            {/* <!--posts-section star--> */}
            <ShareFeed feedType={feedTypes.DASHBOARD} postUrl="/feed/add" />
            <FeedSection
              routeTimeline={routeTimeline}
              feed={feed}
            />
            {/* <!--posts-section end--> */}
          </div>
          {/* <!-- CENTER COLUMN END --> */}

          {/* <!-- RIGTH COLUMN START --> */}
          <div className={styles.peopleYouMayKnow}>
            {/* <?php echo $this->peopleYouMayKnowHelper($currentUser->id) ?> */}
            <PeopleYouMayKnow />
            <div
              style={{
                padding: '5% 0%'
              }}
            >
              <div className={styles.suggestions}>
                <div className="sd-title">
                  <h3>Noticias Recientes</h3>
                </div>

                <div className="suggestions-list">
                  {
                    news.map(element => {
                      return(
                        <div
                          key={element.title}
                        >
                          <a
                            href={element.link}
                          >
                            {element.title}
                          </a>
                          <p>
                            {element.date}
                          </p>
                        </div>
                      )
                    })
                  }
                </div>
              </div>
            </div>
          </div>
          {/* <!--right-sidebar end--> */}
        </div>
        {/* <!-- RIGTH COLUMN END --> */}
      </div>
      <ShareModal />
      <NotificationAlert />
    </div>
  );
};

// const mapStateToProps = (state) => ({

// })

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

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