Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2943 | Rev 3506 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React, { useEffect, useRef } from "react";
2 
import { useState } from "react";
3 
import { connect } from "react-redux";
4 
import styled from "styled-components";
1105 stevensc 5 
import { axios } from "../../../utils";
1 www 6 
import CompanyFollowersHelper from "../../../shared/helpers/company-followers-helper/CompanyFollowers";
7 
import parse from "html-react-parser";
8 
import { addNotification } from "../../../redux/notification/notification.actions";
9 
import Spinner from "../../../shared/loading-spinner/Spinner";
10 
import { setTimelineUrl } from "../../../redux/feed/feed.actions";
11 
import FeedSection from "../../../dashboard/components/feed-section/FeedSection";
2940 stevensc 12 
import styles from "../../../shared/helpers/people-you-may-know/peopleYouMayKnow.module.scss";
1 www 13 
 
14 
const TABS = {
15 
  FEEDS: "FEEDS",
16 
  INFO: "INFO",
17 
};
18 
 
19 
const View = (props) => {
20 
  // backendVars destructuring
21 
  const {
22 
    companyId,
23 
    cover,
24 
    image,
25 
    totalFollowers,
26 
    facebook,
27 
    twitter,
28 
    instagram,
29 
    companyName,
30 
    overview,
31 
    locations,
32 
    industry,
33 
    companySize,
34 
    foundationYear,
35 
    website,
36 
    timeline,
37 
  } = props.backendVars;
38 
 
39 
  // redux destructuring
40 
  const { addNotification, setTimelineUrl } = props;
41 
 
42 
  // const [isFollower, setIsFollower] = useState(!!+follower);
43 
  const [authorizedLinks, setAuthorizedLinks] = useState(null);
44 
  const [loading, setLoading] = useState(false);
45 
  const [followers, setFollowers] = useState(totalFollowers);
46 
  const [initialLoading, setInitialLoading] = useState(true);
1108 stevensc 47 
  const [isFollower, setIsFollower] = useState(false);
1107 stevensc 48 
  const [currentTab, setCurrentTab] = useState(TABS.INFO);
1 www 49 
  const [suggestionCompanies, setSuggestionCompanies] = useState([])
1705 steven 50 
  const [lookMore, setLookMore] = useState(false);
1 www 51 
  const shouldSetInitialTab = useRef(true);
52 
 
1110 stevensc 53 
  useEffect(() => {
1 www 54 
    setTimelineUrl(timeline);
1110 stevensc 55 
    fetchAuthorizedLinks();
1 www 56 
    shouldSetInitialTab.current = false;
57 
    setInitialLoading(false);
58 
    getSuggestionCompanies()
59 
  }, []);
1108 stevensc 60 
 
1 www 61 
  const getSuggestionCompanies = async () => {
62 
    try {
63 
      setLoading(true);
64 
      const response = await axios.get(`/helpers/company-suggestion/${companyId}`);
1105 stevensc 65 
      if (response.data.success)
1 www 66 
        setSuggestionCompanies(response.data.data)
67 
    } catch (error) {
68 
      console.log('>>: error > ', error)
1105 stevensc 69 
    } finally {
1 www 70 
      setLoading(false)
71 
    }
72 
  }
73 
 
1107 stevensc 74 
  useEffect(() => {
75 
    isFollower
1108 stevensc 76 
      ? setCurrentTab(TABS.FEEDS)
77 
      : setCurrentTab(TABS.INFO)
1114 stevensc 78 
  }, [isFollower]);
1107 stevensc 79 
 
1 www 80 
  const fetchAuthorizedLinks = async () => {
81 
    setLoading(true);
82 
    const response = await axios.get(`/company/view/${companyId}`);
83 
    const resData = response.data;
1105 stevensc 84 
    (resData);
1 www 85 
    if (resData.success) {
86 
      setAuthorizedLinks(resData.data);
87 
      setFollowers(resData.data.total_followers);
88 
      if (resData.data.link_unfollow) {
89 
        setIsFollower(true);
90 
        if (shouldSetInitialTab.current) setCurrentTab(TABS.FEEDS);
91 
      } else {
92 
        setIsFollower(false);
93 
      }
94 
    }
95 
    return setLoading(false);
96 
  };
97 
 
98 
  const handleButtonAction = async (link) => {
99 
    setLoading(true);
100 
    const response = await axios.post(link);
101 
    const resData = response.data;
102 
    if (resData.success) {
103 
      addNotification({
104 
        style: "success",
105 
        msg: resData.data,
106 
      });
107 
      fetchAuthorizedLinks();
108 
    } else {
109 
      setLoading(false);
110 
      addNotification({
111 
        style: "danger",
112 
        msg: "ha ocurrido un error",
113 
      });
114 
    }
115 
  };
116 
  const changeCurrentTab = (tab) => {
117 
    setCurrentTab(tab)
118 
  }
1705 steven 119 
 
120 
  const getData = () => {
1706 steven 121 
    let infoFollows = [...suggestionCompanies]
2258 stevensc 122 
    if (!lookMore) {
2943 stevensc 123 
      infoFollows = infoFollows.slice(0, 3);
1705 steven 124 
    }
125 
    return infoFollows
126 
  }
1 www 127 
  return (
128 
    <React.Fragment>
129 
      <section className="cover-sec">
130 
        <img
131 
          id="user-cover-img"
1105 stevensc 132 
          src={`/storage/type/company-cover/code/${companyId}/${cover ? `filename/${cover}` : ""
133 
            }`}
1 www 134 
          alt="cover-image"
135 
        />
136 
      </section>
137 
      <main>
138 
        <div className="main-section">
1755 steven 139 
          <div className="ph-5">
1 www 140 
            <div className="main-section-data">
2442 stevensc 141 
              <div className="main-left-sidebar">
142 
                <div className="user_profile border-gray border-radius pb-5">
143 
                  <div className="user-pro-img">
144 
                    <img
145 
                      id="company-img"
2443 stevensc 146 
                      src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ""}`}
2442 stevensc 147 
                      alt="profile-image"
148 
                    />
149 
                  </div>
2495 stevensc 150 
                  <div className="user_pro_status horizontal-list">
2442 stevensc 151 
                    <h1>{companyName}</h1>
2496 stevensc 152 
                    <div className="row px-5" style={{ marginTop: '10px' }}>
2442 stevensc 153 
                      {
2443 stevensc 154 
                        facebook &&
2495 stevensc 155 
                        <i
156 
                          onClick={() => window.location.href = facebook}
157 
                          className="cursor-pointer fa fa-facebook"
158 
                          style={{ fontSize: '1.4rem' }}
159 
                        />
2442 stevensc 160 
                      }
161 
                      {
2443 stevensc 162 
                        twitter &&
2495 stevensc 163 
                        <i
164 
                          onClick={() => window.location.href = twitter}
165 
                          className="cursor-pointer fa fa-twitter"
166 
                          style={{ fontSize: '1.4rem' }}
167 
                        />
2442 stevensc 168 
                      }
169 
                      {
2443 stevensc 170 
                        instagram &&
2495 stevensc 171 
                        <i
172 
                          onClick={() => window.location.href = instagram}
173 
                          className="fa fa-instagram cursor-pointer"
174 
                          style={{ fontSize: '1.4rem' }}
175 
                        />
2442 stevensc 176 
                      }
177 
                    </div>
2443 stevensc 178 
                    <div className="container horizontal-list">
179 
                      <div className="row ">
2495 stevensc 180 
                        <div className="members_count">
2442 stevensc 181 
                          <b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>
2495 stevensc 182 
                          <p style={{ fontSize: '1rem' }} className="ellipsis">Seguidores</p>
1701 steven 183 
                        </div>
2443 stevensc 184 
                        {authorizedLinks?.link_unfollow &&
2495 stevensc 185 
                          <button
2945 stevensc 186 
                            className="btn btn-secondary"
2495 stevensc 187 
                            onClick={() => handleButtonAction(authorizedLinks?.link_unfollow)}
188 
                          >
189 
                            <span className="ellipsis w-100">
190 
                              Dejar de seguir
191 
                            </span>
192 
                          </button>
2443 stevensc 193 
                        }
194 
                        {authorizedLinks?.link_follow &&
2495 stevensc 195 
                          <button
2945 stevensc 196 
                            className="btn btn-secondary"
2495 stevensc 197 
                            onClick={() => handleButtonAction(authorizedLinks?.link_follow)}
198 
                          >
199 
                            <span className="ellipsis">
200 
                              Seguir
201 
                            </span>
202 
                          </button>
2443 stevensc 203 
                        }
2734 stevensc 204 
                        {
205 
                          (authorizedLinks?.link_request && authorizedLinks?.link_unfollow)
206 
                          &&
2495 stevensc 207 
                          <button
2945 stevensc 208 
                            className="btn btn-tertiary"
2495 stevensc 209 
                            onClick={() => handleButtonAction(authorizedLinks?.link_request)}
210 
                          >
211 
                            <span className="ellipsis">
212 
                              Trabaja en esta empresa?
213 
                            </span>
214 
                          </button>
2443 stevensc 215 
                        }
216 
                        {authorizedLinks?.link_accept &&
2495 stevensc 217 
                          <button
2945 stevensc 218 
                            className="btn btn-tertiary"
2495 stevensc 219 
                            onClick={() => handleButtonAction(authorizedLinks?.link_accept)}
220 
                          >
221 
                            <span className="ellipsis">
222 
                              Aceptar
223 
                            </span>
224 
                          </button>
2443 stevensc 225 
                        }
226 
                        {authorizedLinks?.link_cancel &&
2495 stevensc 227 
                          <button
228 
                            title=""
2945 stevensc 229 
                            className="btn btn-tertiary"
2495 stevensc 230 
                            onClick={() => handleButtonAction(authorizedLinks?.link_cancel)}
231 
                          >
232 
                            <span className="ellipsis">
233 
                              Cancelar
234 
                            </span>
235 
                          </button>
2443 stevensc 236 
                        }
237 
                        {authorizedLinks?.link_reject &&
2495 stevensc 238 
                          <button
239 
                            title=""
2945 stevensc 240 
                            className="btn btn-tertiary"
2495 stevensc 241 
                            onClick={() => handleButtonAction(authorizedLinks?.link_reject)}
242 
                          >
243 
                            <span className="ellipsis">
244 
                              Rechazar
245 
                            </span>
246 
                          </button>
2443 stevensc 247 
                        }
248 
                        {authorizedLinks?.link_leave &&
2495 stevensc 249 
                          <button
250 
                            data-link="{{>link_leave}}"
251 
                            title=""
2945 stevensc 252 
                            className="btn btn-tertiary"
2495 stevensc 253 
                            onClick={() => handleButtonAction(authorizedLinks?.link_leave)}
254 
                          >
255 
                            <span className="ellipsis">
256 
                              Abandonar esta empresa
257 
                            </span>
258 
                          </button>
2443 stevensc 259 
                        }
260 
                        {authorizedLinks?.link_contact &&
2495 stevensc 261 
                          <a
262 
                            href={authorizedLinks?.link_contact}
263 
                            className="btn btn-primary"
264 
                          >
265 
                            <span className="ellipsis">
266 
                              Mensaje
267 
                            </span>
268 
                          </a>
2443 stevensc 269 
                        }
1 www 270 
                      </div>
271 
                    </div>
272 
                  </div>
273 
                </div>
2442 stevensc 274 
                <CompanyFollowersHelper companyId={companyId} />
275 
              </div>
276 
              <div className="main-ws-sec">
277 
                <div className="user-tab-sec rewivew">
278 
                  {
279 
                    !initialLoading
280 
                    &&
281 
                    <div
282 
                      className="row"
283 
                    >
1108 stevensc 284 
                      {
2442 stevensc 285 
                        isFollower
1108 stevensc 286 
                        &&
1 www 287 
                        <div
2442 stevensc 288 
                          className="col text-left pl-0"
1 www 289 
                        >
2442 stevensc 290 
                          <button
291 
                            className="btn btn-link p-0 text-decoration-none"
292 
                            onClick={() => changeCurrentTab(TABS.FEEDS)}
2574 stevensc 293 
                            style={{ padding: '0 !important' }}
1 www 294 
                          >
2573 stevensc 295 
                            <span className="p-0 default-link font-weight-bold text-dark">Ver Publicaciones</span>
2442 stevensc 296 
                          </button>
1 www 297 
                        </div>
1108 stevensc 298 
                      }
2442 stevensc 299 
                      <div
300 
                        className="col text-right pl-0"
301 
                      >
302 
                        <button
303 
                          className="btn btn-link p-0 text-decoration-none"
304 
                          onClick={() => changeCurrentTab(TABS.INFO)}
2574 stevensc 305 
                          style={{ padding: '0 !important' }}
2442 stevensc 306 
                        >
2573 stevensc 307 
                          <span className="p-0 default-link font-weight-bold text-dark">Ver Información</span>
2442 stevensc 308 
                        </button>
309 
                      </div>
1 www 310 
                    </div>
2442 stevensc 311 
                  }
312 
                  {/* <!-- tab-feed end--> */}
313 
                </div>
314 
                {
315 
                  currentTab === TABS.FEEDS
316 
                  &&
317 
                  <div
318 
                    className="product-feed-tab animated fadeIn"
319 
                    id="feed-dd feed"
320 
                    style={{ display: 'block' }}
321 
                  >
322 
                    <div className="posts-section">
2894 stevensc 323 
                      <FeedSection
324 
                        routeTimeline={timeline}
2895 stevensc 325 
                        image={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ""}`}
