Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { Suspense } from "react";

import styled from "styled-components";

import { useDispatch } 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 ShareFeed from "../share-feed/ShareFeed";

import ShareModal from "../share-modal/ShareModal";

import SocialNetworks from "./SocialNetworks";

import HomeNews from "./HomeNews";

import SuggestedGroupsHelper from "../../../shared/helpers/suggested-groups-helper/SuggestedGroupsHelper";

import MyGroups from "../../../shared/helpers/my-groups-helper/MyGroups";

import Spinner from "../../../shared/loading-spinner/Spinner";

const FeedSection = React.lazy(() => import("../feed-section/FeedSection"));

const StyledSpinner = styled.div`

  width:100%;

  height:100%;

  display:grid;

  place-items:center;

`;

const HomeSection = ({ routeTimeline, backendVars }) => {

  const dispatch = useDispatch()

  const { image, feed } = backendVars;

  dispatch(setTimelineUrl(routeTimeline));

  return (

    <>

      <div className="main-section">

        <div className='main-section-data'>

          <div className="main-left-sidebar d-none d-md-flex">

            <MyGroups />

            <SuggestedGroupsHelper />

            <div className="d-block d-xl-none">

              <PeopleYouMayKnow />

            </div>

            <SocialNetworks />

          </div>

          <div className='feed-section'>

            <ShareFeed image={image} feedType={feedTypes.DASHBOARD} postUrl="/feed/add" />

            <Suspense

              fallback={

                <StyledSpinner>

                  <Spinner />

                </StyledSpinner>

              }

            >

              <FeedSection

                routeTimeline={routeTimeline}

                feed={feed}

                image={image}

              />

            </Suspense>

          </div>

          <div className='right-sidebar'>

            <PeopleYouMayKnow />

            <HomeNews />

          </div>

        </div>

      </div>

      <ShareModal />

      <NotificationAlert />

    </>

  );

};

export default HomeSection;