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 Spinner from '@components/UI/Spinner'
import AppGrid from '@components/UI/layout/AppGrid'
import GroupWidget from '@components/widgets/linkedin/group-widget'
import GroupActions from '@components/group/group-actions/GroupActions'
import AboutGroup from '@components/group/AboutGroup'
import ShareComponent from '@components/dashboard/linkedin/share/ShareComponent'
import FeedList from '@components/dashboard/linkedin/feed-list/FeedList'
import Pagination from '@components/common/Pagination'
import Members from '@components/group/members/Members'
import ShareModal from '@components/modals/ShareModal'

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} />}
          </>
        )}
      />
      <ShareModal timelineUrl={timelineUrl} currentPage={currentPage} />
    </>
  )
}

export default GroupPage