Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
3552 stevensc 1 
/* eslint-disable react/prop-types */
1 www 2 
import React, { useEffect, useRef } from "react";
3 
import { useState } from "react";
4 
import { connect } from "react-redux";
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) {
2943 stevensc 122 
      infoFollows = infoFollows.slice(0, 3);
1705 steven 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">
3891 stevensc 141 
                <div className="user_profile">
2442 stevensc 142 
                  <div className="user-pro-img">
143 
                    <img
2443 stevensc 144 
                      src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ""}`}
2442 stevensc 145 
                      alt="profile-image"
146 
                    />
147 
                  </div>
2495 stevensc 148 
                  <div className="user_pro_status horizontal-list">
2442 stevensc 149 
                    <h1>{companyName}</h1>
2496 stevensc 150 
                    <div className="row px-5" style={{ marginTop: '10px' }}>
3891 stevensc 151 
                      {facebook &&
2495 stevensc 152 
                        <i
153 
                          onClick={() => window.location.href = facebook}
154 
                          className="cursor-pointer fa fa-facebook"
155 
                          style={{ fontSize: '1.4rem' }}
156 
                        />
2442 stevensc 157 
                      }
3891 stevensc 158 
                      {twitter &&
2495 stevensc 159 
                        <i
160 
                          onClick={() => window.location.href = twitter}
161 
                          className="cursor-pointer fa fa-twitter"
162 
                          style={{ fontSize: '1.4rem' }}
163 
                        />
2442 stevensc 164 
                      }
3891 stevensc 165 
                      {instagram &&
2495 stevensc 166 
                        <i
167 
                          onClick={() => window.location.href = instagram}
168 
                          className="fa fa-instagram cursor-pointer"
169 
                          style={{ fontSize: '1.4rem' }}
170 
                        />
2442 stevensc 171 
                      }
172 
                    </div>
2443 stevensc 173 
                    <div className="container horizontal-list">
174 
                      <div className="row ">
2495 stevensc 175 
                        <div className="members_count">
2442 stevensc 176 
                          <b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>
2495 stevensc 177 
                          <p style={{ fontSize: '1rem' }} className="ellipsis">Seguidores</p>
1701 steven 178 
                        </div>
2443 stevensc 179 
                        {authorizedLinks?.link_unfollow &&
2495 stevensc 180 
                          <button
2945 stevensc 181 
                            className="btn btn-secondary"
2495 stevensc 182 
                            onClick={() => handleButtonAction(authorizedLinks?.link_unfollow)}
183 
                          >
3833 stevensc 184 
                            Dejar de seguir
2495 stevensc 185 
                          </button>
2443 stevensc 186 
                        }
187 
                        {authorizedLinks?.link_follow &&
2495 stevensc 188 
                          <button
2945 stevensc 189 
                            className="btn btn-secondary"
2495 stevensc 190 
                            onClick={() => handleButtonAction(authorizedLinks?.link_follow)}
191 
                          >
3833 stevensc 192 
                            Seguir
2495 stevensc 193 
                          </button>
2443 stevensc 194 
                        }
2734 stevensc 195 
                        {
196 
                          (authorizedLinks?.link_request && authorizedLinks?.link_unfollow)
197 
                          &&
2495 stevensc 198 
                          <button
2945 stevensc 199 
                            className="btn btn-tertiary"
2495 stevensc 200 
                            onClick={() => handleButtonAction(authorizedLinks?.link_request)}
201 
                          >
3836 stevensc 202 
                            ¿Trabaja en esta empresa?
2495 stevensc 203 
                          </button>
2443 stevensc 204 
                        }
205 
                        {authorizedLinks?.link_accept &&
2495 stevensc 206 
                          <button
2945 stevensc 207 
                            className="btn btn-tertiary"
2495 stevensc 208 
                            onClick={() => handleButtonAction(authorizedLinks?.link_accept)}
209 
                          >
3833 stevensc 210 
                            Aceptar
2495 stevensc 211 
                          </button>
2443 stevensc 212 
                        }
213 
                        {authorizedLinks?.link_cancel &&
2495 stevensc 214 
                          <button
215 
                            title=""
2945 stevensc 216 
                            className="btn btn-tertiary"
2495 stevensc 217 
                            onClick={() => handleButtonAction(authorizedLinks?.link_cancel)}
218 
                          >
3833 stevensc 219 
                            Cancelar
2495 stevensc 220 
                          </button>
2443 stevensc 221 
                        }
222 
                        {authorizedLinks?.link_reject &&
2495 stevensc 223 
                          <button
224 
                            title=""
2945 stevensc 225 
                            className="btn btn-tertiary"
2495 stevensc 226 
                            onClick={() => handleButtonAction(authorizedLinks?.link_reject)}
227 
                          >
3833 stevensc 228 
                            Rechazar
2495 stevensc 229 
                          </button>
2443 stevensc 230 
                        }
231 
                        {authorizedLinks?.link_leave &&
2495 stevensc 232 
                          <button
233 
                            data-link="{{>link_leave}}"
234 
                            title=""
2945 stevensc 235 
                            className="btn btn-tertiary"
2495 stevensc 236 
                            onClick={() => handleButtonAction(authorizedLinks?.link_leave)}
237 
                          >
3833 stevensc 238 
                            Abandonar esta empresa
2495 stevensc 239 
                          </button>
2443 stevensc 240 
                        }
241 
                        {authorizedLinks?.link_contact &&
2495 stevensc 242 
                          <a
243 
                            href={authorizedLinks?.link_contact}
244 
                            className="btn btn-primary"
245 
                          >
3833 stevensc 246 
                            Mensaje
2495 stevensc 247 
                          </a>
2443 stevensc 248 
                        }
1 www 249 
                      </div>
250 
                    </div>
251 
                  </div>
252 
                </div>
2442 stevensc 253 
                <CompanyFollowersHelper companyId={companyId} />
254 
              </div>
255 
              <div className="main-ws-sec">
256 
                <div className="user-tab-sec rewivew">
3891 stevensc 257 
                  {!initialLoading &&
258 
                    <div className="row">
259 
                      {isFollower &&
260 
                        <div className="col text-left pl-0">
2442 stevensc 261 
                          <button
262 
                            className="btn btn-link p-0 text-decoration-none"
263 
                            onClick={() => changeCurrentTab(TABS.FEEDS)}
2574 stevensc 264 
                            style={{ padding: '0 !important' }}
1 www 265 
                          >
2573 stevensc 266 
                            <span className="p-0 default-link font-weight-bold text-dark">Ver Publicaciones</span>
2442 stevensc 267 
                          </button>
1 www 268 
                        </div>
1108 stevensc 269 
                      }
3891 stevensc 270 
                      <div className="col text-right pl-0">
2442 stevensc 271 
                        <button
272 
                          className="btn btn-link p-0 text-decoration-none"
273 
                          onClick={() => changeCurrentTab(TABS.INFO)}
2574 stevensc 274 
                          style={{ padding: '0 !important' }}
2442 stevensc 275 
                        >
2573 stevensc 276 
                          <span className="p-0 default-link font-weight-bold text-dark">Ver Información</span>
2442 stevensc 277 
                        </button>
278 
                      </div>
1 www 279 
                    </div>
2442 stevensc 280 
                  }
281 
                </div>
282 
                {
283 
                  currentTab === TABS.FEEDS
284 
                  &&
285 
                  <div
286 
                    className="product-feed-tab animated fadeIn"
287 
                    id="feed-dd feed"
288 
                    style={{ display: 'block' }}
289 
                  >
290 
                    <div className="posts-section">
2894 stevensc 291 
                      <FeedSection
292 
                        routeTimeline={timeline}
2895 stevensc 293 
                        image={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ""}`}
