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;