Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { setTimelineUrl } from "../../redux/feed/feed.actions";
import { getBackendVars } from "../../services/backendVars";
import { useParams } from "react-router-dom";

import FeedList from "../../components/dashboard/linkedin/feed-list/FeedList";
import GroupInfo from "../../components/widgets/linkedin/InfoWidget";
import AboutCompany from "../../components/company/AboutCompany";
import CompanyFollowers from "../../components/company/CompanyFollowers";
import CompanyActions from "../../components/company/CompanyActions";

import "./styles/linkedin.scss";

const LinkedInCompany = () => {
  const [backendVars, setBackendVars] = useState(null);
  const [actionsUrls, setActionsUrls] = useState(null);
  const [isFollower, setIsFollower] = useState(false);
  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);
      })
      .catch((err) => {
        console.log(`Error: ${err}`);
        throw new Error(err);
      });
  };

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

  return (
    <main className="w-100">
      <div className="container p-0 app__body layout__content">
        <div className="d-flex flex-column">
          <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}
          />
        </div>
        <div className="d-flex flex-column" style={{ gap: ".5rem" }}>
          <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} />
          ) : (
            <FeedList
              image={`/storage/type/company/code/${backendVars?.companyId}/${
                backendVars?.image ? `filename/${backendVars?.image}` : ""
              }`}
            />
          )}
        </div>
        <div className="d-flex flex-column" style={{ gap: ".5rem" }}>
          <CompanyFollowers companyId={uuid} />
          <AboutCompany {...backendVars} />
        </div>
      </div>
    </main>
  );
};

export default LinkedInCompany;