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

                    }

                  >

                    <i className="fa fa-eye" />

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

                  Novedades

                </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>Novedades</h3>

                </div>

                <div className="suggestions-list">

                  {

                    news.map(element => {

                      return(

                        <div

                          key={element.title}

                        >

                          <a

                            href={element.link}

                            target="_blank"

                          >

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