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 SuggestionWidget from '../../components/widgets/default/SuggestWidget'
import '../../styles/profile/profile.scss'

const DEFAULT_VARS = {
  user_experiences: [],
  user_educations: [],
  user_hobbies_and_interests: [],
  user_skills: [],
  user_aptitudes: [],
  user_languages: [],
}

const View = () => {
  const [profile, setProfile] = useState(DEFAULT_VARS)
  const labels = useSelector(({ intl }) => intl.labels)
  const { uuid } = useParams()

  useEffect(() => {
    getBackendVars(`/profile/view/${uuid}`)
      .then((vars) => {
        const adapters = [
          'user_hobbies_and_interests',
          'user_skills',
          'user_aptitudes',
          'user_languages',
        ]

        adapters.forEach((adapter) => {
          vars[adapter] = Object.entries(vars[adapter]).map(([key, value]) => {
            return { name: value, value: key }
          })
        })

        setProfile(vars)
      })
      .catch((err) => {
        console.log(`Error: ${err}`)
        throw new Error(err)
      })
  }, [uuid])

  return (
    <main className="w-100">
      <div className="container profile__layout">
        <div className="main d-flex flex-column" style={{ gap: '.5rem' }}>
          <ProfileCard {...profile} />
          <ProfileWidget title={labels.experience}>
            {!profile.user_experiences.length ? (
              <EmptySection align="left" message={labels.empty} />
            ) : (
              profile.user_experiences.map((experience, index) => {
                return <ExperienceCard key={index} experience={experience} />
              })
            )}
          </ProfileWidget>
          <ProfileWidget title={labels.education}>
            {!profile.user_educations.length ? (
              <EmptySection align="left" message={labels.empty} />
            ) : (
              profile.user_educations.map((education, index) => {
                return <EducationCard key={index} education={education} />
              })
            )}
          </ProfileWidget>
          <ProfileWidget title={labels.languages}>
            {!profile.user_languages.length ? (
              <EmptySection align="left" message={labels.empty} />
            ) : (
              <ItemsList value={profile.user_languages} />
            )}
          </ProfileWidget>
          <ProfileWidget title={labels.skills}>
            {!profile.user_skills.length ? (
              <EmptySection align="left" message={labels.empty} />
            ) : (
              <ItemsList value={profile.user_skills} />
            )}
          </ProfileWidget>
          <ProfileWidget title={labels.aptitudes}>
            {!profile.user_aptitudes.length ? (
              <EmptySection align="left" message={labels.empty} />
            ) : (
              <ItemsList value={profile.user_aptitudes} />
            )}
          </ProfileWidget>
          <ProfileWidget title={labels.hobbies_and_interests}>
            {!profile.user_hobbies_and_interests.length ? (
              <EmptySection align="left" message={labels.empty} />
            ) : (
              <ItemsList value={profile.user_hobbies_and_interests} />
            )}
          </ProfileWidget>
        </div>
        <div className="aside">
          <SuggestionWidget
            url={`/helpers/people-viewed-profile/${profile.user_profile_id}`}
            title={labels.who_has_seen_this_profile}
          />
        </div>
      </div>
    </main>
  )
}

export default View