Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 224 Rev 743
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from "react";
 1 
import React, { useState, useEffect } from 'react'
2 
import { useParams } from "react-router-dom";
 2 
import { useParams } from 'react-router-dom'
3 
import { useSelector } from "react-redux";
 3 
import { useSelector } from 'react-redux'
4 
import { getBackendVars } from "../../services/backendVars";
 4 
import { getBackendVars } from '../../services/backendVars'
5 
import ProfileCard from "../../components/linkedin/profile/ProfileCard";
 5 
import ProfileCard from '../../components/linkedin/profile/ProfileCard'
6 
import ProfileWidget from "../../components/linkedin/profile/ProfileWidget";
 6 
import ProfileWidget from '../../components/linkedin/profile/ProfileWidget'
7 
import ExperienceCard from "../../components/linkedin/profile/cards/ExperienceCard";
 7 
import ExperienceCard from '../../components/linkedin/profile/cards/ExperienceCard'
8 
import EducationCard from "../../components/linkedin/profile/cards/EducationCard";
 8 
import EducationCard from '../../components/linkedin/profile/cards/EducationCard'
9 
import EmptySection from "../../components/UI/EmptySection";
 9 
import EmptySection from '../../components/UI/EmptySection'
10 
import ItemsList from "../../components/linkedin/profile/cards/ItemsList";
 10 
import ItemsList from '../../components/linkedin/profile/cards/ItemsList'
11 
import "../../styles/profile/profile.scss";
 11 
import '../../styles/profile/profile.scss'
12 
import ExperienceModal from "../../components/experiences/ExperienceModal";
 12 
import ExperienceModal from '../../components/experiences/ExperienceModal'
13 
import EducationModal from "../../components/educations/EducationModal";
 13 
import EducationModal from '../../components/educations/EducationModal'
14 
import SkillsModal from "../../components/skills/SkillsModal";
 14 
import SkillsModal from '../../components/skills/SkillsModal'
15 
import LanguagesModal from "../../components/languages/LanguagesModal";
 15 
import LanguagesModal from '../../components/languages/LanguagesModal'
16 
import AptitudesModal from "../../components/aptitudes/AptitudesModal";
 16 
import AptitudesModal from '../../components/aptitudes/AptitudesModal'
17 
import HobbiesModal from "../../components/hobbies-and-interests/HobbiesModal";
 17 
import HobbiesModal from '../../components/hobbies-and-interests/HobbiesModal'
18 
import LocationModal from "../../components/location/LocationModal";
 18 
import LocationModal from '../../components/location/LocationModal'
Línea 19... Línea 19...
19 
 
 19 
 
