Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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