Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'

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

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

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

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

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

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

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

import EducationModal from '../../../../components/educations/EducationModal'

import ExperienceModal from '../../../../components/experiences/ExperienceModal'

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

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

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

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

const EditView = (userInfo) => {

  const {

    experiences: userExperiences,

    educations: userEducations,

    languages: userLanguages,

    skills: userSkills,

    aptitudes: userAptitudes,

    hobbiesAndInterests: userHobbiesAndInterests,

    months,

    options,

    formatted_address,

  } = userInfo

  const [experiences, setExperiences] = useState(userExperiences)

  const [educations, setEducations] = useState(userEducations)

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

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

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

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

  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={options.companySizes}

        industriesOptions={options.industries}

        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={options.degrees}

      />

    ),

    Habilidades: (

      <SkillsModal

        closeModal={closeModal}

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

        show={modalShow === 'Habilidades'}

        skillsOptions={Object.entries(options.skills).map(([key, value]) => ({

          value: key,

          name: value,

        }))}

        userIdEncrypted={userInfo.userProfileIdEncrypted}

        userSkillsArray={skills}

      />

    ),

    Idiomas: (

      <LanguagesModal

        show={modalShow === 'Idiomas'}

        closeModal={closeModal}

        userIdEncrypted={userInfo.userProfileIdEncrypted}

        languagesOptions={Object.entries(options.languages).map(

          ([key, value]) => ({ value: key, name: value })

        )}

        userLanguages={languages}

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

      />

    ),

    Aptitudes: (

      <AptitudesModal

        show={modalShow === 'Aptitudes'}

        closeModal={closeModal}

        userIdEncrypted={userInfo.userProfileIdEncrypted}

        aptitudesOptions={Object.entries(options.aptitudes).map(

          ([key, value]) => ({ value: key, name: value })

        )}

        userAptitudes={aptitudes}

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

      />

    ),

    'Hobbies e Intereses': (

      <HobbiesModal

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

        closeModal={closeModal}

        userIdEncrypted={userInfo.userProfileIdEncrypted}

        hobbiesAndInterestsOptions={Object.entries(

          options.hobbiesAndInterests

        ).map(([key, value]) => ({ value: key, name: value }))}

        userHobbiesAndInterests={hobbiesAndInterests}

        setUserHobbiesAndInterests={(newHobbiesAndInterests) =>

          setHobbiesAndInterests(newHobbiesAndInterests)

        }

      />

    ),

    Ubicación: (

      <LocationModal

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

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

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

        userIdEncrypted={userInfo.userProfileIdEncrypted}

      />

    ),

  }

  useEffect(() => {

    const adapters = [

      {

        value: userSkills,

        setter: setSkills,

      },

      {

        value: userLanguages,

        setter: setLanguages,

      },

      {

        value: userAptitudes,

        setter: setAptitudes,

      },

      {

        value: userHobbiesAndInterests,

        setter: setHobbiesAndInterests,

      },

    ]

    adapters.map((adapter) => {

      const value = Object.entries(adapter.value).map(([key, value]) => ({

        value: key,

        name: value,

      }))

      adapter.setter(value)

    })

  }, [])

  return (

    <main className="w-100">

      <div className="container">

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

          <ProfileCard

            {...{

              ...userInfo,

              formatted_address: address,

              userIdEncrypted: userInfo.profileId,

            }}

          />

          <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