Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect } from "react";

import { useParams } from "react-router-dom";

import { useSelector } from "react-redux";

import { getBackendVars } from "../../services/backendVars";

import ProfileCard from "../../components/linkedin/profile/ProfileCard";

import ProfileWidget from "../../components/linkedin/profile/ProfileWidget";

import ExperienceCard from "../../components/linkedin/profile/cards/ExperienceCard";

import EducationCard from "../../components/linkedin/profile/cards/EducationCard";

import EmptySection from "../../components/UI/EmptySection";

import ItemsList from "../../components/linkedin/profile/cards/ItemsList";

import "../../styles/profile/profile.scss";

import ExperienceModal from "../../components/experiences/ExperienceModal";

import EducationModal from "../../components/educations/EducationModal";

import SkillsModal from "../../components/skills/SkillsModal";

import LanguagesModal from "../../components/languages/LanguagesModal";

import AptitudesModal from "../../components/aptitudes/AptitudesModal";

import HobbiesModal from "../../components/hobbies-and-interests/HobbiesModal";

import LocationModal from "../../components/location/LocationModal";

const View = () => {

  const [profile, setProfile] = useState({});

  const [experiences, setExperiences] = useState([]);

  const [educations, setEducations] = useState([]);

  const [languages, setLanguages] = useState([]);

  const [skills, setSkills] = useState([]);

  const [aptitudes, setAptitudes] = useState([]);

  const [hobbiesAndInterests, setHobbiesAndInterests] = useState([]);

  const [address, setAddress] = useState("");

  const [modalShow, setModalShow] = useState(null);

  const [settedDescription, setSettedDescription] = useState("");

  const [postUrl, setPostUrl] = useState("");

  const [isEdit, setIsEdit] = useState(false);

  const labels = useSelector(({ intl }) => intl.labels);

  const { uuid } = useParams();

  const handleEdit = (modalName, url, description) => {

    setModalShow(modalName);

    setPostUrl(url);

    setSettedDescription(description);

  };

  const handleAdd = (modalName, url) => {

    setModalShow(modalName);

    setPostUrl(url);

  };

  const closeModal = () => {

    setSettedDescription("");

    setPostUrl("");

    setIsEdit(false);

    setModalShow(null);

  };

  const renderModal = {

    Experiencia: (

      <ExperienceModal

        show={modalShow === "Experiencia"}

        url={postUrl}

        isEdit={isEdit}

        onClose={closeModal}

        onComplete={(newExperiences) => setExperiences(newExperiences)}

      />

    ),

    Educación: (

      <EducationModal

        show={modalShow === "Educación"}

        postUrl={postUrl}

        closeModal={closeModal}

        setEducations={(newEducations) => setEducations(newEducations)}

        settedDescription={settedDescription}

      />

    ),

    Habilidades: (

      <SkillsModal

        show={modalShow === "Habilidades"}

        userSkills={skills}

        userId={profile?.user_profile_uuid}

        onClose={closeModal}

        onComplete={(newSkills) => setSkills(newSkills)}

      />

    ),

    Idiomas: (

      <LanguagesModal

        show={modalShow === "Idiomas"}

        userId={profile?.user_profile_uuid}

        userLanguages={languages}

        onClose={closeModal}

        onComplete={(newLanguages) => setLanguages(newLanguages)}

      />

    ),

    Aptitudes: (

      <AptitudesModal

        show={modalShow === "Aptitudes"}

        userId={profile?.user_profile_uuid}

        userAptitudes={aptitudes}

        onClose={closeModal}

        onComplete={(newAptitudes) => setAptitudes(newAptitudes)}

      />

    ),

    "Hobbies e Intereses": (

      <HobbiesModal

        onClose={closeModal}

        show={modalShow === "Hobbies e Intereses"}

        userId={profile?.user_profile_uuid}

        userHobbies={hobbiesAndInterests}

        onComplete={(newHobbiesAndInterests) =>

          setHobbiesAndInterests(newHobbiesAndInterests)

        }

      />

    ),

    Ubicación: (

      <LocationModal

        show={modalShow === "Ubicación"}

        onClose={() => setModalShow(null)}

        onComplete={(newAddress) => setAddress(newAddress)}

        id={profile?.user_profile_uuid}

      />

    ),

  };

  useEffect(() => {

    getBackendVars(`/profile/my-profiles/edit/${uuid}`)

      .then((vars) => {

        const {

          user_experiences,

          user_educations,

          user_hobbies_and_interests,

          user_skills,

          user_aptitudes,

          user_languages,

          formatted_address,

          ...profileInfo

        } = vars;

        const attrAdapter = (attr) => {

          return Object.entries(attr).map(([key, value]) => {

            return { name: value, value: key };

          });

        };

        setExperiences(user_experiences);

        setEducations(user_educations);

        setAddress(formatted_address);

        setProfile(profileInfo);

        setHobbiesAndInterests(attrAdapter(user_hobbies_and_interests));

        setSkills(attrAdapter(user_skills));

        setAptitudes(attrAdapter(user_aptitudes));

        setLanguages(attrAdapter(user_languages));

      })

      .catch((err) => {

        console.log(`Error: ${err}`);

        throw new Error(err);

      });

  }, []);

  return (

    <>

      <main className="w-100">

        <div className="container">

          <div className="main d-flex flex-column" style={{ gap: ".5rem" }}>

            <ProfileCard

              {...profile}

              sizes={{

                image: profile.image_size_profile,

                cover: profile.image_size_cover,

              }}

              uuid={profile.user_uuid}

              image={profile.image}

              cover={profile.cover}

            />

            <ProfileWidget

              title={labels.experience}

              onEdit={() => setIsEdit(!isEdit)}

              onAdd={handleAdd}

              addUrl={`/profile/my-profiles/experience/${uuid}/operation/add`}

            >

              {experiences.length ? (

                experiences.map((experience, index) => (

                  <ExperienceCard

                    key={index}

                    isEdit={isEdit}

                    experience={experience}

                    onEdit={handleEdit}

                    onDelete={(newExperiences) =>

                      setExperiences(newExperiences)

                    }

                  />

                ))

              ) : (

                <EmptySection align="left" message={labels.empty} />

              )}

            </ProfileWidget>

            <ProfileWidget

              title={labels.education}

              onEdit={() => setIsEdit(!isEdit)}

              onAdd={handleAdd}

              addUrl={`/profile/my-profiles/education/${profile?.user_profile_uuid}/operation/add`}

            >

              {educations.length ? (

                educations.map((education, index) => (

                  <EducationCard key={index} education={education} />

                ))

              ) : (

                <EmptySection align="left" message={labels.empty} />

              )}

            </ProfileWidget>

            <ProfileWidget

              title={labels.location}

              onEdit={() => setModalShow("Ubicación")}

              justEdit

            >

              <div className="card__items">

                <p>{address}</p>

              </div>

            </ProfileWidget>

            <ProfileWidget

              title={labels.languages}

              onEdit={() => setModalShow("Idiomas")}

              justEdit

            >

              {languages.length ? (

                <ItemsList value={languages} />

              ) : (

                <EmptySection align="left" message={labels.empty} />

              )}

            </ProfileWidget>

            <ProfileWidget

              title={labels.skills}

              onEdit={() => setModalShow("Habilidades")}

              justEdit

            >

              {skills.length ? (

                <ItemsList value={skills} />

              ) : (

                <EmptySection align="left" message={labels.empty} />

              )}

            </ProfileWidget>

            <ProfileWidget

              title={labels.aptitudes}

              onEdit={() => setModalShow("Aptitudes")}

              justEdit

            >

              {aptitudes.length ? (

                <ItemsList value={aptitudes} />

              ) : (

                <EmptySection align="left" message={labels.empty} />

              )}

            </ProfileWidget>

            <ProfileWidget

              title={labels.hobbies_and_interests}

              onEdit={() => setModalShow("Hobbies e Intereses")}

              justEdit

            >

              {hobbiesAndInterests.length ? (

                <ItemsList value={hobbiesAndInterests} />

              ) : (

                <EmptySection align="left" message={labels.empty} />

              )}

            </ProfileWidget>

          </div>

        </div>

      </main>

      {renderModal[modalShow]}

    </>

  );

};

export default View;