Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4234 | Rev 5411 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4234 Rev 5406
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useRef } from "react";
 2 
import React, { useEffect, useRef } from 'react'
3 
import { useState } from "react";
 3 
import { useState } from 'react'
4 
import { connect } from "react-redux";
 4 
import { connect } from 'react-redux'
5 
import { axios } from "../../../utils";
 5 
import { axios } from '../../../utils'
6 
import CompanyFollowersHelper from "../../../shared/helpers/company-followers-helper/CompanyFollowers";
 6 
import CompanyFollowersHelper from '../../../shared/helpers/company-followers-helper/CompanyFollowers'
7 
import parse from "html-react-parser";
 7 
import parse from 'html-react-parser'
8 
import { addNotification } from "../../../redux/notification/notification.actions";
 8 
import { addNotification } from '../../../redux/notification/notification.actions'
9 
import Spinner from "../../../shared/loading-spinner/Spinner";
 9 
import Spinner from '../../../shared/loading-spinner/Spinner'
10 
import { setTimelineUrl } from "../../../redux/feed/feed.actions";
 10 
import { setTimelineUrl } from '../../../redux/feed/feed.actions'
11 
import FeedSection from "../../../dashboard/components/feed-section/FeedSection";
 11 
import FeedSection from '../../../dashboard/components/feed-section/FeedSection'
Línea 12... Línea 12...
12 
 
 12 
 
13 
const TABS = {
 13 
const TABS = {
14 
  FEEDS: "FEEDS",
 14 
  FEEDS: 'FEEDS',
15 
  INFO: "INFO",
 15 
  INFO: 'INFO'
Línea 16... Línea 16...
16 
};
 16 
}
17 
 
 17 
 
18 
const View = (props) => {
 18 
const View = (props) => {
19 
  // backendVars destructuring
 19 
  // backendVars destructuring
Línea 30... Línea 30...
30 
    locations,
 30 
    locations,
31 
    industry,
 31 
    industry,
32 
    companySize,
 32 
    companySize,
33 
    foundationYear,
 33 
    foundationYear,
34 
    website,
 34 
    website,
35 
    timeline,
 35 
    timeline
36 
  } = props.backendVars;
 36 
  } = props.backendVars
Línea 37... Línea 37...
37 
 
 37 
 
38 
  // redux destructuring
 38 
  // redux destructuring
Línea 39... Línea 39...
39 
  const { addNotification, setTimelineUrl } = props;
 39 
  const { addNotification, setTimelineUrl } = props
40 
 
 40 
 
41 
  // const [isFollower, setIsFollower] = useState(!!+follower);
 41 
  // const [isFollower, setIsFollower] = useState(!!+follower);
42 
  const [authorizedLinks, setAuthorizedLinks] = useState(null);
 42 
  const [authorizedLinks, setAuthorizedLinks] = useState(null)
43 
  const [loading, setLoading] = useState(false);
 43 
  const [loading, setLoading] = useState(false)
44 
  const [followers, setFollowers] = useState(totalFollowers);
 44 
  const [followers, setFollowers] = useState(totalFollowers)
45 
  const [initialLoading, setInitialLoading] = useState(true);
 45 
  const [initialLoading, setInitialLoading] = useState(true)
46 
  const [isFollower, setIsFollower] = useState(false);
 46 
  const [isFollower, setIsFollower] = useState(false)
47 
  const [currentTab, setCurrentTab] = useState(TABS.INFO);
 47 
  const [currentTab, setCurrentTab] = useState(TABS.INFO)
48 
  const [suggestionCompanies, setSuggestionCompanies] = useState([])
 48 
  const [suggestionCompanies, setSuggestionCompanies] = useState([])
Línea 49... Línea 49...
49 
  const [lookMore, setLookMore] = useState(false);
 49 
  const [lookMore, setLookMore] = useState(false)
50 
  const shouldSetInitialTab = useRef(true);
 50 
  const shouldSetInitialTab = useRef(true)
51 
 
 51 
 
52 
  useEffect(() => {
 52 
  useEffect(() => {
53 
    setTimelineUrl(timeline);
 53 
    setTimelineUrl(timeline)
54 
    fetchAuthorizedLinks();
 54 
    fetchAuthorizedLinks()
55 
    shouldSetInitialTab.current = false;
 55 
    shouldSetInitialTab.current = false
Línea 56... Línea 56...
56 
    setInitialLoading(false);
 56 
    setInitialLoading(false)
57 
    getSuggestionCompanies()
 57 
    getSuggestionCompanies()
58 
  }, []);
 58 
  }, [])
