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