Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';

import { useFetch } from '@hooks';
import { feedTypes } from '@store/feed/feed.types';
import { fetchFeeds, setCurrentPage, setTimelineUrl } from '@store/feed/feed.actions';
import { Pagination, Spinner } from '@shared/components';
import AppGrid from '@components/UI/layout/AppGrid';
import GroupWidget from '@components/widgets/linkedin/group-widget';
import GroupActions from '@groups/components/sections-cards/group-actions/GroupActions';
import ShareComponent from '@components/dashboard/linkedin/share/ShareComponent';
import FeedList from '@components/dashboard/linkedin/feed-list/FeedList';
import Members from '@groups/components/sections-cards/members/Members';
import AboutGroup from '@groups/components/AboutGroup';

const GroupPage = () => {
  const { uuid } = useParams();
  const dispatch = useDispatch();
  const { data, isLoading, refetch } = useFetch(`/group/view/${uuid}`);

  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(() => {
    dispatch(fetchFeeds(timelineUrl, currentPage));
  }, [timelineUrl, currentPage]);

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

  if (isLoading) {
    return <Spinner />;
  }

  return (
    <AppGrid
      renderSidebar={() => <GroupWidget group={data} />}
      renderMain={() => (
        <>
          <GroupActions {...data} refetch={refetch} />
          {data.without_feeds ? (
            <AboutGroup {...data} />
          ) : (
            <>
              <ShareComponent
                feedType={feedTypes.GROUP}
                postUrl={`/feed/add/group/${uuid}`}
                image={data?.image}
              />
              <FeedList feeds={allFeeds} loading={loading} />
              <Pagination pages={pages} page={currentPage} onChange={onChangePageHandler} />
            </>
          )}
        </>
      )}
      renderAside={() => (
        <>
          <Members id={data.group_uuid} />
          {!data.without_feeds && <AboutGroup {...data} />}
        </>
      )}
    />
  );
};

export default GroupPage;