Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5473 | Rev 5481 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5473 Rev 5475
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from 'react'
 2 
import React, { useState, useRef } from 'react'
- 
 
 3 
import { axios } from '../../../utils'
3 
import { useState, useRef } from 'react'
 4 
import { useDispatch, useSelector } from 'react-redux'
- 
 
 5 
import { addNotification } from '../../../redux/notification/notification.actions'
- 
 
 6 
 
4 
import Experience from './experience/Experience'
 7 
import ExperienceItem from './ExperienceItem'
- 
 
 8 
import ExperienceModal from './ExperienceModal'
5 
import Spinner from '../../../../shared/loading-spinner/Spinner'
 9 
import EmptySection from '../../../shared/empty-section/EmptySection'
- 
 
 10 
import IconButton from '@mui/material/IconButton'
6 
import ExperienceModal from './experience/ExperienceModal'
 11 
import AddIcon from '@mui/icons-material/Add'
7 
 
 12 
 
8 
const Experiences = (props) => {
 13 
const Experiences = ({
9 
  // props destructuring
 - 
 
10 
  const {
 - 
 
11 
    userExperiences,
 14 
  experiences,
12 
    months,
 15 
  months,
13 
    companySizesOptions,
 16 
  companySizesOptions,
14 
    industriesOptions,
 17 
  industriesOptions,
15 
    userIdEncrypted
 18 
  userId,
16 
  } = props
 19 
  isEdit,
17 
 
 - 
 
18 
  // states
 20 
}) => {
19 
  const [isModalOpen, setIsModalOpen] = useState(false)
 21 
  const [isModalOpen, setIsModalOpen] = useState(false)
20 
  const [loading, setLoading] = useState(false)
 - 
 
21 
  const [settedUserExperiences, setSettedUserExperiences] = useState(userExperiences)
 - 
 
22 
  const [settedDescription, setSettedDescription] = useState('')
 22 
  const [settedDescription, setSettedDescription] = useState('')
- 
 
 23 
  const [settedExperiences, setSettedExperiences] = useState(experiences)
- 
 
 24 
 
- 
 
 25 
  const labels = useSelector((state) => state.labels)
- 
 
 26 
  const dispatch = useDispatch()
Línea 23... Línea -...
23 
 
 - 
 
24 
  // refs
 27 
 
Línea -... Línea 28...
- 
 
 28 
  const postUrl = useRef('')
- 
 
 29 
 
- 
 
 30 
  const handleDelete = (deleteUrl) => {
25 
  const postUrl = useRef('')
 31 
    axios.post(deleteUrl).then(({ data: response }) => {
- 
 
 32 
      if (!response.success) {
- 
 
 33 
        dispatch(addNotification({ style: 'danger', msg: response.data }))
- 
 
 34 
      }
- 
 
 35 
      setSettedExperiences(response.data)
Línea 26... Línea 36...
26 
 
 36 
    })
27 
  const handleDelete = async (newUserExperiences) => setSettedUserExperiences(newUserExperiences)
 - 
 
28 
 
 37 
  }
29 
  const addExperience = (event) => {
 38 
 
30 
    event.preventDefault()
 39 
  const addExperience = () => {
31 
    postUrl.current = `/profile/my-profiles/experience/${userIdEncrypted}/operation/add`
 40 
    postUrl.current = `/profile/my-profiles/experience/${userId}/operation/add`
Línea 32... Línea 41...
32 
    setSettedDescription('')
 41 
    setSettedDescription('')
33 
    setIsModalOpen(true)
 42 
    setIsModalOpen(true)
34 
  }
 43 
  }
- 
 
 44 
 
- 
 
 45 
  const handleEdit = async (linkEdit) => {
35 
 
 46 
    postUrl.current = linkEdit
36 
  const handleEdit = async (linkEdit) => {
 47 
    const currentDescription = settedExperiences.find(
37 
    postUrl.current = linkEdit
 48 
      (experience) => experience.link_edit === linkEdit
Línea 38... Línea 49...
38 
    const currentDescription = settedUserExperiences.find(experience => experience.link_edit === linkEdit)
 49 
    )
39 
    setSettedDescription(currentDescription.description)
 50 
    setSettedDescription(currentDescription.description)
40 
    setIsModalOpen(true)
 51 
    setIsModalOpen(true)
41 
  }
 52 
  }
42 
 
 53 
 
43 
  return (
 - 
 
44 
    <>
 - 
 
45 
      <div className="user-profile-extended-ov st2 position-relative">
 54 
  return (
46 
        <h3 style={{ display: 'flex' }}>
 - 
 
47 
          Experiencia
 55 
    <>
48 
          <div style={{ marginLeft: '5px' }}>
 56 
      <div className="profile-attr">
49 
            <a
 - 
 
50 
              href="#"
 57 
        <div className="profile-attr-header">
51 
              className="btn-experience-add"
 58 
          <h3>Experiencia</h3>
52 
              onClick={addExperience}
 59 
          {isEdit && (
53 
            >
 - 
 
54 
              <i className="fa fa-plus-square" />
 60 
            <IconButton onClick={addExperience}>
55 
            </a>
 61 
              <AddIcon />
56 
          </div>
 62 
            </IconButton>
57 
        </h3>
 63 
          )}
58 
        <span>
 64 
        </div>
59 
          {settedUserExperiences.length
 65 
        {settedExperiences.length ? (
60 
            ? settedUserExperiences.map((userExperience, id) =>
 - 
 
61 
              <Experience
 66 
          settedExperiences.map((experience) => (
62 
                key={id}
 - 
 
63 
                userExperience={userExperience}
 67 
            <ExperienceItem
64 
                months={months}
 68 
              key={`${experience.company} - ${experience.title}`}
65 
                id={id}
 69 
              experience={experience}
66 
                onDelete={handleDelete}
 - 
 
67 
                setLoading={setLoading}
 70 
              months={months}
- 
 
 71 
              onDelete={handleDelete}
68 
                handleEdit={handleEdit}
 72 
              onEdit={handleEdit}
69 
              />
 - 
 
70 
            )
 73 
            />
71 
            : 'Sin información'
 74 
          ))
72 
          }
 75 
        ) : (
73 
        </span>
 76 
          <EmptySection align="left" message={labels.EMPTY} />
74 
        {loading && <Spinner />}
 77 
        )}
75 
      </div>
 78 
      </div>
76 
      <ExperienceModal
 79 
      <ExperienceModal
77 
        closeModal={() => setIsModalOpen(false)}
 80 
        closeModal={() => setIsModalOpen(false)}
78 
        companySizesOptions={companySizesOptions}
 81 
        companySizesOptions={companySizesOptions}
79 
        industriesOptions={industriesOptions}
 82 
        industriesOptions={industriesOptions}
80 
        months={months}
 83 
        months={months}
81 
        postUrl={postUrl.current}
 84 
        postUrl={postUrl.current}
82 
        setUserExperiences={(value) => setSettedUserExperiences(value)}
 85 
        setUserExperiences={(value) => setSettedExperiences(value)}