2894 stevensc 326 
                      />
2442 stevensc 327 
                    </div>
328 
                  </div>
329 
                }
330 
                {
331 
                  currentTab === TABS.INFO
332 
                  &&
333 
                  < div
334 
                    className="product-feed-tab animated fadeIn"
335 
                    id="feed-dd info"
336 
                    style={{ display: 'block' }}
337 
                  >
1109 stevensc 338 
                    {
2442 stevensc 339 
                      overview
1105 stevensc 340 
                      &&
2442 stevensc 341 
                      <div className="user-profile-extended-ov">
342 
                        <h3>Visión general</h3>
343 
                        <span>{parse(overview)}</span>
1109 stevensc 344 
                      </div>
345 
                    }
346 
                    {
2442 stevensc 347 
                      locations
1109 stevensc 348 
                      &&
2442 stevensc 349 
                      <div className="user-profile-extended-ov st2">
350 
                        <h3>Ubicación</h3>
351 
                        <span>
352 
                          {locations.map(
353 
                            ({ formatted_address, is_main }, index) => (
354 
                              <React.Fragment key={index}>
355 
                                {index >= 0 ? <hr /> : ""}
356 
                                <p>
357 
                                  {`${formatted_address} ${is_main === "y" ? "(Principal)" : ""
358 
                                    }`}
359 
                                </p>
360 
                              </React.Fragment>
361 
                            )
362 
                          )}
363 
                        </span>
1109 stevensc 364 
                      </div>
1105 stevensc 365 
                    }
1110 stevensc 366 
                    {
2442 stevensc 367 
                      industry
1110 stevensc 368 
                      &&
2442 stevensc 369 
                      <div className="user-profile-ov">
370 
                        <h3>Industria</h3>
371 
                        <span>{industry}</span>
1 www 372 
                      </div>
1110 stevensc 373 
                    }
2442 stevensc 374 
                    {
375 
                      companySize
376 
                      &&
377 
                      <div className="user-profile-ov">
378 
                        <h3>Tamaño de la empresa</h3>
379 
                        <span>{companySize}</span>
1701 steven 380 
                      </div>
2442 stevensc 381 
                    }
382 
                    {
383 
                      foundationYear
384 
                      &&
385 
                      <div className="user-profile-ov">
386 
                        <h3>Año de fundación</h3>
387 
                        <span>{foundationYear}</span>
1105 stevensc 388 
                      </div>
2442 stevensc 389 
                    }
390 
                    {
391 
                      website
392 
                      &&
393 
                      <div className="user-profile-ov">
394 
                        <h3>Página web</h3>
395 
                        <span>{website}</span>
396 
                      </div>
397 
                    }
398 
                  </div>
399 
                }
