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} />
        </>
      )}
    />
  )
}