2894 stevensc 294 
                      />
2442 stevensc 295 
                    </div>
296 
                  </div>
297 
                }
298 
                {
299 
                  currentTab === TABS.INFO
300 
                  &&
301 
                  < div
302 
                    className="product-feed-tab animated fadeIn"
303 
                    id="feed-dd info"
304 
                    style={{ display: 'block' }}
305 
                  >
1109 stevensc 306 
                    {
2442 stevensc 307 
                      overview
1105 stevensc 308 
                      &&
2442 stevensc 309 
                      <div className="user-profile-extended-ov">
310 
                        <h3>Visión general</h3>
311 
                        <span>{parse(overview)}</span>
1109 stevensc 312 
                      </div>
313 
                    }
314 
                    {
2442 stevensc 315 
                      locations
1109 stevensc 316 
                      &&
2442 stevensc 317 
                      <div className="user-profile-extended-ov st2">
318 
                        <h3>Ubicación</h3>
319 
                        <span>
320 
                          {locations.map(
321 
                            ({ formatted_address, is_main }, index) => (
322 
                              <React.Fragment key={index}>
323 
                                {index >= 0 ? <hr /> : ""}
324 
                                <p>
325 
                                  {`${formatted_address} ${is_main === "y" ? "(Principal)" : ""
326 
                                    }`}
327 
                                </p>
328 
                              </React.Fragment>
329 
                            )
330 
                          )}
331 
                        </span>
1109 stevensc 332 
                      </div>
1105 stevensc 333 
                    }
1110 stevensc 334 
                    {
2442 stevensc 335 
                      industry
1110 stevensc 336 
                      &&
2442 stevensc 337 
                      <div className="user-profile-ov">
338 
                        <h3>Industria</h3>
339 
                        <span>{industry}</span>
1 www 340 
                      </div>
1110 stevensc 341 
                    }
2442 stevensc 342 
                    {
343 
                      companySize
344 
                      &&
345 
                      <div className="user-profile-ov">
346 
                        <h3>Tamaño de la empresa</h3>
347 
                        <span>{companySize}</span>
1701 steven 348 
                      </div>
2442 stevensc 349 
                    }
350 
                    {
351 
                      foundationYear
352 
                      &&
353 
                      <div className="user-profile-ov">
354 
                        <h3>Año de fundación</h3>
355 
                        <span>{foundationYear}</span>
1105 stevensc 356 
                      </div>
2442 stevensc 357 
                    }
358 
                    {
359 
                      website
360 
                      &&
361 
                      <div className="user-profile-ov">
362 
                        <h3>Página web</h3>
363 
                        <span>{website}</span>
364 
                      </div>
365 
                    }
366 
                  </div>
367 
                }
