Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';

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

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/group-widget';
import Pagination from '@components/common/Pagination';

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 (
    <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}
          <Pagination pages={pages} page={currentPage} onChange={onChangePageHandler} />
        </>
      )}
      renderAside={() => (
        <>
          <CompanyFollowers companyId={uuid} />
          <AboutCompany {...backendVars} />
        </>
      )}
    />
  );
};

export default LinkedInCompany;