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