20 
const View = () => {
 20 
const View = () => {
21 
  const [profile, setProfile] = useState({});
 21 
  const [profile, setProfile] = useState({})
22 
  const [experiences, setExperiences] = useState([]);
 22 
  const [experiences, setExperiences] = useState([])
23 
  const [educations, setEducations] = useState([]);
 23 
  const [educations, setEducations] = useState([])
24 
  const [languages, setLanguages] = useState([]);
 24 
  const [languages, setLanguages] = useState([])
25 
  const [skills, setSkills] = useState([]);
 25 
  const [skills, setSkills] = useState([])
26 
  const [aptitudes, setAptitudes] = useState([]);
 26 
  const [aptitudes, setAptitudes] = useState([])
27 
  const [hobbiesAndInterests, setHobbiesAndInterests] = useState([]);
 27 
  const [hobbiesAndInterests, setHobbiesAndInterests] = useState([])
28 
  const [address, setAddress] = useState("");
 28 
  const [address, setAddress] = useState('')
29 
  const [modalShow, setModalShow] = useState(null);
 29 
  const [modalShow, setModalShow] = useState(null)
30 
  const [settedDescription, setSettedDescription] = useState("");
 30 
  const [settedDescription, setSettedDescription] = useState('')
31 
  const [postUrl, setPostUrl] = useState("");
 31 
  const [postUrl, setPostUrl] = useState('')
32 
  const [isEdit, setIsEdit] = useState(false);
 32 
  const [isEdit, setIsEdit] = useState(false)
33 
  const labels = useSelector(({ intl }) => intl.labels);
 33 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 34... Línea 34...
34 
  const { uuid } = useParams();
 34 
  const { uuid } = useParams()
35 
 
 35 
 
36 
  const handleEdit = (modalName, url, description) => {
 36 
  const handleEdit = (modalName, url, description) => {
37 
    setModalShow(modalName);
 37 
    setModalShow(modalName)
38 
    setPostUrl(url);
 38 
    setPostUrl(url)
Línea 39... Línea 39...
39 
    setSettedDescription(description);
 39 
    setSettedDescription(description)
40 
  };
 40 
  }
41 
 
 41 
 
42 
  const handleAdd = (modalName, url) => {
 42 
  const handleAdd = (modalName, url) => {
Línea 43... Línea 43...
43 
    setModalShow(modalName);
 43 
    setModalShow(modalName)
44 
    setPostUrl(url);
 44 
    setPostUrl(url)
45 
  };
 45 
  }
46 
 
 46 
 
47 
  const closeModal = () => {
 47 
  const closeModal = () => {
48 
    setSettedDescription("");
 48 
    setSettedDescription('')
Línea 49... Línea 49...
49 
    setPostUrl("");
 49 
    setPostUrl('')
50 
    setIsEdit(false);
 50 
    setIsEdit(false)
51 
    setModalShow(null);
 51 
    setModalShow(null)
52 
  };
 52 
  }
53 
 
 53 
 
54 
  const renderModal = {
 54 
  const renderModal = {
55 
    Experiencia: (
 55 
    Experiencia: (
56 
      <ExperienceModal
 56 
      <ExperienceModal
57 
        show={modalShow === "Experiencia"}
 57 
        show={modalShow === 'Experiencia'}
58 
        url={postUrl}
 58 
        url={postUrl}
59 
        isEdit={isEdit}
 59 
        isEdit={isEdit}
60 
        onClose={closeModal}
 60 
        onClose={closeModal}
61 
        onComplete={(newExperiences) => setExperiences(newExperiences)}
 61 
        onComplete={(newExperiences) => setExperiences(newExperiences)}
62 
      />
 62 
      />
63 
    ),
 63 
    ),
64 
    Educación: (
 64 
    Educación: (
65 
      <EducationModal
 65 
      <EducationModal
66 
        show={modalShow === "Educación"}
 66 
        show={modalShow === 'Educación'}
67 
        postUrl={postUrl}
 67 
        postUrl={postUrl}
68 
        closeModal={closeModal}
 68 
        closeModal={closeModal}
69 
        setEducations={(newEducations) => setEducations(newEducations)}
 69 
        setEducations={(newEducations) => setEducations(newEducations)}
70 
        settedDescription={settedDescription}
 70 
        settedDescription={settedDescription}
71 
      />
 71 
      />
72 
    ),
 72 
    ),
73 
    Habilidades: (
 73 
    Habilidades: (
74 
      <SkillsModal
 74 
      <SkillsModal
75 
        show={modalShow === "Habilidades"}
 75 
        show={modalShow === 'Habilidades'}
76 
        userSkills={skills}
 76 
        userSkills={skills}
77 
        userId={profile?.user_profile_uuid}
 77 
        userId={profile?.user_profile_uuid}
78 
        onClose={closeModal}
 78 
        onClose={closeModal}
79 
        onComplete={(newSkills) => setSkills(newSkills)}
 79 
        onComplete={(newSkills) => setSkills(newSkills)}
80 
      />
 80 
      />
81 
    ),
 81 
    ),
82 
    Idiomas: (
 82 
    Idiomas: (
83 
      <LanguagesModal
 83 
      <LanguagesModal
84 
        show={modalShow === "Idiomas"}
 84 
        show={modalShow === 'Idiomas'}
85 
        userId={profile?.user_profile_uuid}
 85 
        userId={profile?.user_profile_uuid}
86 
        userLanguages={languages}
 86 
        userLanguages={languages}
87 
        onClose={closeModal}
 87 
        onClose={closeModal}
88 
        onComplete={(newLanguages) => setLanguages(newLanguages)}
 88 
        onComplete={(newLanguages) => setLanguages(newLanguages)}
89 
      />
 89 
      />
90 
    ),
 90 
    ),
91 
    Aptitudes: (
 91 
    Aptitudes: (
92 
      <AptitudesModal
 92 
      <AptitudesModal
93 
        show={modalShow === "Aptitudes"}
 93 
        show={modalShow === 'Aptitudes'}
94 
        userId={profile?.user_profile_uuid}
 94 
        userId={profile?.user_profile_uuid}
95 
        userAptitudes={aptitudes}
 95 
        userAptitudes={aptitudes}
96 
        onClose={closeModal}
 96 
        onClose={closeModal}
97 
        onComplete={(newAptitudes) => setAptitudes(newAptitudes)}
 97 
        onComplete={(newAptitudes) => setAptitudes(newAptitudes)}
98 
      />
 98 
      />
99 
    ),
 99 
    ),
100 
    "Hobbies e Intereses": (
 100 
    'Hobbies e Intereses': (
101 
      <HobbiesModal
 101 
      <HobbiesModal
102 
        onClose={closeModal}
 102 
        onClose={closeModal}
103 
        show={modalShow === "Hobbies e Intereses"}
 103 
        show={modalShow === 'Hobbies e Intereses'}
104 
        userId={profile?.user_profile_uuid}
 104 
        userId={profile?.user_profile_uuid}
105 
        userHobbies={hobbiesAndInterests}
 105 
        userHobbies={hobbiesAndInterests}
106 
        onComplete={(newHobbiesAndInterests) =>
 106 
        onComplete={(newHobbiesAndInterests) =>
107 
          setHobbiesAndInterests(newHobbiesAndInterests)
 107 
          setHobbiesAndInterests(newHobbiesAndInterests)
108 
        }
 108 
        }
109 
      />
 109 
      />
110 
    ),
 110 
    ),
111 
    Ubicación: (
 111 
    Ubicación: (
112 
      <LocationModal
 112 
      <LocationModal
113 
        show={modalShow === "Ubicación"}
 113 
        show={modalShow === 'Ubicación'}
114 
        onClose={() => setModalShow(null)}
 114 
        onClose={() => setModalShow(null)}
Línea 115... Línea 115...
115 
        onComplete={(newAddress) => setAddress(newAddress)}
 115 
        onComplete={(newAddress) => setAddress(newAddress)}
116 
        id={profile?.user_profile_uuid}
 116 
        id={profile?.user_profile_uuid}
117 
      />
 117 
      />
118 
    ),
 118 
    )
Línea 128... Línea 128...
128 
          user_skills,
 128 
          user_skills,
129 
          user_aptitudes,
 129 
          user_aptitudes,
130 
          user_languages,
 130 
          user_languages,
131 
          formatted_address,
 131 
          formatted_address,
132 
          ...profileInfo
 132 
          ...profileInfo
133 
        } = vars;
 133 
        } = vars
Línea 134... Línea 134...
134 
 
 134 
 
135 
        const attrAdapter = (attr) => {
 135 
        const attrAdapter = (attr) => {
136 
          return Object.entries(attr).map(([key, value]) => {
 136 
          return Object.entries(attr).map(([key, value]) => {
137 
            return { name: value, value: key };
 137 
            return { name: value, value: key }
138 
          });
 138 
          })
Línea 139... Línea 139...
139 
        };
 139 
        }
140 
 
 140 
 
141 
        setExperiences(user_experiences);
 141 
        setExperiences(user_experiences)
142 
        setEducations(user_educations);
 142 
        setEducations(user_educations)
143 
        setAddress(formatted_address);
 143 
        setAddress(formatted_address)
144 
        setProfile(profileInfo);
 144 
        setProfile(profileInfo)
145 
        setHobbiesAndInterests(attrAdapter(user_hobbies_and_interests));
 145 
        setHobbiesAndInterests(attrAdapter(user_hobbies_and_interests))
146 
        setSkills(attrAdapter(user_skills));
 146 
        setSkills(attrAdapter(user_skills))
147 
        setAptitudes(attrAdapter(user_aptitudes));
 147 
        setAptitudes(attrAdapter(user_aptitudes))
148 
        setLanguages(attrAdapter(user_languages));
 148 
        setLanguages(attrAdapter(user_languages))
149 
      })
 149 
      })