400 
                {
401 
                  initialLoading
402 
                  &&
403 
                  <div
404 
                    style={{
405 
                      display: "flex",
406 
                      justifyContent: "center",
407 
                      alignItems: "center",
408 
                    }}
409 
                  >
410 
                    <Spinner />
411 
                  </div>
412 
                }
413 
              </div>
2443 stevensc 414 
              <div className="right-sidebar" style={{ maxHeight: '450px' }}>
415 
                {loading &&
2442 stevensc 416 
                  <div className="spinner-container">
417 
                    <Spinner />
418 
                  </div>
2443 stevensc 419 
                }
2940 stevensc 420 
                <div className="widget suggestions d-none d-md-block d-lg-block">
421 
                  <div className="sd-title d-flex align-items-center justify-content-between">
422 
                    <h3>Empresas similares:</h3>
423 
                    {
424 
                      suggestionCompanies.length >= 5
425 
                      &&
426 
                      <a href="#" onClick={(e) => {
427 
                        e.preventDefault()
428 
                        setLookMore(!lookMore)
429 
                      }}>
430 
                        {lookMore ? 'Ver menos' : 'Ver mas'}
431 
                      </a>
432 
                    }
2442 stevensc 433 
                  </div>
2443 stevensc 434 
                  <div className="mb-2" id="suggestions-similar-groups" style={{ height: '80%', overflowY: 'auto' }}>
