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 { Container, Grid } from '@mui/material'

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 TagsList from '../../components/UI/TagsList'

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'

import '../../styles/profile/profile.scss'

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 = {

    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}`)

      })

  }, [])

  return (

    <>

      <Container as='main' sx={{ p: 0 }}>

        <Grid container spacing={2}>

          <Grid item xs={12} display='flex' direction='column' gap={2}>

            <ProfileCard

              {...profile}

              sizes={{

                image: profile.image_size_profile,

                cover: profile.image_size_cover

              }}

              uuid={profile.user_uuid}

              image={profile.image}

              cover={profile.cover}

            />

            <ExperienceCard experiences={experiences} uuid={uuid} />

            <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}

                    isEdit={isEdit}

                    onEdit={handleEdit}

                    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

            >

              <TagsList tags={languages} />

            </ProfileWidget>

            <ProfileWidget

              title={labels.skills}

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

              justEdit

            >

              <TagsList tags={skills} />

            </ProfileWidget>

            <ProfileWidget

              title={labels.aptitudes}

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

              justEdit

            >

              <TagsList tags={aptitudes} />

            </ProfileWidget>

            <ProfileWidget

              title={labels.hobbies_and_interests}

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

              justEdit

            >

              <TagsList tags={hobbiesAndInterests} />

            </ProfileWidget>

          </Grid>

        </Grid>

      </Container>

      {renderModal[modalShow]}

    </>

  )

}

export default View