Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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