435 
                    {suggestionCompanies.length
436 
                      ? getData().map(element => {
437 
                        return (
2940 stevensc 438 
                          <div className={styles.user} key={element.id}>
439 
                            <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
2443 stevensc 440 
                              <a href={element.profile} target="_blank">
2940 stevensc 441 
                                <img src={element.image} alt={`${element.name} profile image`} />
2443 stevensc 442 
                              </a>
2940 stevensc 443 
                              <h4>{element.name}</h4>
2443 stevensc 444 
                            </div>
2940 stevensc 445 
                            <div className="w-100 d-flex align-items-center justify-content-start" style={{ gap: '.5rem' }}>
2942 stevensc 446 
                              <a
447 
                                className="btn btn-primary"
448 
                                href={element.profile}
449 
                                target='_blank'
450 
                                rel="noreferrer"
451 
                                style={{ fontSize: '.9rem', borderRadius: '4px' }}
452 
                              >
453 
                                MÁS INF
454 
                              </a>
2940 stevensc 455 
                            </div>
1771 steven 456 
                          </div>
2443 stevensc 457 
                        )
458 
                      })
459 
                      : <div className="view-more">Sin empresas similares</div>
460 
                    }
461 
                  </div>
1 www 462 
                </div>
463 
              </div>
464 
            </div>
465 
          </div>
466 
        </div>
2442 stevensc 467 
      </main >
1105 stevensc 468 
    </React.Fragment >
1 www 469 
  );
470 
};
471 
 
472 
// const mapStateToProps = (state) => ({
473 
 
474 
// })
475 
 
476 
const mapDispatchToProps = {
477 
  addNotification: (notification) => addNotification(notification),
478 
  setTimelineUrl: (url) => setTimelineUrl(url),
479 
};
480 
 
481 
export default connect(null, mapDispatchToProps)(View);