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 '@hooks'
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 UserProfileCard from '@app/components/dashboard/linkedin/user-profile-card'
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={() => (
            <>
              <UserProfileCard 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