Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'

import EmptySection from '../../../../../../shared/empty-section/EmptySection'

import EducationCard from '../../../../../view/templates/linkedin/components/cards/EducationCard'

import ExperienceCard from '../../../../../view/templates/linkedin/components/cards/ExperienceCard'

import ItemsList from '../../../../../view/templates/linkedin/components/cards/ItemsList'

import ProfileCard from '../../../../../view/templates/linkedin/components/ProfileCard'

import ProfileWidget from '../../../../../view/templates/linkedin/components/ProfileWidget'

import AptitudesModal from '../../../aptitudes/AptitudesModal'

import EducationModal from '../../../educations/education/EducationModal'

import ExperienceModal from '../../../experiences/experience/ExperienceModal'

import HobbiesModal from '../../../hobbies-and-interests/HobbiesModal'

import LanguagesModal from '../../../languages/LanguagesModal'

import LocationModal from '../../../location/LocationModal'

import SkillsModal from '../../../skills/SkillsModal'

const EditView = (userInfo) => {

  const {

    userExperiences,

    userEducations,

    userLanguages,

    userSkills,

    userAptitudes,

    userHobbiesAndInterests,

    companySizesOptions,

    industriesOptions,

    months,

    degreesOptions,

    skillsOptions,

    languagesOptions,

    aptitudesOptions,

    hobbiesAndInterestsOptions,

    formatted_address

  } = userInfo

  const [experiences, setExperiences] = useState(userExperiences)

  const [educations, setEducations] = useState(userEducations)

  const [languages, setLanguages] = useState(userLanguages)

  const [skills, setSkills] = useState(userSkills)

  const [aptitudes, setAptitudes] = useState(userAptitudes)

  const [hobbiesAndInterests, setHobbiesAndInterests] = useState(userHobbiesAndInterests)

  const [address, setAddress] = useState(formatted_address)

  const [modalShow, setModalShow] = useState(null)

  const [settedDescription, setSettedDescription] = useState('')

  const [postUrl, setPostUrl] = useState('')

  const [isEdit, setIsEdit] = useState(false)

  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

            companySizesOptions={companySizesOptions}

            industriesOptions={industriesOptions}

            months={months}

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

            show={modalShow === 'Experiencia'}

            postUrl={postUrl}

            closeModal={closeModal}

            settedDescription={settedDescription}

        />,

    Educación: <EducationModal

            closeModal={closeModal}

            postUrl={postUrl}

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

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

            settedDescription={settedDescription}

            degreesOptions={degreesOptions}

        />,

    Habilidades: <SkillsModal

            closeModal={closeModal}

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

            show={modalShow === 'Habilidades'}

            skillsOptions={skillsOptions}

            userIdEncrypted={userInfo.userProfileIdEncrypted}

            userSkillsArray={skills}

        />,

    Idiomas: <LanguagesModal

            show={modalShow === 'Idiomas'}

            closeModal={closeModal}

            userIdEncrypted={userInfo.userProfileIdEncrypted}

            languagesOptions={languagesOptions}

            userLanguages={languages}

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

        />,

    Aptitudes: <AptitudesModal

            show={modalShow === 'Aptitudes'}

            closeModal={closeModal}

            userIdEncrypted={userInfo.userProfileIdEncrypted}

            aptitudesOptions={aptitudesOptions}

            userAptitudes={aptitudes}

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

        />,

    'Hobbies e Intereses': <HobbiesModal

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

            closeModal={closeModal}

            userIdEncrypted={userInfo.userProfileIdEncrypted}

            hobbiesAndInterestsOptions={hobbiesAndInterestsOptions}

            userHobbiesAndInterests={hobbiesAndInterests}

            setUserHobbiesAndInterests={(newHobbiesAndInterests) => setHobbiesAndInterests(newHobbiesAndInterests)}

        />,

    Ubicación: <LocationModal

            isModalOpen={modalShow === 'Ubicación'}

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

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

            userIdEncrypted={userInfo.userProfileIdEncrypted}

        />

  }

  return (

        <main className='w-100'>

            <div className='container'>

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

                    <ProfileCard {...{ ...userInfo, formatted_address: address }} />

                    <ProfileWidget

                        title='Experiencia'

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

                        onAdd={handleAdd}

                        addUrl={`/profile/my-profiles/experience/${userInfo.userProfileIdEncrypted}/operation/add`}

                    >

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

                          return <ExperienceCard

                                key={index}

                                experience={experience}

                                months={userInfo.months}

                                isEdit={isEdit}

                                onEdit={handleEdit}

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

                            />

                        })}

                    </ProfileWidget>

                    <ProfileWidget

                        title='Educación'

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

                        onAdd={handleAdd}

                        addUrl={`/profile/my-profiles/education/${userInfo.userProfileIdEncrypted}/operation/add`}

                    >

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

                          return <EducationCard

                                key={index}

                                education={education}

                                isEdit={isEdit}

                                onEdit={handleEdit}

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

                            />

                        })}

                    </ProfileWidget>

                    <ProfileWidget title='Ubicación' onEdit={() => setModalShow('Ubicación')} justEdit>

                        <div className='card__items'>

                            <p>{address}</p>

                        </div>

                    </ProfileWidget>

                    <ProfileWidget title='Idiomas' onEdit={() => setModalShow('Idiomas')} justEdit>

                        {!languages.length

                          ? <EmptySection align='left' message="Sin información" />

                          : <ItemsList value={languages} />

                        }

                    </ProfileWidget>

                    <ProfileWidget title='Habilidades' onEdit={() => setModalShow('Habilidades')} justEdit>

                        {!skills.length

                          ? <EmptySection align='left' message="Sin información" />

                          : <ItemsList value={skills} />

                        }

                    </ProfileWidget>

                    <ProfileWidget title='Aptitudes' onEdit={() => setModalShow('Aptitudes')} justEdit>

                        {!aptitudes.length

                          ? <EmptySection align='left' message="Sin información" />

                          : <ItemsList value={aptitudes} />

                        }

                    </ProfileWidget>

                    <ProfileWidget title='Pasatiempos e intereses' onEdit={() => setModalShow('Hobbies e Intereses')} justEdit>

                        {!hobbiesAndInterests.length

                          ? <EmptySection align='left' message="Sin información" />

                          : <ItemsList value={hobbiesAndInterests} />

                        }

                    </ProfileWidget>

                    {renderModal[modalShow]}

                </div>

            </div>

        </main >

  )

}

export default EditView