150 
      .catch((err) => {
 150 
      .catch((err) => {
151 
        console.log(`Error: ${err}`);
 151 
        console.log(`Error: ${err}`)
152 
        throw new Error(err);
 152 
        throw new Error(err)
Línea 153... Línea 153...
153 
      });
 153 
      })
154 
  }, []);
 154 
  }, [])
155 
 
 155 
 
156 
  return (
 156 
  return (
157 
    <>
 157 
    <>
158 
      <main className="w-100">
 158 
      <main className='w-100'>
159 
        <div className="container">
 159 
        <div className='container'>
160 
          <div className="main d-flex flex-column" style={{ gap: ".5rem" }}>
 160 
          <div className='main d-flex flex-column' style={{ gap: '.5rem' }}>
161 
            <ProfileCard
 161 
            <ProfileCard
162 
              {...profile}
 162 
              {...profile}
163 
              sizes={{
 163 
              sizes={{
164 
                image: profile.image_size_profile,
 164 
                image: profile.image_size_profile,
165 
                cover: profile.image_size_cover,
 165 
                cover: profile.image_size_cover
166 
              }}
 166 
              }}
167 
              uuid={profile.user_uuid}
 167 
              uuid={profile.user_uuid}
Línea 185... Línea 185...
185 
                      setExperiences(newExperiences)
 185 
                      setExperiences(newExperiences)
186 
                    }
 186 
                    }
