Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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