Proyectos de Subversion LeadersLinked - Antes de 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,
              }}
              image={`/storage/type/user-profile/code/${profile.user_uuid}/filename/${profile.image}`}
              cover={`/storage/type/user-profile/code/${profile.user_uuid}/filename/${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