Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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