187 
                  />
 187 
                  />
188 
                ))
 188 
                ))
189 
              ) : (
 189 
              ) : (
190 
                <EmptySection align="left" message={labels.empty} />
 190 
                <EmptySection align='left' message={labels.empty} />
191 
              )}
 191 
              )}
192 
            </ProfileWidget>
 192 
            </ProfileWidget>
193 
            <ProfileWidget
 193 
            <ProfileWidget
194 
              title={labels.education}
 194 
              title={labels.education}
195 
              onEdit={() => setIsEdit(!isEdit)}
 195 
              onEdit={() => setIsEdit(!isEdit)}
Línea 199... Línea 199...
199 
              {educations.length ? (
 199 
              {educations.length ? (
200 
                educations.map((education, index) => (
 200 
                educations.map((education, index) => (
201 
                  <EducationCard key={index} education={education} />
 201 
                  <EducationCard key={index} education={education} />
202 
                ))
 202 
                ))
203 
              ) : (
 203 
              ) : (
204 
                <EmptySection align="left" message={labels.empty} />
 204 
                <EmptySection align='left' message={labels.empty} />
205 
              )}
 205 
              )}
206 
            </ProfileWidget>
 206 
            </ProfileWidget>
207 
            <ProfileWidget
 207 
            <ProfileWidget
208 
              title={labels.location}
 208 
              title={labels.location}
209 
              onEdit={() => setModalShow("Ubicación")}
 209 
              onEdit={() => setModalShow('Ubicación')}
210 
              justEdit
 210 
              justEdit
211 
            >
 211 
            >
212 
              <div className="card__items">
 212 
              <div className='card__items'>
