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;