Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 224
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}
168 
              image={`/storage/type/user-profile/code/${profile.user_uuid}/filename/${profile.image}`}
 168 
              image={profile.image}
169 
              cover={`/storage/type/user-profile/code/${profile.user_uuid}/filename/${profile.cover}`}
 169 
              cover={profile.cover}
170 
            />
 170 
            />
171 
            <ProfileWidget
 171 
            <ProfileWidget
Línea 204... Línea 204...
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 
              ) : (
Línea 260... Línea 260...
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