Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { Suspense } from "react";
import { connect } from "react-redux";
import { setTimelineUrl } from "../../../redux/feed/feed.actions";
import { feedTypes } from "../../../redux/feed/feed.types";
import { addNotification } from "../../../redux/notification/notification.actions";
import Spinner from "../../../shared/loading-spinner/Spinner";
import NotificationAlert from "../../../shared/notification/NotificationAlert";
import ShareModal from "../share-modal/ShareModal";

const SuggestedGroupsHelper = React.lazy(() => ("../../../shared/helpers/suggested-groups-helper/SuggestedGroupsHelper"));
const SocialNetworks = React.lazy(() => import("./SocialNetworks"));
const ShareFeed = React.lazy(() => import("../share-feed/ShareFeed"));
const FeedSection = React.lazy(() => import("../feed-section/FeedSection"));
const PeopleYouMayKnow = React.lazy(() => import("../../../shared/helpers/people-you-may-know/PeopleYouMayKnow"));
const HomeNews = React.lazy(() => import("./HomeNews"));

import styles from "./HomeSection.module.scss";

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;

  setTimelineUrl(routeTimeline);
  return (
    <div>
      <div className="main-section">
        <div className={styles.mainSection}>
          <div className="d-none d-sm-none d-md-block d-lg-block">
            <div className={styles.sectionHeader}>
              <Suspense
                fallback={
                  <div className="w-100 h-100" style={{ display: "flex", placeItems: 'center' }}>
                    <Spinner />
                  </div>
                }
              >
                <SuggestedGroupsHelper />
              </Suspense>
              <Suspense
                fallback={
                  <div className="w-100 h-100" style={{ display: "flex", placeItems: 'center' }}>
                    <Spinner />
                  </div>
                }
              >
                <SocialNetworks />
              </Suspense>
            </div>
          </div>
          <div className={styles.feedSection}>
            <Suspense
              fallback={
                <div className="w-100 h-100" style={{ display: "flex", placeItems: 'center' }}>
                  <Spinner />
                </div>
              }
            >
              <ShareFeed image={image} feedType={feedTypes.DASHBOARD} postUrl="/feed/add" />
            </Suspense>
            <Suspense
              fallback={
                <div className="w-100 h-100" style={{ display: "flex", placeItems: 'center' }}>
                  <Spinner />
                </div>
              }
            >
              <FeedSection
                routeTimeline={routeTimeline}
                feed={feed}
                image={image}
              />
            </Suspense>
          </div>
          <div className={styles.peopleYouMayKnow}>
            <Suspense
              fallback={
                <div className="w-100 h-100" style={{ display: "flex", placeItems: 'center' }}>
                  <Spinner />
                </div>
              }
            >
              <PeopleYouMayKnow />
            </Suspense>
            <Suspense
              fallback={
                <div className="w-100 h-100" style={{ display: "flex", placeItems: 'center' }}>
                  <Spinner />
                </div>
              }
            >
              <HomeNews />
            </Suspense>
          </div>
        </div>
      </div>
      <ShareModal />
      <NotificationAlert />
    </div>
  );
};

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

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