213 
                <p>{address}</p>
 213 
                <p>{address}</p>
214 
              </div>
 214 
              </div>
215 
            </ProfileWidget>
 215 
            </ProfileWidget>
216 
            <ProfileWidget
 216 
            <ProfileWidget
217 
              title={labels.languages}
 217 
              title={labels.languages}
218 
              onEdit={() => setModalShow("Idiomas")}
 218 
              onEdit={() => setModalShow('Idiomas')}
219 
              justEdit
 219 
              justEdit
220 
            >
 220 
            >
221 
              {languages.length ? (
 221 
              {languages.length ? (
222 
                <ItemsList value={languages} />
 222 
                <ItemsList value={languages} />
223 
              ) : (
 223 
              ) : (
224 
                <EmptySection align="left" message={labels.empty} />
 224 
                <EmptySection align='left' message={labels.empty} />
225 
              )}
 225 
              )}
226 
            </ProfileWidget>
 226 
            </ProfileWidget>
227 
            <ProfileWidget
 227 
            <ProfileWidget
228 
              title={labels.skills}
 228 
              title={labels.skills}
229 
              onEdit={() => setModalShow("Habilidades")}
 229 
              onEdit={() => setModalShow('Habilidades')}
230 
              justEdit
 230 
              justEdit
231 
            >
 231 
            >
232 
              {skills.length ? (
 232 
              {skills.length ? (
233 
                <ItemsList value={skills} />
 233 
                <ItemsList value={skills} />
234 
              ) : (
 234 
              ) : (
235 
                <EmptySection align="left" message={labels.empty} />
 235 
                <EmptySection align='left' message={labels.empty} />
236 
              )}
 236 
              )}
237 
            </ProfileWidget>
 237 
            </ProfileWidget>
238 
            <ProfileWidget
 238 
            <ProfileWidget
239 
              title={labels.aptitudes}
 239 
              title={labels.aptitudes}
240 
              onEdit={() => setModalShow("Aptitudes")}
 240 
              onEdit={() => setModalShow('Aptitudes')}
241 
              justEdit
 241 
              justEdit
242 
            >
 242 
            >
243 
              {aptitudes.length ? (
 243 
              {aptitudes.length ? (
244 
                <ItemsList value={aptitudes} />
 244 
                <ItemsList value={aptitudes} />
245 
              ) : (
 245 
              ) : (
246 
                <EmptySection align="left" message={labels.empty} />
 246 
                <EmptySection align='left' message={labels.empty} />
247 
              )}
 247 
              )}
248 
            </ProfileWidget>
 248 
            </ProfileWidget>
249 
            <ProfileWidget
 249 
            <ProfileWidget
250 
              title={labels.hobbies_and_interests}
 250 
              title={labels.hobbies_and_interests}
251 
              onEdit={() => setModalShow("Hobbies e Intereses")}
 251 
              onEdit={() => setModalShow('Hobbies e Intereses')}
252 
              justEdit
 252 
              justEdit
253 
            >
 253 
            >
254 
              {hobbiesAndInterests.length ? (
 254 
              {hobbiesAndInterests.length ? (
255 
                <ItemsList value={hobbiesAndInterests} />
 255 
                <ItemsList value={hobbiesAndInterests} />
256 
              ) : (
 256 
              ) : (
257 
                <EmptySection align="left" message={labels.empty} />
 257 
                <EmptySection align='left' message={labels.empty} />
258 
              )}
 258 
              )}
259 
            </ProfileWidget>
 259 
            </ProfileWidget>
260 
          </div>
 260 
          </div>
261 
        </div>
 261 
        </div>
262 
      </main>
 262 
      </main>
263 
      {renderModal[modalShow]}
 263 
      {renderModal[modalShow]}
264 
    </>
 264 
    </>
265 
  );
 265 
  )
266 
};
 266 
}
Línea 267... Línea 267...
267 
 
 267