Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import { Container } from '@mui/material'

import {
  fetchFeeds,
  setCurrentPage,
  setTimelineUrl
} from '../../redux/feed/feed.actions'
import { getBackendVars } from '../../services/backendVars'

import PaginationComponent from '@app/components/UI/PaginationComponent'
import AppGrid from '@app/components/UI/layout/AppGrid'
import AboutCompany from '@app/components/company/AboutCompany'
import CompanyActions from '@app/components/company/CompanyActions'
import CompanyFollowers from '@app/components/company/CompanyFollowers'
import FeedList from '@app/components/dashboard/linkedin/feed-list/FeedList'
import GroupInfo from '@app/components/widgets/linkedin/InfoWidget'

import './styles/linkedin.scss'

const LinkedInCompany = () => {
  const [backendVars, setBackendVars] = useState(null)
  const [actionsUrls, setActionsUrls] = useState({})
  const [isFollower, setIsFollower] = useState(false)
  const { feeds, timelineUrl, currentPage, loading, pages } = useSelector(
    ({ feed }) => feed
  )
  const allFeeds = feeds.allIds.map((id) => feeds.byId[id])
  const { uuid } = useParams()
  const dispatch = useDispatch()

  const getCompanyVars = () => {
    getBackendVars(`/company/view/${uuid}`).then((vars) => {
      const actions = {}

      Object.entries(vars).forEach(([key, value]) => {
        if (!key.includes('link')) return
        actions[key] = value
      })

      setActionsUrls(actions)
      dispatch(setTimelineUrl(vars.link_timeline))
      setIsFollower(!!vars.link_unfollow)
      setBackendVars(vars)
    })
  }

  const onChangePageHandler = (currentPage) => {
    dispatch(setCurrentPage(currentPage))
    window.scrollTo(0, 0)
  }

  useEffect(() => {
    dispatch(fetchFeeds(timelineUrl, currentPage))
  }, [timelineUrl, currentPage])

  useEffect(() => {
    getCompanyVars()
  }, [uuid])

  return (
    <Container>
      <AppGrid
        renderSidebar={() => (
          <GroupInfo
            cover={backendVars?.cover}
            image={backendVars?.image}
            name={backendVars?.company_name}
            overview={backendVars?.overview}
            id={backendVars?.company_uuid}
            totalMembers={backendVars?.total_followers}
            groupType={backendVars?.company_size}
            accessibility={backendVars?.industry}
          />
        )}
        renderMain={() => (
          <>
            <CompanyActions
              name={backendVars?.company_name}
              image={backendVars?.image}
              companyId={backendVars?.company_uuid}
              cover={backendVars?.cover}
              overview={backendVars?.overview}
              refetch={getCompanyVars}
              actionLinks={actionsUrls}
            />
            {!isFollower ? <AboutCompany {...backendVars} /> : null}
            {isFollower && !loading ? <FeedList feeds={allFeeds} /> : null}
            <PaginationComponent
              pages={pages}
              currentActivePage={currentPage}
              onChangePage={onChangePageHandler}
            />
          </>
        )}
        renderAside={() => (
          <>
            <CompanyFollowers companyId={uuid} />
            <AboutCompany {...backendVars} />
          </>
        )}
      />
    </Container>
  )
}

export default LinkedInCompany