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;