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;