Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5406 | Rev 5413 | 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 */
5411 stevensc 2 
import React, { useEffect, useRef, useState } from 'react'
5406 stevensc 3 
import { connect } from 'react-redux'
4 
import { axios } from '../../../utils'
5 
import CompanyFollowersHelper from '../../../shared/helpers/company-followers-helper/CompanyFollowers'
6 
import parse from 'html-react-parser'
7 
import { addNotification } from '../../../redux/notification/notification.actions'
8 
import Spinner from '../../../shared/loading-spinner/Spinner'
9 
import { setTimelineUrl } from '../../../redux/feed/feed.actions'
10 
import FeedSection from '../../../dashboard/components/feed-section/FeedSection'
5411 stevensc 11 
import SuggestWidget from '../../../shared/helpers/my-groups-helper/SuggestWidget'
1 www 12 
 
13 
const TABS = {
5406 stevensc 14 
  FEEDS: 'FEEDS',
15 
  INFO: 'INFO'
16 
}
1 www 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,
5406 stevensc 35 
    timeline
36 
  } = props.backendVars
1 www 37 
  // redux destructuring
5406 stevensc 38 
  const { addNotification, setTimelineUrl } = props
1 www 39 
 
5406 stevensc 40 
  const [authorizedLinks, setAuthorizedLinks] = useState(null)
41 
  const [followers, setFollowers] = useState(totalFollowers)
42 
  const [initialLoading, setInitialLoading] = useState(true)
43 
  const [isFollower, setIsFollower] = useState(false)
44 
  const [currentTab, setCurrentTab] = useState(TABS.INFO)
45 
  const shouldSetInitialTab = useRef(true)
1 www 46 
 
1110 stevensc 47 
  useEffect(() => {
5406 stevensc 48 
    setTimelineUrl(timeline)
49 
    fetchAuthorizedLinks()
50 
    shouldSetInitialTab.current = false
51 
    setInitialLoading(false)
52 
  }, [])
1108 stevensc 53 
 
1107 stevensc 54 
  useEffect(() => {
55 
    isFollower
1108 stevensc 56 
      ? setCurrentTab(TABS.FEEDS)
57 
      : setCurrentTab(TABS.INFO)
5406 stevensc 58 
  }, [isFollower])
1107 stevensc 59 
 
1 www 60 
  const fetchAuthorizedLinks = async () => {
5406 stevensc 61 
    setLoading(true)
62 
    const response = await axios.get(`/company/view/${companyId}`)
1 www 63 
    const resData = response.data;
5406 stevensc 64 
    (resData)
1 www 65 
    if (resData.success) {
5406 stevensc 66 
      setAuthorizedLinks(resData.data)
67 
      setFollowers(resData.data.total_followers)
1 www 68 
      if (resData.data.link_unfollow) {
5406 stevensc 69 
        setIsFollower(true)
70 
        if (shouldSetInitialTab.current) setCurrentTab(TABS.FEEDS)
1 www 71 
      } else {
5406 stevensc 72 
        setIsFollower(false)
1 www 73 
      }
74 
    }
5406 stevensc 75 
    return setLoading(false)
76 
  }
1 www 77 
 
78 
  const handleButtonAction = async (link) => {
5406 stevensc 79 
    const response = await axios.post(link)
80 
    const resData = response.data
1 www 81 
    if (resData.success) {
82 
      addNotification({
5406 stevensc 83 
        style: 'success',
84 
        msg: resData.data
85 
      })
86 
      fetchAuthorizedLinks()
1 www 87 
    } else {
88 
      addNotification({
5406 stevensc 89 
        style: 'danger',
90 
        msg: 'ha ocurrido un error'
91 
      })
1 www 92 
    }
5406 stevensc 93 
  }
1705 steven 94 
 
5411 stevensc 95 
  const changeCurrentTab = (tab) => setCurrentTab(tab)
96 
 
