Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import { useFetch, useMediaQuery } from '@hooks'
import {
  fetchFeeds,
  setCurrentPage,
  setTimelineUrl
} from '@app/redux/feed/feed.actions'
import { feedTypes } from '@app/redux/feed/feed.types'

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 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 '@components/dashboard/widgets/AppsWidget'
import OnRoomWidget from '@components/dashboard/widgets/OnRoomWidget'
import MicrolearningWidget from '@components/dashboard/widgets/MicrolearningWidget'
import Pagination from '@components/common/Pagination'
import HabitsWidget from '@components/dashboard/widgets/HabitsWidget'

import LoadingWrapper from '@components/common/loading-wrapper'
import List from '@components/common/list'
import Feed from '@components/dashboard/feed/feed'

const DashboardPage = () => {
  const { feeds, timelineUrl, currentPage, loading, pages } = useSelector(
    ({ feed }) => feed
  )
  const dispatch = useDispatch()
  const isMobile = useMediaQuery('(max-width: 900px)')

  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 (
    <>
      <AppGrid
        renderSidebar={() => (
          <>
            <UserProfileCard user={data} />
            {!isMobile && (
              <>
                <OnRoomWidget moodle={moodle} />
                <HabitsWidget />
                <MicrolearningWidget />
                <AppsWidget microlearning={microlearning} />
              </>
            )}
            <GroupsWidget />
          </>
        )}
        renderMain={() => (
          <>
            {isMobile && (
              <>
                {data?.routeDailyPulse && (
                  <DailyPulse dailyPulseUrl={data?.routeDailyPulse} />
                )}
                <OnRoomWidget moodle={moodle} />
                <HabitsWidget />
                <MicrolearningWidget />
                <AppsWidget microlearning={microlearning} />
              </>
            )}
            <FeedShare
              image={data?.image}
              feedType={feedTypes.DASHBOARD}
              postUrl='/feed/add'
            />
            <LoadingWrapper loading={loading}>
              <List
                items={allFeeds}
                elementsKey='feed_unique'
                emptyMessage='No hay publicaciones para mostrar'
                renderItem={(feed) => <Feed id={feed.feed_unique} />}
              />
              <Pagination
                pages={pages}
                page={currentPage}
                onChange={onChangePageHandler}
              />
            </LoadingWrapper>
          </>
        )}
        renderAside={() => (
          <>
            {routeDailyPulse && !isMobile && (
              <DailyPulse dailyPulseUrl={routeDailyPulse} />
            )}
            <PeopleYouMayKnow />
            <HomeNews />
          </>
        )}
      />
      <ShareModal />
      <ReportModal />
    </>
  )
}

export default DashboardPage