59 
 
 59 
 
60 
  const getSuggestionCompanies = async () => {
 - 
 
61 
    try {
 60 
  const getSuggestionCompanies = async () => {
62 
      setLoading(true);
 61 
    try {
63 
      const response = await axios.get(`/helpers/company-suggestion/${companyId}`);
 62 
      setLoading(true)
64 
      if (response.data.success)
 63 
      const response = await axios.get(`/helpers/company-suggestion/${companyId}`)
65 
        setSuggestionCompanies(response.data.data)
 64 
      if (response.data.success) { setSuggestionCompanies(response.data.data) }
66 
    } catch (error) {
 65 
    } catch (error) {
Línea 72... Línea 71...
72 
 
 71 
 
73 
  useEffect(() => {
 72 
  useEffect(() => {
74 
    isFollower
 73 
    isFollower
75 
      ? setCurrentTab(TABS.FEEDS)
 74 
      ? setCurrentTab(TABS.FEEDS)
76 
      : setCurrentTab(TABS.INFO)
 75 
      : setCurrentTab(TABS.INFO)
Línea 77... Línea 76...
77 
  }, [isFollower]);
 76 
  }, [isFollower])
78 
 
 77 
 
79 
  const fetchAuthorizedLinks = async () => {
 78 
  const fetchAuthorizedLinks = async () => {
80 
    setLoading(true);
 79 
    setLoading(true)
81 
    const response = await axios.get(`/company/view/${companyId}`);
 80 
    const response = await axios.get(`/company/view/${companyId}`)
82 
    const resData = response.data;
 81 
    const resData = response.data;
83 
    (resData);
 82 
    (resData)
84 
    if (resData.success) {
 83 
    if (resData.success) {
85 
      setAuthorizedLinks(resData.data);
 84 
      setAuthorizedLinks(resData.data)
86 
      setFollowers(resData.data.total_followers);
 85 
      setFollowers(resData.data.total_followers)
87 
      if (resData.data.link_unfollow) {
 86 
      if (resData.data.link_unfollow) {
88 
        setIsFollower(true);
 87 
        setIsFollower(true)
89 
        if (shouldSetInitialTab.current) setCurrentTab(TABS.FEEDS);
 88 
        if (shouldSetInitialTab.current) setCurrentTab(TABS.FEEDS)
90 
      } else {
 89 
      } else {
91 
        setIsFollower(false);
 90 
        setIsFollower(false)
92 
      }
 91 
      }
93 
    }
 92 
    }
Línea 94... Línea 93...
94 
    return setLoading(false);
 93 
    return setLoading(false)
95 
  };
 94 
  }
96 
 
 95 
 
97 
  const handleButtonAction = async (link) => {
 96 
  const handleButtonAction = async (link) => {
98 
    setLoading(true);
 97 
    setLoading(true)
99 
    const response = await axios.post(link);
 98 
    const response = await axios.post(link)
100 
    const resData = response.data;
 99 
    const resData = response.data
101 
    if (resData.success) {
 100 
    if (resData.success) {
102 
      addNotification({
 101 
      addNotification({
103 
        style: "success",
 102 
        style: 'success',
104 
        msg: resData.data,
 103 
        msg: resData.data
105 
      });
 104 
      })
106 
      fetchAuthorizedLinks();
 105 
      fetchAuthorizedLinks()
107 
    } else {
 106 
    } else {
108 
      setLoading(false);
 107 
      setLoading(false)
109 
      addNotification({
 108 
      addNotification({
110 
        style: "danger",
 109 
        style: 'danger',
111 
        msg: "ha ocurrido un error",
 110 
        msg: 'ha ocurrido un error'
112 
      });
 111 
      })
113 
    }
 112 
    }
114 
  };
 113 
  }
Línea 115... Línea 114...
115 
  const changeCurrentTab = (tab) => {
 114 
  const changeCurrentTab = (tab) => {
116 
    setCurrentTab(tab)
 115 
    setCurrentTab(tab)
117 
  }
 116 
  }
118 
 
 117 
 
119 
  const getData = () => {
 118 
  const getData = () => {
120 
    let infoFollows = [...suggestionCompanies]
 119 
    let infoFollows = [...suggestionCompanies]
121 
    if (!lookMore) {
 120 
    if (!lookMore) {
122 
      infoFollows = infoFollows.slice(0, 3);
 121 
      infoFollows = infoFollows.slice(0, 3)
123 
    }
 122 
    }
124 
    return infoFollows
 123 
    return infoFollows
125 
  }
 124 
  }
126 
  return (
 125 
  return (
127 
    <>
 126 
    <>
128 
      <section className="cover-sec">
 127 
      <section className="cover-sec">
129 
        <img
 128 
        <img
130 
          id="user-cover-img"
 129 
          id="user-cover-img"
131 
          src={`/storage/type/company-cover/code/${companyId}/${cover ? `filename/${cover}` : ""
 130 
          src={`/storage/type/company-cover/code/${companyId}/${cover ? `filename/${cover}` : ''
132 
            }`}
 131 
            }`}
133 
          alt="cover-image"
 132 
          alt="cover-image"
134 
        />
 133 
        />
135 
      </section>
 134 
      </section>
136 
      <main className="main-section">
 135 
      <main className="main-section">
137 
        <div className="main-section-data">
 136 
        <div className="main-section-data">
138 
          <div className="main-left-sidebar">
 137 
          <div className="main-left-sidebar">
139 
            <div className="user_profile">
 138 
            <div className="user_profile">
140 
              <div className="user-pro-img">
 139 
              <div className="user-pro-img">
141 
                <img
 140 
                <img
142 
                  src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ""}`}
 141 
                  src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ''}`}
143 
                  alt="profile-image"
 142 
                  alt="profile-image"
Línea 189... Línea 188...
189 
                      >
 188 
                      >
190 
                        Seguir
 189 
                        Seguir
191 
                      </button>
 190 
                      </button>
192 
                    }
 191 
                    }
193 
                    {
 192 
                    {
194 
                      (authorizedLinks?.link_request && authorizedLinks?.link_unfollow)
 193 
                      (authorizedLinks?.link_request && authorizedLinks?.link_unfollow) &&
195 
                      &&
 - 
 
196 
                      <button
 194 
                      <button
197 
                        className="btn btn-tertiary"
 195 
                        className="btn btn-tertiary"
198 
                        onClick={() => handleButtonAction(authorizedLinks?.link_request)}
 196 
                        onClick={() => handleButtonAction(authorizedLinks?.link_request)}
199 
                      >
 197 
                      >
200 
                        ¿Trabaja en esta empresa?
 198 
                        ¿Trabaja en esta empresa?
Línea 278... Línea 276...
278 
                  </div>
 276 
                  </div>
279 
                </div>
 277 
                </div>
280 
              }
 278 
              }
281 
            </div>
 279 
            </div>
282 
            {
 280 
            {
283 
              currentTab === TABS.FEEDS
 281 
              currentTab === TABS.FEEDS &&
284 
              &&
 - 
 
285 
              <div
 282 
              <div
286 
                className="product-feed-tab animated fadeIn"
 283 
                className="product-feed-tab animated fadeIn"
287 
                id="feed-dd feed"
 284 
                id="feed-dd feed"
288 
                style={{ display: 'block' }}
 285 
                style={{ display: 'block' }}
289 
              >
 286 
              >
290 
                <div className="posts-section">
 287 
                <div className="posts-section">
291 
                  <FeedSection
 288 
                  <FeedSection
292 
                    routeTimeline={timeline}
 289 
                    routeTimeline={timeline}
293 
                    image={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ""}`}
 290 
                    image={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ''}`}
294 
                  />
 291 
                  />
295 
                </div>
 292 
                </div>
296 
              </div>
 293 
              </div>
297 
            }
 294 
            }
298 
            {
 295 
            {
299 
              currentTab === TABS.INFO
 296 
              currentTab === TABS.INFO &&
300 
              &&
 - 
 
301 
              < div
 297 
              < div
302 
                className="product-feed-tab animated fadeIn"
 298 
                className="product-feed-tab animated fadeIn"
303 
                id="feed-dd info"
 299 
                id="feed-dd info"
304 
                style={{ display: 'block' }}
 300 
                style={{ display: 'block' }}
305 
              >
 301 
              >
306 
                {
 302 
                {
307 
                  overview
 303 
                  overview &&
308 
                  &&
 - 
 
309 
                  <div className="user-profile-extended-ov">
 304 
                  <div className="user-profile-extended-ov">
310 
                    <h3>Visión general</h3>
 305 
                    <h3>Visión general</h3>
311 
                    <span>{parse(overview)}</span>
 306 
                    <span>{parse(overview)}</span>
312 
                  </div>
 307 
                  </div>
313 
                }
 308 
                }
314 
                {
 309 
                {
315 
                  locations
 310 
                  locations &&
316 
                  &&
 - 
 
317 
                  <div className="user-profile-extended-ov st2">
 311 
                  <div className="user-profile-extended-ov st2">
318 
                    <h3>Ubicación</h3>
 312 
                    <h3>Ubicación</h3>
319 
                    <span>
 313 
                    <span>
320 
                      {locations.map(
 314 
                      {locations.map(
321 
                        ({ formatted_address, is_main }, index) => (
 315 
                        ({ formatted_address, is_main }, index) => (
322 
                          <React.Fragment key={index}>
 316 
                          <React.Fragment key={index}>
323 
                            {index >= 0 ? <hr /> : ""}
 317 
                            {index >= 0 ? <hr /> : ''}
324 
                            <p>
 318 
                            <p>
325 
                              {`${formatted_address} ${is_main === "y" ? "(Principal)" : ""
 319 
                              {`${formatted_address} ${is_main === 'y' ? '(Principal)' : ''
326 
                                }`}
 320 
                                }`}
327 
                            </p>
 321 
                            </p>
328 
                          </React.Fragment>
 322 
                          </React.Fragment>
329 
                        )
 323 
                        )
330 
                      )}
 324 
                      )}
331 
                    </span>
 325 
                    </span>
332 
                  </div>
 326 
                  </div>
333 
                }
 327 
                }
334 
                {
 328 
                {
335 
                  industry
 329 
                  industry &&
336 
                  &&
 - 
 
337 
                  <div className="user-profile-ov">
 330 
                  <div className="user-profile-ov">
338 
                    <h3>Industria</h3>
 331 
                    <h3>Industria</h3>
339 
                    <span>{industry}</span>
 332 
                    <span>{industry}</span>
340 
                  </div>
 333 
                  </div>
341 
                }
 334 
                }
342 
                {
 335 
                {
343 
                  companySize
 336 
                  companySize &&
344 
                  &&
 - 
 
345 
                  <div className="user-profile-ov">
 337 
                  <div className="user-profile-ov">
346 
                    <h3>Tamaño de la empresa</h3>
 338 
                    <h3>Tamaño de la empresa</h3>
347 
                    <span>{companySize}</span>
 339 
                    <span>{companySize}</span>
348 
                  </div>
 340 
                  </div>
349 
                }
 341 
                }
350 
                {
 342 
                {
351 
                  foundationYear
 343 
                  foundationYear &&
352 
                  &&
 - 
 
353 
                  <div className="user-profile-ov">
 344 
                  <div className="user-profile-ov">
354 
                    <h3>Año de fundación</h3>
 345 
                    <h3>Año de fundación</h3>
355 
                    <span>{foundationYear}</span>
 346 
                    <span>{foundationYear}</span>
356 
                  </div>
 347 
                  </div>
357 
                }
 348 
                }
358 
                {
 349 
                {
359 
                  website
 350 
                  website &&
360 
                  &&
 - 
 
361 
                  <div className="user-profile-ov">
 351 
                  <div className="user-profile-ov">
362 
                    <h3>Página web</h3>
 352 
                    <h3>Página web</h3>
363 
                    <span>{website}</span>
 353 
                    <span>{website}</span>
364 
                  </div>
 354 
                  </div>
365 
                }
 355 
                }
366 
              </div>
 356 
              </div>
367 
            }
 357 
            }
368 
            {
 358 
            {
369 
              initialLoading
 359 
              initialLoading &&
370 
              &&
 - 
 
371 
              <div
 360 
              <div
372 
                style={{
 361 
                style={{
373 
                  display: "flex",
 362 
                  display: 'flex',
374 
                  justifyContent: "center",
 363 
                  justifyContent: 'center',
375 
                  alignItems: "center",
 364 
                  alignItems: 'center'
376 
                }}
 365 
                }}
377 
              >
 366 
              >
378 
                <Spinner />
 367 
                <Spinner />
379 
              </div>
 368 
              </div>
380 
            }
 369 
            }
Línea 426... Línea 415...
426 
            </div>
 415 
            </div>
427 
          </div>
 416 
          </div>
428 
        </div>
 417 
        </div>
429 
      </main >
 418 
      </main >
430 
    </>
 419 
    </>
431 
  );
 420 
  )
432 
};
 421 
}
Línea 433... Línea 422...
433 
 
 422 
 
434 
const mapDispatchToProps = {
 423 
const mapDispatchToProps = {
435 
  addNotification: (notification) => addNotification(notification),
 424 
  addNotification: (notification) => addNotification(notification),
436 
  setTimelineUrl: (url) => setTimelineUrl(url),
 425 
  setTimelineUrl: (url) => setTimelineUrl(url)
Línea 437... Línea 426...
437 
};
 426 
}