1 www 97 
  return (
3930 stevensc 98 
    <>
1 www 99 
      <section className="cover-sec">
100 
        <img
101 
          id="user-cover-img"
5406 stevensc 102 
          src={`/storage/type/company-cover/code/${companyId}/${cover ? `filename/${cover}` : ''
1105 stevensc 103 
            }`}
1 www 104 
          alt="cover-image"
105 
        />
106 
      </section>
5411 stevensc 107 
      <main className="main-section-data container px-0 mt-3">
108 
        <div className="main-left-sidebar">
109 
          <div className="user_profile">
110 
            <div className="user-pro-img">
111 
              <img
112 
                src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ''}`}
113 
                alt="profile-image"
114 
              />
115 
            </div>
116 
            <div className="user_pro_status horizontal-list">
117 
              <h1>{companyName}</h1>
118 
              <div className="row px-5" style={{ marginTop: '10px' }}>
119 
                {facebook &&
120 
                  <i
121 
                    onClick={() => window.location.href = facebook}
122 
                    className="cursor-pointer fa fa-facebook"
123 
                    style={{ fontSize: '1.4rem' }}
124 
                  />
125 
                }
126 
                {twitter &&
127 
                  <i
128 
                    onClick={() => window.location.href = twitter}
129 
                    className="cursor-pointer fa fa-twitter"
130 
                    style={{ fontSize: '1.4rem' }}
131 
                  />
132 
                }
133 
                {instagram &&
134 
                  <i
135 
                    onClick={() => window.location.href = instagram}
136 
                    className="fa fa-instagram cursor-pointer"
137 
                    style={{ fontSize: '1.4rem' }}
138 
                  />
139 
                }
3930 stevensc 140 
              </div>
5411 stevensc 141 
              <div className="container horizontal-list">
142 
                <div className="row ">
143 
                  <div className="members_count">
144 
                    <b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>
145 
                    <p style={{ fontSize: '1rem' }} className="ellipsis">Seguidores</p>
146 
                  </div>
147 
                  {authorizedLinks?.link_unfollow &&
148 
                    <button
149 
                      className="btn btn-secondary"
150 
                      onClick={() => handleButtonAction(authorizedLinks?.link_unfollow)}
151 
                    >
152 
                      Dejar de seguir
153 
                    </button>
3930 stevensc 154 
                  }
5411 stevensc 155 
                  {authorizedLinks?.link_follow &&
156 
                    <button
157 
                      className="btn btn-secondary"
158 
                      onClick={() => handleButtonAction(authorizedLinks?.link_follow)}
159 
                    >
160 
                      Seguir
161 
                    </button>
3930 stevensc 162 
                  }
5411 stevensc 163 
                  {
164 
                    (authorizedLinks?.link_request && authorizedLinks?.link_unfollow) &&
165 
                    <button
166 
                      className="btn btn-tertiary"
167 
                      onClick={() => handleButtonAction(authorizedLinks?.link_request)}
168 
                    >
169 
                      ¿Trabaja en esta empresa?
170 
                    </button>
3930 stevensc 171 
                  }
5411 stevensc 172 
                  {authorizedLinks?.link_accept &&
173 
                    <button
174 
                      className="btn btn-tertiary"
175 
                      onClick={() => handleButtonAction(authorizedLinks?.link_accept)}
176 
                    >
177 
                      Aceptar
178 
                    </button>
179 
                  }
180 
                  {authorizedLinks?.link_cancel &&
181 
                    <button
182 
                      title=""
183 
                      className="btn btn-tertiary"
184 
                      onClick={() => handleButtonAction(authorizedLinks?.link_cancel)}
185 
                    >
186 
                      Cancelar
187 
                    </button>
188 
                  }
189 
                  {authorizedLinks?.link_reject &&
190 
                    <button
191 
                      title=""
192 
                      className="btn btn-tertiary"
193 
                      onClick={() => handleButtonAction(authorizedLinks?.link_reject)}
194 
                    >
195 
                      Rechazar
196 
                    </button>
197 
                  }
198 
                  {authorizedLinks?.link_leave &&
199 
                    <button
200 
                      data-link="{{>link_leave}}"
201 
                      title=""
202 
                      className="btn btn-tertiary"
203 
                      onClick={() => handleButtonAction(authorizedLinks?.link_leave)}
204 
                    >
205 
                      Abandonar esta empresa
206 
                    </button>
207 
                  }
208 
                  {authorizedLinks?.link_contact &&
209 
                    <a
210 
                      href={authorizedLinks?.link_contact}
211 
                      className="btn btn-primary"
212 
                    >
213 
                      Mensaje
214 
                    </a>
215 
                  }
3929 stevensc 216 
                </div>
217 
              </div>
218 
            </div>
3930 stevensc 219 
          </div>
5411 stevensc 220 
          <div className="d-none d-md-block">
221 
            <CompanyFollowersHelper companyId={companyId} />
222 
          </div>
223 
        </div>
224 
        <div className="main-ws-sec">
225 
          <div className="user-tab-sec rewivew">
226 
            {!initialLoading &&
227 
              <div className="row">
228 
                {isFollower &&
229 
                  <div className="col text-left pl-0">
3930 stevensc 230 
                    <button
231 
                      className="btn btn-link p-0 text-decoration-none"
5411 stevensc 232 
                      onClick={() => changeCurrentTab(TABS.FEEDS)}
3930 stevensc 233 
                      style={{ padding: '0 !important' }}
234 
                    >
5411 stevensc 235 
                      <span className="p-0 default-link font-weight-bold text-dark">Ver Publicaciones</span>
3930 stevensc 236 
                    </button>
2442 stevensc 237 
                  </div>
5411 stevensc 238 
                }
239 
                <div className="col text-right pr-0">
240 
                  <button
241 
                    className="btn btn-link p-0 text-decoration-none"
242 
                    onClick={() => changeCurrentTab(TABS.INFO)}
243 
                    style={{ padding: '0 !important' }}
244 
                  >
245 
                    <span className="p-0 default-link font-weight-bold text-dark">Ver Información</span>
246 
                  </button>
3929 stevensc 247 
                </div>
3930 stevensc 248 
              </div>
249 
            }
250 
          </div>
5411 stevensc 251 
          {
252 
            currentTab === TABS.FEEDS &&
253 
            <div
254 
              className="product-feed-tab animated fadeIn"
255 
              id="feed-dd feed"
256 
              style={{ display: 'block' }}
257 
            >
258 
              <div className="posts-section">
259 
                <FeedSection
260 
                  routeTimeline={timeline}
261 
                  image={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ''}`}