368 
                {
369 
                  initialLoading
370 
                  &&
371 
                  <div
372 
                    style={{
373 
                      display: "flex",
374 
                      justifyContent: "center",
375 
                      alignItems: "center",
376 
                    }}
377 
                  >
378 
                    <Spinner />
379 
                  </div>
380 
                }
381 
              </div>
3891 stevensc 382 
              <div className="right-sidebar">
2443 stevensc 383 
                {loading &&
2442 stevensc 384 
                  <div className="spinner-container">
385 
                    <Spinner />
386 
                  </div>
2443 stevensc 387 
                }
3892 stevensc 388 
                <div className="peopleYouMayKnow">
2940 stevensc 389 
                  <div className="sd-title d-flex align-items-center justify-content-between">
390 
                    <h3>Empresas similares:</h3>
3892 stevensc 391 
                    {suggestionCompanies.length >= 5 &&
2940 stevensc 392 
                      <a href="#" onClick={(e) => {
393 
                        e.preventDefault()
394 
                        setLookMore(!lookMore)
395 
                      }}>
396 
                        {lookMore ? 'Ver menos' : 'Ver mas'}
397 
                      </a>
398 
                    }
2442 stevensc 399 
                  </div>
3842 stevensc 400 
                  <div className="suggest-list">
2443 stevensc 401 
                    {suggestionCompanies.length
402 
                      ? getData().map(element => {
403 
                        return (
3552 stevensc 404 
                          <div className='user' key={element.id}>
2940 stevensc 405 
                            <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
3506 stevensc 406 
                              <a href={element.profile} target="_blank" rel="noreferrer">
2940 stevensc 407 
                                <img src={element.image} alt={`${element.name} profile image`} />
2443 stevensc 408 
                              </a>
2940 stevensc 409 
                              <h4>{element.name}</h4>
2443 stevensc 410 
                            </div>
2940 stevensc 411 
                            <div className="w-100 d-flex align-items-center justify-content-start" style={{ gap: '.5rem' }}>
2942 stevensc 412 
                              <a
413 
                                className="btn btn-primary"
414 
                                href={element.profile}
415 
                                target='_blank'
416 
                                rel="noreferrer"
417 
                                style={{ fontSize: '.9rem', borderRadius: '4px' }}
418 
                              >
419 
                                MÁS INF
420 
                              </a>
2940 stevensc 421 
                            </div>
1771 steven 422 
                          </div>
2443 stevensc 423 
                        )
424 
                      })
425 
                      : <div className="view-more">Sin empresas similares</div>
426 
                    }
427 
                  </div>
1 www 428 
                </div>
429 
              </div>
430 
            </div>
431 
          </div>
432 
        </div>
2442 stevensc 433 
      </main >
1105 stevensc 434 
    </React.Fragment >
1 www 435 
  );
436 
};
437 
 
438 
const mapDispatchToProps = {
439 
  addNotification: (notification) => addNotification(notification),
440 
  setTimelineUrl: (url) => setTimelineUrl(url),
441 
};
442 
 
443 
export default connect(null, mapDispatchToProps)(View);