Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'

import { Container } from '@mui/material'

import { useDispatch, useSelector } from 'react-redux'

import { useParams } from 'react-router-dom'

import useFetch from '@app/hooks/useFetch'

import {

  fetchFeeds,

  setCurrentPage,

  setTimelineUrl

} from '@app/redux/feed/feed.actions'

import { feedTypes } from '@app/redux/feed/feed.types'

import PaginationComponent from '@app/components/UI/PaginationComponent'

import Spinner from '@app/components/UI/Spinner'

import AppGrid from '@app/components/UI/layout/AppGrid'

import GroupsWidget from '@app/components/dashboard/linkedin/Groups'

import UserInfo from '@app/components/dashboard/linkedin/UserInfo'

import FeedList from '@app/components/dashboard/linkedin/feed-list/FeedList'

import FeedShare from '@app/components/dashboard/linkedin/share/ShareComponent'

import ReportModal from '@app/components/modals/ReportModal'

import ShareModal from '@app/components/modals/ShareModal'

import DailyPulse from '@app/components/widgets/default/DailyPulse'

import HomeNews from '@app/components/widgets/default/HomeNews'

import PeopleYouMayKnow from '@app/components/widgets/default/PeopleYouMayKnow'

import AppsWidget from '@app/components/widgets/default/SocialNetworks'

const DashboardPage = () => {

  const { feeds, timelineUrl, currentPage, loading, pages } = useSelector(

    ({ feed }) => feed

  )

  const dispatch = useDispatch()

  const { id } = useParams()

  const { data } = useFetch(id ? `/dashboard/feed/${id}` : '/dashboard')

  const allFeeds = feeds.allIds.map((id) => feeds.byId[id])

  const {

    moodle_image,

    moodle_name,

    microlearning_appstore,

    microlearning_playstore,

    microlearning_name,

    routeDailyPulse,

    routeTimeline

  } = data

  const moodle = {

    image: moodle_image,

    name: moodle_name

  }

  const microlearning = {

    playStore: microlearning_playstore,

    appStore: microlearning_appstore,

    name: microlearning_name

  }

  const onChangePageHandler = (currentPage) => {

    dispatch(setCurrentPage(currentPage))

    window.scrollTo(0, 0)

  }

  useEffect(() => {

    dispatch(setTimelineUrl(routeTimeline))

  }, [routeTimeline, id])

  useEffect(() => {

    dispatch(fetchFeeds(timelineUrl, currentPage))

  }, [timelineUrl, currentPage])

  return (

    <>

      <Container>

        <AppGrid

          renderSidebar={() => (

            <>

              <UserInfo user={data} />

              <GroupsWidget />

              <AppsWidget moodle={moodle} microlearning={microlearning} />

            </>

          )}

          renderMain={() => (

            <>

              {data?.routeDailyPulse && (

                <div className='d-md-none'>

                  <DailyPulse dailyPulseUrl={data?.routeDailyPulse} />

                </div>

              )}

              <div className='d-md-none'>

                <AppsWidget moodle={moodle} microlearning={microlearning} />

              </div>

              <FeedShare

                image={data?.image}

                feedType={feedTypes.DASHBOARD}

                postUrl='/feed/add'

              />

              {loading ? <Spinner /> : <FeedList feeds={allFeeds} />}

              <PaginationComponent

                pages={pages}

                currentActivePage={currentPage}

                onChangePage={onChangePageHandler}

              />

            </>

          )}

          renderAside={() => (

            <>

              {routeDailyPulse && (

                <div className='d-none d-md-block'>

                  <DailyPulse dailyPulseUrl={routeDailyPulse} />

                </div>

              )}

              <PeopleYouMayKnow />

              <HomeNews />

            </>

          )}

        />

      </Container>

      <ShareModal />

      <ReportModal />

    </>

  )

}

export default DashboardPage