262 
                />
3930 stevensc 263 
              </div>
1 www 264 
            </div>
5411 stevensc 265 
          }
266 
          {
267 
            currentTab === TABS.INFO &&
268 
            < div
269 
              className="product-feed-tab animated fadeIn"
270 
              id="feed-dd info"
271 
              style={{ display: 'block' }}
272 
            >
273 
              {
274 
                overview &&
275 
                <div className="user-profile-extended-ov">
276 
                  <h3>Visión general</h3>
277 
                  <span>{parse(overview)}</span>
278 
                </div>
279 
              }
280 
              {
281 
                locations &&
282 
                <div className="user-profile-extended-ov st2">
283 
                  <h3>Ubicación</h3>
284 
                  <span>
285 
                    {locations.map(
286 
                      ({ formatted_address, is_main }, index) => (
287 
                        <React.Fragment key={index}>
288 
                          {index >= 0 ? <hr /> : ''}
289 
                          <p>
290 
                            {`${formatted_address} ${is_main === 'y' ? '(Principal)' : ''
291 
                              }`}
292 
                          </p>
293 
                        </React.Fragment>
294 
                      )
295 
                    )}
296 
                  </span>
297 
                </div>
298 
              }
299 
              {
300 
                industry &&
301 
                <div className="user-profile-ov">
302 
                  <h3>Industria</h3>
303 
                  <span>{industry}</span>
304 
                </div>
305 
              }
306 
              {
307 
                companySize &&
308 
                <div className="user-profile-ov">
309 
                  <h3>Tamaño de la empresa</h3>
310 
                  <span>{companySize}</span>
311 
                </div>
312 
              }
313 
              {
314 
                foundationYear &&
315 
                <div className="user-profile-ov">
316 
                  <h3>Año de fundación</h3>
317 
                  <span>{foundationYear}</span>
318 
                </div>
319 
              }
320 
              {
321 
                website &&
322 
                <div className="user-profile-ov">
323 
                  <h3>Página web</h3>
324 
                  <span>{website}</span>
325 
                </div>
326 
              }
327 
            </div>
328 
          }
329 
          {
330 
            initialLoading &&
331 
            <div
332 
              style={{
333 
                display: 'flex',
334 
                justifyContent: 'center',
335 
                alignItems: 'center'
336 
              }}
337 
            >
338 
              <Spinner />
339 
            </div>
340 
          }
1 www 341 
        </div>
5411 stevensc 342 
        <div className="right-sidebar">
343 
          <SuggestWidget title='Empresas similares:' url={`/helpers/company-suggestion/${companyId}`} />
344 
        </div>
345 
      </main>
3930 stevensc 346 
    </>
5406 stevensc 347 
  )
348 
}
1 www 349 
 
350 
const mapDispatchToProps = {
351 
  addNotification: (notification) => addNotification(notification),
5406 stevensc 352 
  setTimelineUrl: (url) => setTimelineUrl(url)
353 
}
1 www 354 
 
5406 stevensc 355 
export default connect(null, mapDispatchToProps)(View)