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;