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 '@store/feed/feed.actions';

import AppGrid from '@components/UI/layout/AppGrid';
import Spinner from '@components/UI/Spinner';
import Pagination from '@components/common/Pagination';
import FeedList from '@components/dashboard/linkedin/feed-list/FeedList';
import CompanyFollowers from '@components/company/company-followers';
import CompanyWidget from '@components/company/company-widget';
import AboutCompany from '@components/company/about-company';
import CompanyInfo from '@components/company/company-info';

export default function LinkedInCompany() {
  const { uuid } = useParams();
  const dispatch = useDispatch();
  const { feeds, timelineUrl, currentPage, loading, pages } = useSelector(({ feed }) => feed);

  const { data, isLoading, refetch } = useFetch(`/company/view/${uuid}`);

  const isFollower = !!data.link_unfollow;
  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(data.link_timeline));
  }, [data]);

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

  return (
    <AppGrid
      renderSidebar={() => <CompanyInfo company={data} />}
      renderMain={() => (
        <>
          <CompanyWidget company={data} refetch={refetch} />
          {loading && <Spinner />}
          {!isFollower && <AboutCompany company={data} />}
          {isFollower && !loading && (
            <>
              <FeedList feeds={allFeeds} />
              <Pagination pages={pages} page={currentPage} onChange={onChangePageHandler} />
            </>
          )}
        </>
      )}
      renderAside={() => (
        <>
          <CompanyFollowers companyId={uuid} />
          <AboutCompany company={data} />
        </>
      )}
    />
  );
}