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