Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2041 | Rev 2246 | 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 from "react";
2 
import { useState } from "react";
3 
import { connect } from "react-redux";
4 
import FeedSection from "../../../dashboard/components/feed-section/FeedSection";
5 
import ShareFeed from "../../../dashboard/components/share-feed/ShareFeed";
6 
import { setTimelineUrl } from "../../../redux/feed/feed.actions";
7 
import { feedTypes } from "../../../redux/feed/feed.types";
8 
import GroupMembersHelper from "../../../shared/helpers/group-members-helper/GroupMembersHelper";
9 
import SuggestedGroupsHelper from "../../../shared/helpers/suggested-groups-helper/SuggestedGroupsHelper";
10 
import styled from "styled-components";
11 
import parse from "html-react-parser";
12 
import { axios } from "../../../utils";
13 
import { addNotification } from "../../../redux/notification/notification.actions";
14 
 
15 
const StyledTabWrapper = styled.div`
16 
  ul {
17 
    display: flex;
18 
    li a {
19 
      margin: 1rem;
20 
      width: 25px;
21 
      display: flex;
22 
      flex-direction: column;
23 
      justify-content: center;
24 
      align-items: center;
25 
      color: black;
26 
      img {
27 
        filter: grayscale(100%);
28 
      }
29 
    }
30 
    li.active a {
31 
      img {
32 
        filter: grayscale(0);
33 
      }
34 
    }
35 
  }
36 
`;
37 
 
