Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2259 | Rev 2443 | 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">
2442 stevensc 140 
              <div className="main-left-sidebar">
141 
                <div className="user_profile border-gray border-radius pb-5">
142 
                  <div className="user-pro-img">
143 
                    <img
144 
                      id="company-img"
145 
                      src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ""
146 
                        }`}
147 
                      alt="profile-image"
148 
                    />
149 
                  </div>
150 
                  {/* <!--user-pro-img end--> */}
151 
                  <div className="user_pro_status">
152 
                    <h1>{companyName}</h1>
153 
                    <div
154 
                      className="row"
155 
                      style={{
156 
                        marginTop: '10px'
157 
                      }}
158 
                    >
159 
                      {
160 
                        facebook && (
161 
                          <div
162 
                            className="col col-md col-sm"
163 
                          >
164 
                            <i onClick={() => window.location.href = facebook} className="cursor-pointer fa fa-facebook" style={{ fontSize: '1.4rem' }} />
165 
                          </div>
166 
                        )
167 
                      }
168 
                      {
169 
                        twitter && (
170 
                          <div
171 
                            className="col col-md col-sm"
172 
                          >
173 
                            <i onClick={() => window.location.href = twitter} className="cursor-pointer fa fa-twitter" style={{ fontSize: '1.4rem' }} />
174 
                          </div>
175 
                        )
176 
                      }
177 
                      {
178 
                        instagram && (
179 
                          <div
180 
                            className="col col-md col-sm"
181 
                          >
182 
                            <i onClick={() => window.location.href = instagram} className="fa fa-instagram cursor-pointer" style={{ fontSize: '1.4rem' }} />
183 
                          </div>
184 
                        )
185 
                      }
186 
                    </div>
187 
                    <div
188 
                      className="container horizontal-list"
189 
                    >
190 
                      <div
191 
                        className="row "
192 
                      >
1701 steven 193 
                        <div
2442 stevensc 194 
                          className="col"
1701 steven 195 
                        >
2442 stevensc 196 
                          <p style={{ fontSize: '1rem' }} className="ellipsis">
197 
                            Seguidores
198 
                          </p>
199 
                          <b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>
200 
                          <br />
1701 steven 201 
                        </div>
2442 stevensc 202 
                        {authorizedLinks?.link_unfollow && (
1702 steven 203 
                          <div
2442 stevensc 204 
                            className="col"
1702 steven 205 
                          >
2442 stevensc 206 
                            <button
207 
                              href="#"
208 
                              className="btn btn-primary"
209 
                              onClick={(e) => {
210 
                                e.preventDefault();
211 
                                handleButtonAction(authorizedLinks?.link_unfollow);
212 
                              }}
1702 steven 213 
                            >
2442 stevensc 214 
                              <span className="ellipsis w-100">
215 
                                Dejar de seguir
216 
                              </span>
217 
                            </button>
218 
                          </div>
219 
                        )}
220 
                        {authorizedLinks?.link_follow && (
221 
                          <div
222 
                            className="col"
223 
                          >
224 
                            <button
225 
                              href="#"
226 
                              className="btn btn-primary"
227 
                              onClick={(e) => {
228 
                                e.preventDefault();
229 
                                handleButtonAction(authorizedLinks?.link_follow);
230 
                              }}
231 
                            >
232 
                              <span className="ellipsis">
233 
                                Seguir
234 
                              </span>
235 
                            </button>
236 
                          </div>
237 
                        )}
238 
                        {authorizedLinks?.link_request && (
239 
                          <div
240 
                            className="col"
241 
                          >
242 
                            <button
243 
                              href="#"
244 
                              className="btn btn-primary"
245 
                              onClick={(e) => {
246 
                                e.preventDefault();
247 
                                handleButtonAction(authorizedLinks?.link_request);
248 
                              }}
249 
                            >
250 
                              <span className="ellipsis">
251 
                                Trabaja en esta empresa?
252 
                              </span>
253 
                            </button>
254 
                          </div>
255 
                        )}
256 
                        {authorizedLinks?.link_accept && (
257 
                          <div
258 
                            className="col"
259 
                          >
260 
                            <button
261 
                              href="#"
262 
                              className="btn btn-primary"
263 
                              onClick={(e) => {
264 
                                e.preventDefault();
265 
                                handleButtonAction(authorizedLinks?.link_accept);
266 
                              }}
267 
                            >
268 
                              <span className="ellipsis">
269 
                                Aceptar
270 
                              </span>
271 
                            </button>
272 
                          </div>
273 
                        )}
2258 stevensc 274 
 
2442 stevensc 275 
                        {authorizedLinks?.link_cancel && (
276 
                          <div
277 
                            className="col"
278 
                          >
279 
                            <button
280 
                              href="#"
281 
                              title=""
282 
                              className="btn btn-primary"
283 
                              onClick={(e) => {
284 
                                e.preventDefault();
285 
                                handleButtonAction(authorizedLinks?.link_cancel);
286 
                              }}
287 
                            >
288 
                              <span className="ellipsis">
289 
                                Cancelar
290 
                              </span>
291 
                            </button>
292 
                          </div>
293 
                        )}
294 
                        {authorizedLinks?.link_reject && (
295 
                          <div
296 
                            className="col"
297 
                          >
298 
                            <button
299 
                              href="#"
300 
                              title=""
301 
                              className="btn btn-primary"
302 
                              onClick={(e) => {
303 
                                e.preventDefault();
304 
                                handleButtonAction(authorizedLinks?.link_reject);
305 
                              }}
306 
                            >
307 
                              <span className="ellipsis">
308 
                                Rechazar
309 
                              </span>
310 
                            </button>
311 
                          </div>
312 
                        )}
2258 stevensc 313 
 
2442 stevensc 314 
                        {authorizedLinks?.link_leave && (
315 
                          <div
316 
                            className="col"
317 
                          >
318 
                            <button
319 
                              href="#"
320 
                              data-link="{{>link_leave}}"
321 
                              title=""
322 
                              className="btn btn-primary"
323 
                              onClick={(e) => {
324 
                                e.preventDefault();
325 
                                handleButtonAction(authorizedLinks?.link_leave);
326 
                              }}
327 
                            >
328 
                              <span className="ellipsis">
329 
                                Abandonar esta empresa
330 
                              </span>
331 
                            </button>
1702 steven 332 
                          </div>
2442 stevensc 333 
                        )}
334 
                        {authorizedLinks?.link_contact && (
335 
                          <div className="col">
336 
                            <a
337 
                              href={authorizedLinks?.link_contact}
338 
                              title=""
339 
                              className="btn btn-primary"
340 
                            >
341 
                              <span className="ellipsis">
342 
                                Mensaje
343 
                              </span>
344 
                            </a>
345 
                          </div>
346 
                        )}
1 www 347 
                      </div>
348 
                    </div>
349 
                  </div>
2442 stevensc 350 
                  {/* <!--user_pro_status end--> */}
1 www 351 
                </div>
2442 stevensc 352 
                {/* <!--user_profile end--> */}
353 
 
354 
                <CompanyFollowersHelper companyId={companyId} />
355 
              </div>
356 
              <div className="main-ws-sec">
357 
                <div className="user-tab-sec rewivew">
358 
                  {
359 
                    !initialLoading
360 
                    &&
361 
                    <div
362 
                      className="row"
363 
                    >
1108 stevensc 364 
                      {
2442 stevensc 365 
                        isFollower
1108 stevensc 366 
                        &&
1 www 367 
                        <div
2442 stevensc 368 
                          className="col text-left pl-0"
1 www 369 
                        >
2442 stevensc 370 
                          <button
371 
                            className="btn btn-link p-0 text-decoration-none"
372 
                            onClick={() => changeCurrentTab(TABS.FEEDS)}
1 www 373 
                          >
2442 stevensc 374 
                            <span className="p-2 default-link font-weight-bold text-dark">Ver Publicaciones</span>
375 
                          </button>
1 www 376 
                        </div>
1108 stevensc 377 
                      }
2442 stevensc 378 
                      <div
379 
                        className="col text-right pl-0"
380 
                      >
381 
                        <button
382 
                          className="btn btn-link p-0 text-decoration-none"
383 
                          onClick={() => changeCurrentTab(TABS.INFO)}
384 
                        >
385 
                          <span className="p-2 default-link font-weight-bold text-dark">Ver Información</span>
386 
                        </button>
387 
                      </div>
1 www 388 
                    </div>
2442 stevensc 389 
                  }
390 
                  {/* <!-- tab-feed end--> */}
391 
                </div>
392 
                {
393 
                  currentTab === TABS.FEEDS
394 
                  &&
395 
                  <div
396 
                    className="product-feed-tab animated fadeIn"
397 
                    id="feed-dd feed"
398 
                    style={{ display: 'block' }}
399 
                  >
400 
                    <div className="posts-section">
401 
                      <FeedSection routeTimeline={timeline} />
402 
                    </div>
403 
                  </div>
404 
                }
405 
                {
406 
                  currentTab === TABS.INFO
407 
                  &&
408 
                  < div
409 
                    className="product-feed-tab animated fadeIn"
410 
                    id="feed-dd info"
411 
                    style={{ display: 'block' }}
412 
                  >
1109 stevensc 413 
                    {
2442 stevensc 414 
                      overview
1105 stevensc 415 
                      &&
2442 stevensc 416 
                      <div className="user-profile-extended-ov">
417 
                        <h3>Visión general</h3>
418 
                        <span>{parse(overview)}</span>
1109 stevensc 419 
                      </div>
420 
                    }
421 
                    {
2442 stevensc 422 
                      locations
1109 stevensc 423 
                      &&
2442 stevensc 424 
                      <div className="user-profile-extended-ov st2">
425 
                        <h3>Ubicación</h3>
426 
                        <span>
427 
                          {locations.map(
428 
                            ({ formatted_address, is_main }, index) => (
429 
                              <React.Fragment key={index}>
430 
                                {index >= 0 ? <hr /> : ""}
431 
                                <p>
432 
                                  {`${formatted_address} ${is_main === "y" ? "(Principal)" : ""
433 
                                    }`}
434 
                                </p>
435 
                              </React.Fragment>
436 
                            )
437 
                          )}
438 
                        </span>
1109 stevensc 439 
                      </div>
1105 stevensc 440 
                    }
1110 stevensc 441 
                    {
2442 stevensc 442 
                      industry
1110 stevensc 443 
                      &&
2442 stevensc 444 
                      <div className="user-profile-ov">
445 
                        <h3>Industria</h3>
446 
                        <span>{industry}</span>
1 www 447 
                      </div>
1110 stevensc 448 
                    }
2442 stevensc 449 
                    {
450 
                      companySize
451 
                      &&
452 
                      <div className="user-profile-ov">
453 
                        <h3>Tamaño de la empresa</h3>
454 
                        <span>{companySize}</span>
1701 steven 455 
                      </div>
2442 stevensc 456 
                    }
457 
                    {
458 
                      foundationYear
459 
                      &&
460 
                      <div className="user-profile-ov">
461 
                        <h3>Año de fundación</h3>
462 
                        <span>{foundationYear}</span>
1105 stevensc 463 
                      </div>
2442 stevensc 464 
                    }
465 
                    {
466 
                      website
467 
                      &&
468 
                      <div className="user-profile-ov">
469 
                        <h3>Página web</h3>
470 
                        <span>{website}</span>
471 
                      </div>
472 
                    }
473 
                  </div>
474 
                }
475 
                {
476 
                  initialLoading
477 
                  &&
478 
                  <div
479 
                    style={{
480 
                      display: "flex",
481 
                      justifyContent: "center",
482 
                      alignItems: "center",
483 
                    }}
484 
                  >
485 
                    <Spinner />
486 
                  </div>
487 
                }
488 
              </div>
489 
              <div className="right-sidebar">
490 
                {loading && (
491 
                  <div className="spinner-container">
492 
                    <Spinner />
493 
                  </div>
494 
                )}
495 
                <div
496 
                  className="widget suggestions full-width d-none d-md-block d-lg-block border-gray border-radius"
497 
                  style={{
498 
                    height: "auto",
499 
                    overflowY: "auto",
500 
                  }}
501 
                >
502 
                  <div className="sd-title">
503 
                    <h3>Empresas similares</h3>
504 
                  </div>
505 
                  {/* <!--sd-title end--> */}
506 
                  {suggestionCompanies.length ? (
507 
                    getData().map(element => {
508 
                      return (
509 
                        <div className="suggestion-usd d-flex justify-content-start align-items-center " key={element.id}>
510 
                          <img
511 
                            style={{ width: "10%", height: "auto" }}
512 
                            src={element.image}
513 
                            alt=""
514 
                          />
1771 steven 515 
                          <div
2442 stevensc 516 
                            className="sgt-text"
1771 steven 517 
                          >
2442 stevensc 518 
                            <a href={element.profile} target="_blank">
519 
                              <h4 className="text-dark">{element.name}</h4>
520 
                            </a>
1771 steven 521 
                          </div>
2442 stevensc 522 
                        </div>
523 
                      )
524 
                    })
525 
                  ) : (
526 
                    <div className="view-more">Sin empresas similares</div>
527 
                  )}
528 
                  {
529 
                    suggestionCompanies.length >= 5 && (
530 
                      <div
531 
                        className="w-100 text-center"
532 
                      >
533 
                        <button className="btn btn-primary" onClick={() => setLookMore(!lookMore)}>
534 
                          {lookMore ? 'Ver menos' : 'Ver mas'}
535 
                        </button>
536 
                      </div>
537 
                    )
538 
                  }
1 www 539 
                </div>
540 
              </div>
541 
            </div>
542 
            {/* <!-- main-section-data end--> */}
543 
          </div>
544 
        </div>
2442 stevensc 545 
      </main >
1105 stevensc 546 
    </React.Fragment >
1 www 547 
  );
548 
};
549 
 
550 
// const mapStateToProps = (state) => ({
551 
 
552 
// })
553 
 
554 
const mapDispatchToProps = {
555 
  addNotification: (notification) => addNotification(notification),
556 
  setTimelineUrl: (url) => setTimelineUrl(url),
557 
};
558 
 
559 
export default connect(null, mapDispatchToProps)(View);