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;