38 
const View = (props) => {
39 
  // backendVars Destructuring
40 
  const {
41 
    routeTimeline,
42 
    groupId,
43 
    cover,
44 
    image,
45 
    totalMembers,
46 
    name,
47 
    overview,
48 
    groupType,
49 
    industry,
50 
    privacy,
51 
    accessibility,
52 
    website,
53 
    withoutFeeds,
54 
    linkInmail
55 
  } = props.backendVars;
1068 stevensc 56 
 
1 www 57 
  // redux destructuring
58 
  const { setTimelineUrl, addNotification: AddNotification } = props;
59 
 
60 
  const groupTabs = {
61 
    FEED_TAB: "FEED_TAB",
62 
    INFO_TAB: "INFO_TAB",
63 
  };
1068 stevensc 64 
 
1 www 65 
  // states
66 
  const [currentTab, setCurrentTab] = useState(withoutFeeds ? groupTabs.INFO_TAB : groupTabs.FEED_TAB);
67 
  const [actionLinks, setActionLinks] = useState({})
68 
  const [linkInvite, setLinkInvite] = useState('')
1068 stevensc 69 
 
1 www 70 
  setTimelineUrl(routeTimeline);
71 
  const load = () =>{
72 
    axios.get('')
73 
      .then(res => {
74 
        if(res.data.success){
75 
          setActionLinks(res.data.data)
76 
        }else{
77 
          AddNotification({
78 
            type: 'error',
79 
            payload: res.data.data
80 
          })
81 
        }
82 
      })
83 
      .catch(err => {
84 
        console.log('>>: err > ', err)
85 
      })
86 
  }
1068 stevensc 87 
 
1 www 88 
  React.useEffect(() =>{
89 
    load()
90 
  }, [])
1068 stevensc 91 
 
1 www 92 
  const handleActionLink = (url) => {
93 
    axios.post(url)
94 
      .then(res => {
95 
        if(res.data.success){
96 
          AddNotification({
97 
            style: 'success',
98 
            msg: res.data.data
99 
          })
100 
          window.location.reload()
101 
        }else{
102 
          AddNotification({
103 
            style: 'error',
104 
            msg: res.data.data
105 
          })
106 
        }
107 
      })
108 
      .catch(err => {
109 
        console.log('>>: err > ', err)
110 
      })
111 
  }
1068 stevensc 112 
 
1 www 113 
  return (
114 
    <React.Fragment>
115 
      <section className="cover-sec">
116 
        <img
117 
          // src="<?php echo $this->url('storage', ['type' => 'group-cover', 'code' => $group_id_encrypted, 'filename' => $cover]) ?>"
118 
          src={`/storage/type/group-cover/code/${groupId}/${
119 
            cover ? `filename/${cover}` : ""
120 
          }`}
121 
          alt="cover-image"
122 
        />
123 
      </section>
124 
      <main>
125 
        <div className="main-section">
1765 steven 126 
          <div className="ph-5">
1 www 127 
            <div className="main-section-data">
128 
              <div className="row">
129 
                <div className="col-lg-3">
1782 steven 130 
                  <div className="main-left-sidebar border-radius border-gray">
131 
                    <div className="user_profile m-0 p-1">
1 www 132 
                      <div className="user-pro-img">
133 
                        <img
134 
                          // src="<?php echo $this->url('storage', ['type' => 'group', 'code' => $group_id_encrypted, 'filename' => $image]) ?>"
135 
                          src={`/storage/type/group/code/${groupId}/${
136 
                            image ? `filename/${image}` : ""
137 
                          }`}
138 
                          alt="profile-image"
139 
                        />
140 
                      </div>
141 
                      <div className="user_pro_status">
142 
                        <h1  className="font-weight-bold" style={{fontSize: '1.5rem'}} >{name}</h1>
143 
                        <ul className="flw-status">
1756 steven 144 
                          <div
145 
                            className="container horizontal-list"
146 
                          >
147 
                            <div
148 
                              className="row "
149 
                            >
150 
                              <div className="col">
1757 steven 151 
                                <p>Miembros</p>
152 
                                <b style={{fontSize: '1rem'}} >{totalMembers}</b>
153 
                              </div>
154 
                              <div className="col">
1756 steven 155 
                                <a
156 
                                  href={linkInmail || '#'}
1759 steven 157 
                                  className="btn btn-primary"
1758 steven 158 
                                  title=""
159 
                                >
1760 steven 160 
                                  Mensaje
1758 steven 161 
                                </a>
162 
                              </div>
1756 steven 163 
                              {
164 
                                actionLinks.link_accept && (
165 
                                  <div
166 
                                    className="col"
167 
                                  >
168 
                                    <button
169 
                                      onClick={() => handleActionLink(actionLinks.link_accept)}
170 
                                      className="btn btn-primary"
171 
                                      title=""
172 
                                    >
173 
                                      <span className="ellipsis">
174 
                                        Aceptar invitacion
175 
                                      </span>
176 
                                    </button>
177 
                                  </div>
178 
                                )
179 
                              }
180 
                              {
181 
                                actionLinks.link_cancel && (
182 
                                  <div
183 
                                    className="col"
184 
                                  >
185 
                                    <button
186 
                                      onClick={() => handleActionLink(actionLinks.link_cancel)}
187 
                                      className="btn btn-primary"
188 
                                      title=""
189 
                                    >
190 
                                      <span className="ellipsis">
191 
                                        Cancelar invitacion
192 
                                      </span>
193 
                                    </button>
194 
                                  </div>
195 
                                )
196 
                              }
197 
                              {
198 
                                (!linkInvite && actionLinks.link_leave) && (
199 
                                  <div
200 
                                    className="col"
201 
                                  >
202 
                                    <button
203 
                                      onClick={() => handleActionLink(actionLinks.link_leave)}
2210 steven 204 
                                      className="btn btn-primary"
1756 steven 205 
                                      title=""
206 
                                    >
207 
                                      <span className="ellipsis">
208 
                                        Abandonar grupo
209 
                                      </span>
210 
                                    </button>
211 
                                  </div>
212 
                                )
213 
                              }
214 
                              {
215 
                                actionLinks.link_request && (
216 
                                  <div
217 
                                    className="col"
218 
                                  >
219 
                                    <button
220 
                                      onClick={() => handleActionLink(actionLinks.link_request)}
221 
                                      className="btn btn-primary"
222 
                                      title=""
223 
                                    >
224 
                                      Solicitar membresia
225 
                                    </button>
226 
                                  </div>
227 
                                )
228 
                              }
1785 steven 229 
                              {
230 
                                actionLinks.link_request && (
231 
                                  <div className="col">
232 
                                    <button
233 
                                      onClick={() => handleActionLink(actionLinks.link_request)}
234 
                                      className="btn btn-primary"
235 
                                      title=""
236 
                                    >
237 
                                      Solicitar membresia
238 
                                    </button>
239 
                                  </div>
240 
                                )
241 
                              }
1756 steven 242 
                            </div>
243 
                          </div>
244 
 
1 www 245 
                        </ul>
246 
                      </div>
247 
                    </div>
248 
                  </div>
249 
                  <GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />
250 
                </div>
251 
 
252 
                <div className="col-lg-6">
253 
                  <div className="message-btn d-block d-md-none d-lg-none d-sm-none">
1756 steven 254 
 
1 www 255 
                  </div>
256 
                  <div className="main-ws-sec">
257 
                    <div className="user-tab-sec">
258 
                      {
259 
                        !withoutFeeds && (
1763 steven 260 
                          <div className="row">
261 
                            <div className="col text-left pl-0">
262 
                              <button
1 www 263 
                                className={` ${
264 
                                  currentTab === groupTabs.FEED_TAB ? "active" : ""
1763 steven 265 
                                } animated fadeIn btn btn-link p-0 text-decoration-none`}
1 www 266 
                                onClick={(e) => {
267 
                                  e.preventDefault();
268 
                                  setCurrentTab(groupTabs.FEED_TAB);
2041 steven 269 
 
1 www 270 
                                }}
271 
                              >
1763 steven 272 
                                <span className="ellipsis text-dark font-weight-bold">Ver Publicaciones</span>
273 
                              </button>
274 
                            </div>
275 
                            <div className="col text-right pl-0">
276 
                              <button
277 
                                className={` ${
2032 steven 278 
                                  currentTab === groupTabs.INFO_TAB ? "active" : ""
1763 steven 279 
                                } animated fadeIn btn btn-link p-0 text-decoration-none`}
1 www 280 
                                onClick={(e) => {
281 
                                  e.preventDefault();
2032 steven 282 
                                  setCurrentTab(groupTabs.INFO_TAB);
1 www 283 
                                }}
284 
                              >
2032 steven 285 
                                <span className="ellipsis text-dark font-weight-bold">Ver Información</span>
1763 steven 286 
                              </button>
287 
                            </div>
288 
                          </div>
1 www 289 
                        )
290 
                      }
291 
                      {/* <!-- tab-feed end--> */}
292 
                    </div>
293 
                    {/* <!--user-tab-sec end--> */}
294 
 
295 
                    <div
296 
                      className="product-feed-tab animated fadeIn"
297 
                      id="feed-dd"
298 
                      style={{
299 
                        display:
300 
                          currentTab === groupTabs.FEED_TAB ? "block" : "none",
301 
                      }}
302 
                    >
303 
                      <div className="">
304 
                        <ShareFeed
305 
                          feedType={feedTypes.GROUP}
306 
                          postUrl={`/feed/add/group/${groupId}`}
307 
                        />
308 
                      </div>
309 
                      {/* <!--posts-section star--> */}
310 
                      <div className="posts-section">
311 
                        <FeedSection routeTimeline={routeTimeline} />
312 
                      </div>
313 
                      {/* <!--posts-section end--> */}
314 
                    </div>
315 
                    {/* <!--product-feed-tab end--> */}
316 
 
317 
                    <div
318 
                      className="product-feed-tab  animated fadeIn"
319 
                      id="info-dd"
320 
                      style={{
321 
                        display:
322 
                          currentTab === groupTabs.INFO_TAB ? "block" : "none",
323 
                      }}
324 
                    >
325 
                      <div className="main-ws-sec">
326 
                        {/* <!--user-tab-sec start--> */}
327 
                        {!!overview && (
328 
                          <div className="user-profile-extended-ov">
329 
                            <h3>Visión General</h3>
330 
                            <span id="overview-description">
331 
                              {parse(overview)}
332 
                            </span>
333 
                          </div>
334 
                        )}
335 
                        {/* <!--user-tab-sec endit--> */}
336 
 
337 
                        {/* <!--user-tab-sec start--> */}
338 
                        {!!groupType && (
339 
                          <div className="user-profile-extended-ov">
340 
                            <h3>Tipo</h3>
341 
                            <span id="overview-type">{groupType}</span>
342 
                          </div>
343 
                        )}
344 
                        {/* <!--user-tab-sec endit--> */}
345 
 
346 
                        {/* <!--user-tab-sec start--> */}
347 
                        {!!industry && (
348 
                          <div className="user-profile-extended-ov">
349 
                            <h3>Industria</h3>
350 
                            <span id="overview-industry">{industry}</span>
351 
                          </div>
352 
                        )}
353 
                        {/* <!--user-tab-sec endit--> */}
354 
 
355 
                        {/* <!--user-tab-sec start--> */}
356 
                        {/* <?php if($privacy) : ?> */}
357 
                        {!!privacy && (
358 
                          <div className="user-profile-extended-ov">
359 
                            <h3>Privacidad</h3>
360 
                            <span id="overview-privacy">{privacy}</span>
361 
                          </div>
362 
                        )}
363 
                        {/* <!--user-tab-sec endit--> */}
364 
 
365 
                        {/* <!--user-tab-sec start--> */}
366 
                        {!!accessibility && (
367 
                          <div className="user-profile-extended-ov">
368 
                            <h3>Accesibilidad</h3>
369 
                            <span id="overview-accessibility">
370 
                              {accessibility}
371 
                            </span>
372 
                          </div>
373 
                        )}
374 
                        {/* <!--user-tab-sec endit--> */}
375 
 
376 
                        {/* <!--user-tab-sec start--> */}
377 
                        {!!website && (
378 
                          <div className="user-profile-extended-ov">
379 
                            <h3>Página Web</h3>
380 
                            <span id="overview-website">{website}</span>
381 
                          </div>
382 
                        )}
383 
                        {/* <!--user-tab-sec endit--> */}
384 
 
385 
                        {/* <!--user-profile-ov end--> */}
386 
                      </div>
387 
                      {/* <!--main-ws-sec end--> */}
388 
                    </div>
389 
                  </div>
390 
                </div>
391 
                {/* <!--main-ws-sec end--> */}
392 
 
393 
                <div className="col-lg-3 d-sm-none d-none d-md-block d-lg-block">
1786 steven 394 
                  <div className="right-sidebar border-radius border-gray">
1 www 395 
                    {/* <?php echo $this->similarGroupsHelper($group_id) ?> */}
396 
                    <SuggestedGroupsHelper groupId={groupId} />
397 
                  </div>
398 
                </div>
399 
              </div>
400 
            </div>
401 
          </div>
402 
        </div>
403 
      </main>
404 
    </React.Fragment>
405 
  );
406 
};
407 
 
408 
const mapDispatchToProps = {
409 
  setTimelineUrl: (url) => setTimelineUrl(url),
410 
  addNotification: (notification) => addNotification(notification),
411 
};
412 
 
413 
 
414 
export default connect(null, mapDispatchToProps)(View);