Proyectos de Subversion LeadersLinked - SPA

import React, { useContext, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Grid } from '@mui/material';

// Global store
import { fetchFeeds, setCurrentPage, setTimelineUrl } from '@store/feed/feed.actions';
import { feedTypes } from '@store/feed/feed.types';

// Module context
import { EditGroupContext } from '@groups/contexts';

// Module components
import { Pagination, Spinner } from '@shared/components';
import { GroupCard, Members } from '@groups/components';

// Global components
import GroupWidget from '@components/widgets/linkedin/group-widget';
import AboutGroup from '@groups/components/AboutGroup';
import ShareComponent from '@components/dashboard/linkedin/share/ShareComponent';
import FeedList from '@components/dashboard/linkedin/feed-list/FeedList';

const GroupPage = () => {
  const dispatch = useDispatch();

  const { group, loading } = useContext(EditGroupContext);

  const { feeds, timelineUrl, currentPage, pages } = useSelector(({ feed }) => feed);
  const allFeeds = feeds.allIds.map((id) => feeds.byId[id]);

  const onChangePageHandler = (currentPage) => {
    dispatch(setCurrentPage(currentPage));
    window.scrollTo(0, 0);
  };

  useEffect(() => {
    dispatch(fetchFeeds(timelineUrl, currentPage));
  }, [timelineUrl, currentPage]);

  useEffect(() => {
    if (group) {
      dispatch(setTimelineUrl(`/feed/timeline/${group.group_uuid}/group`));
    }
  }, [group]);

  if (loading || !group) return <Spinner />;

  return (
    <Grid container spacing={1}>
      <Grid size={{ xs: 12, md: 3 }}>
        <GroupWidget group={group} />
      </Grid>
      <Grid size={{ xs: 12, md: 6 }} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <GroupCard group={group} uuid={group.group_uuid} />
        {group.without_feeds ? (
          <AboutGroup {...group} />
        ) : (
          <>
            <ShareComponent
              feedType={feedTypes.GROUP}
              postUrl={`/feed/add/group/${group.group_uuid}`}
              image={group.image}
            />
            <FeedList feeds={allFeeds} loading={loading} />
            <Pagination pages={pages} page={currentPage} onChange={onChangePageHandler} />
          </>
        )}
      </Grid>
      <Grid size={{ xs: 12, md: 3 }} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <Members uuid={group.group_uuid} />
        {!group.without_feeds && <AboutGroup {...group} />}
      </Grid>
    </Grid>
  );
};

export default GroupPage;