Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5473 Rev 5488
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, useEffect } from 'react'
3
import { useState } from "react";
3
import { useSelector } from 'react-redux'
-
 
4
 
-
 
5
import IconButton from '@mui/material/IconButton'
-
 
6
import EditIcon from '@mui/icons-material/Edit'
4
import SkillsModal from "./SkillsModal";
7
import SkillsModal from './SkillsModal'
-
 
8
import EmptySection from '../../../shared/empty-section/EmptySection'
5
 
9
 
6
const Skills = ({ userSkills, skillsOptions, userIdEncrypted }) => {
10
const Skills = ({ skills, skillsOptions, userId, isEdit }) => {
7
  const [isModalOpen, setIsModalOpen] = useState(false);
11
  const [isModalOpen, setIsModalOpen] = useState(false)
8
  const [userSkillsArray, setUserSkillsArray] = useState(userSkills);
12
  const [settedSkills, setSettedSkills] = useState(skills)
-
 
13
 
-
 
14
  const labels = useSelector((state) => state.labels)
-
 
15
 
-
 
16
  const handleEdit = () => {
-
 
17
    setIsModalOpen(true)
-
 
18
  }
-
 
19
 
-
 
20
  useEffect(() => {
-
 
21
    setSettedSkills(skills)
-
 
22
  }, [skills])
Línea 9... Línea 23...
9
 
23
 
10
  return (
24
  return (
11
    <>
25
    <>
-
 
26
      <div className="profile-attr">
12
      <div className="user-profile-ov">
27
        <div className="profile-attr-header">
13
        <h3>
28
          <h3>{labels.SKILLS}</h3>
14
          Habilidades
29
          {isEdit && (
15
          <a href="#" title="" className="btn-skills-edit" onClick={() => setIsModalOpen(true)}>
30
            <IconButton onClick={handleEdit}>
-
 
31
              <EditIcon />
16
            <i className="fa fa-pencil"></i>
32
            </IconButton>
17
          </a>
33
          )}
18
        </h3>
34
        </div>
19
        <ul>
35
        <ul>
20
          {userSkillsArray.length
36
          {settedSkills.length ? (
21
            ? userSkillsArray.map(({ name }) =>
37
            settedSkills.map(({ name }) => (
22
              <li key={name}>
38
              <li key={name}>
23
                <a href="#" title="">
39
                <a href="#" title="">
24
                  {name}
40
                  {name}
25
                </a>
41
                </a>
26
              </li>
42
              </li>
-
 
43
            ))
27
            )
44
          ) : (
28
            : <li>Sin información</li>
45
            <EmptySection align="left" message={labels.EMPTY} />
29
          }
46
          )}
30
        </ul>
47
        </ul>
31
      </div>
48
      </div>
32
      <SkillsModal
49
      <SkillsModal
33
        show={isModalOpen}
50
        show={isModalOpen}
34
        closeModal={() => setIsModalOpen(false)}
51
        closeModal={() => setIsModalOpen(false)}
35
        userIdEncrypted={userIdEncrypted}
52
        userIdEncrypted={userId}
36
        skillsOptions={skillsOptions}
53
        skillsOptions={skillsOptions}
37
        userSkillsArray={userSkillsArray}
54
        userSkillsArray={settedSkills}
38
        setSkills={(newSkills) => setUserSkillsArray(newSkills)}
55
        setSkills={(newSkills) => setSettedSkills(newSkills)}
39
      />
56
      />
40
    </>
57
    </>
41
  );
58
  )
Línea 42... Línea 59...
42
};
59
}