Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import parse from 'html-react-parser'
import { useDispatch } from 'react-redux'
import { setIntlLabels } from '../../../../redux/intl/intl.action'
import EmptySection from '../../../../shared/empty-section/EmptySection'
import SuggestWidget from '../../../../shared/helpers/my-groups-helper/SuggestWidget'
import ProfileInfo from '../../../components/ProfileInfo'
import Overview from '../../../components/overview/Overview'

const View = ({
  userIdEncrypted,
  cover,
  overview,
  userExperiences,
  userEducations,
  formatted_address,
  months,
  userLanguages,
  userSkills,
  userAptitudes,
  userHobbiesAndInterests,
  CancelConnectionUrl,
  RequestConnectionUrl,
  profileId,
  labels,
  ...profileProps
}) => {
  const [monthOptions, setMonthOptions] = useState({})
  const dispatch = useDispatch()

  useEffect(() => {
    setMonthOptions(
      months.reduce((obj, item, i) => ({ ...obj, [i + 1]: item }), {})
    )
  }, [months])

  useEffect(() => {
    dispatch(setIntlLabels(labels))
  }, [])

  return (
    <>
      <section className="cover-sec">
        <img
          id="user-cover-img"
          src={`/storage/type/user-cover/code/${userIdEncrypted}/${
            cover ? `filename/${cover}` : ''
          }`}
          alt=""
        />
      </section>
      <main className="main-section-data container px-0">
        <ProfileInfo
          {...profileProps}
          id={userIdEncrypted}
          cancelUrl={CancelConnectionUrl}
          connectUrl={RequestConnectionUrl}
        />
        <section className="feed-section">
          <Overview overview={overview} userId={userIdEncrypted} />
          <div className="user-profile-extended-ov st2">
            <h3>Experiencia</h3>
            {!userExperiences.length ? (
              <EmptySection align="left" message={labels.EMPTY} />
            ) : (
              <span id="experience-records">
                {userExperiences.map(
                  (
                    {
                      company,
                      title,
                      from_month,
                      from_year,
                      to_month,
                      to_year,
                      industry,
                      size,
                      formatted_adress,
                      description,
                    },
                    id
                  ) => (
                    <div key={id}>
                      {id >= 1 ? <hr /> : ''}
                      <p>{company}</p>
                      <p>{title}</p>
                      <p>
                        {`${monthOptions[from_month]} ${from_year}`} -{' '}
                        {to_year
                          ? `${monthOptions[to_month]} ${to_year}`
                          : 'Actual'}
                      </p>
                      <p>{`${industry} / ${size}`}</p>
                      <p>{formatted_adress}</p>
                      {description && parse(description)}
                    </div>
                  )
                )}
              </span>
            )}
          </div>
          <div className="user-profile-extended-ov">
            <h3>{labels.EDUCATION}</h3>
            {!userEducations.length ? (
              <EmptySection align="left" message={labels.EMPTY} />
            ) : (
              <span id="education-records">
                {userEducations.map(
                  (
                    {
                      degree,
                      university,
                      from_year,
                      to_year,
                      field_of_study,
                      formatted_address,
                      description,
                    },
                    id
                  ) => (
                    <div key={id}>
                      {id >= 1 && <hr />}
                      <p>{degree}</p>
                      <p>{university}</p>
                      <p>{`${from_year} - ${to_year || 'Actual'}`}</p>
                      {field_of_study && <p>{field_of_study}</p>}
                      <p>{formatted_address}</p>
                      {description && <p>{parse(description)}</p>}
                    </div>
                  )
                )}
              </span>
            )}
          </div>
          <div className="user-profile-extended-ov">
            <h3>{labels.LOCATION}</h3>
            {!formatted_address ? (
              <EmptySection align="left" message={labels.EMPTY} />
            ) : (
              <p id="location-formatted_address">{formatted_address}</p>
            )}
          </div>
          <div className="user-profile-extended-ov">
            <h3>{labels.LANGUAGES}</h3>
            {!userLanguages.length ? (
              <EmptySection align="left" message={labels.EMPTY} />
            ) : (
              <ul id="list-languages">
                {userLanguages.map(({ name, value }) => (
                  <li key={value}>
                    <a href="#" title="">
                      {name}
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>
          <div className="user-profile-extended-ov">
            <h3>{labels.SKILLS}</h3>
            {!userSkills.length ? (
              <EmptySection align="left" message={labels.EMPTY} />
            ) : (
              <ul id="list-skills">
                {userSkills.map(({ name, value }) => (
                  <li key={value}>
                    <a href="#" title="">
                      {name}
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>
          <div className="user-profile-extended-ov">
            <h3>{labels.APTITUDES}</h3>
            {!userAptitudes.length ? (
              <EmptySection align="left" message={labels.EMPTY} />
            ) : (
              <ul id="list-skills">
                {userAptitudes.map(({ name, value }) => (
                  <li key={value}>
                    <a href="#" title="">
                      {name}
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>
          <div className="user-profile-extended-ov">
            <h3>{labels.HOBBIES_AND_INTERESTS}</h3>
            {!userHobbiesAndInterests.length ? (
              <EmptySection align="left" message={labels.EMPTY} />
            ) : (
              <ul id="list-skills">
                {userHobbiesAndInterests.map(({ name, value }) => (
                  <li key={value}>
                    <a href="#" title="">
                      {name}
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </section>
        <SuggestWidget
          url={`/helpers/people-viewed-profile/${profileId}`}
          btnLabelAccept="Ver perfil"
          title="Quien ha visitado esta perfil"
        />
      </main>
    </>
  )
}

export default View