Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react';

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 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 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';

import { Box, Grid } from '@mui/material';

const DashboardPage = () => {

  const dispatch = useDispatch();

  const { id } = useParams();

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

  const { feeds, timelineUrl, currentPage, loading, pages } = useSelector(({ feed }) => feed);

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

  const onChangePageHandler = (currentPage) => {

    dispatch(setCurrentPage(currentPage));

    window.scrollTo(0, 0);

  };

  useEffect(() => {

    if (!data || !data.routeTimeline) return;

    console.log(data.routeTimeline);

    dispatch(setTimelineUrl(data.routeTimeline));

  }, [data, id]);

  useEffect(() => {

    dispatch(fetchFeeds(timelineUrl, currentPage));

  }, [timelineUrl, currentPage]);

  return (

    <Grid container spacing={1}>

      <Grid

        size={{ xs: 12, md: 3 }}

        sx={{ display: { xs: 'none', md: 'flex' }, flexDirection: 'column', gap: 1 }}

      >

        <UserProfileCard user={data} />

        <OnRoomWidget

          moodle={{

            image: data?.moodle_image,

            name: data?.moodle_name

          }}

        />

        <HabitsWidget />

        <MicrolearningWidget />

        <AppsWidget

          microlearning={{

            playStore: data?.microlearning_playstore,

            appStore: data?.microlearning_appstore,

            name: data?.microlearning_name

          }}

        />

        <GroupsWidget />

      </Grid>

      <Grid size={{ xs: 12, md: 6 }} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>

        <Box sx={{ display: { xs: 'flex', md: 'none' }, flexDirection: 'column', gap: 1 }}>

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

          <OnRoomWidget

            moodle={{

              image: data?.moodle_image,

              name: data?.moodle_name

            }}

          />

          <HabitsWidget />

          <MicrolearningWidget />

          <AppsWidget

            microlearning={{

              playStore: data?.microlearning_playstore,

              appStore: data?.microlearning_appstore,

              name: data?.microlearning_name

            }}

          />

        </Box>

        <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>

      </Grid>

      <Grid size={{ xs: 12, md: 3 }} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>

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

        <PeopleYouMayKnow />

        <HomeNews />

      </Grid>

    </Grid>

  );

};

export default DashboardPage;