Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2248 | Rev 2255 | 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('')
2246 stevensc 69 
 
1 www 70 
  setTimelineUrl(routeTimeline);
2246 stevensc 71 
  const load = () => {
1 www 72 
    axios.get('')
73 
      .then(res => {
2246 stevensc 74 
        if (res.data.success) {
1 www 75 
          setActionLinks(res.data.data)
2246 stevensc 76 
        } else {
1 www 77 
          AddNotification({
78 
            type: 'error',
79 
            payload: res.data.data
80 
          })
81 
        }
82 
      })
83 
      .catch(err => {
84 
        console.log('>>: err > ', err)
85 
      })
86 
  }
2246 stevensc 87 
 
88 
  React.useEffect(() => {
1 www 89 
    load()
90 
  }, [])
1068 stevensc 91 
 
1 www 92 
  const handleActionLink = (url) => {
93 
    axios.post(url)
94 
      .then(res => {
2246 stevensc 95 
        if (res.data.success) {
1 www 96 
          AddNotification({
97 
            style: 'success',
98 
            msg: res.data.data
99 
          })
100 
          window.location.reload()
2246 stevensc 101 
        } else {
1 www 102 
          AddNotification({
103 
            style: 'error',
104 
            msg: res.data.data
105 
          })
106 
        }
107 
      })
108 
      .catch(err => {
109 
        console.log('>>: err > ', err)
110 
      })
111 
  }
2246 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]) ?>"
2246 stevensc 118 
          src={`/storage/type/group-cover/code/${groupId}/${cover ? `filename/${cover}` : ""
119 
            }`}
1 www 120 
          alt="cover-image"
121 
        />
122 
      </section>
123 
      <main>
124 
        <div className="main-section">
1765 steven 125 
          <div className="ph-5">
1 www 126 
            <div className="main-section-data">
127 
              <div className="row">
128 
                <div className="col-lg-3">
1782 steven 129 
                  <div className="main-left-sidebar border-radius border-gray">
130 
                    <div className="user_profile m-0 p-1">
1 www 131 
                      <div className="user-pro-img">
132 
                        <img
133 
                          // src="<?php echo $this->url('storage', ['type' => 'group', 'code' => $group_id_encrypted, 'filename' => $image]) ?>"
2246 stevensc 134 
                          src={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""
135 
                            }`}
1 www 136 
                          alt="profile-image"
137 
                        />
138 
                      </div>
139 
                      <div className="user_pro_status">
2246 stevensc 140 
                        <h1 className="font-weight-bold" style={{ fontSize: '1.5rem' }} >{name}</h1>
1 www 141 
                        <ul className="flw-status">
1756 steven 142 
                          <div
143 
                            className="container horizontal-list"
144 
                          >
2254 stevensc 145 
                            <div className="row ">
1756 steven 146 
                              <div className="col">
147 
                                <a
148 
                                  href={linkInmail || '#'}
1759 steven 149 
                                  className="btn btn-primary"
1758 steven 150 
                                  title=""
151 
                                >
1760 steven 152 
                                  Mensaje
1758 steven 153 
                                </a>
154 
                              </div>
2254 stevensc 155 
                              <div className="col">
156 
                                <p>Miembros</p>
157 
                                <b style={{ fontSize: '1rem' }} >{totalMembers}</b>
158 
                              </div>
1756 steven 159 
                              {
160 
                                actionLinks.link_accept && (
2246 stevensc 161 
                                  <div className="col">
1756 steven 162 
                                    <button
163 
                                      onClick={() => handleActionLink(actionLinks.link_accept)}
164 
                                      className="btn btn-primary"
165 
                                      title=""
166 
                                    >
167 
                                      <span className="ellipsis">
168 
                                        Aceptar invitacion
169 
                                      </span>
170 
                                    </button>
171 
                                  </div>
172 
                                )
173 
                              }
174 
                              {
175 
                                actionLinks.link_cancel && (
2246 stevensc 176 
                                  <div className="col">
1756 steven 177 
                                    <button
178 
                                      onClick={() => handleActionLink(actionLinks.link_cancel)}
179 
                                      className="btn btn-primary"
180 
                                      title=""
181 
                                    >
182 
                                      <span className="ellipsis">
183 
                                        Cancelar invitacion
184 
                                      </span>
185 
                                    </button>
186 
                                  </div>
187 
                                )
188 
                              }
189 
                              {
190 
                                (!linkInvite && actionLinks.link_leave) && (
2246 stevensc 191 
                                  <div className="col">
1756 steven 192 
                                    <button
193 
                                      onClick={() => handleActionLink(actionLinks.link_leave)}
2210 steven 194 
                                      className="btn btn-primary"
1756 steven 195 
                                      title=""
196 
                                    >
197 
                                      <span className="ellipsis">
198 
                                        Abandonar grupo
199 
                                      </span>
200 
                                    </button>
201 
                                  </div>
202 
                                )
203 
                              }
204 
                              {
205 
                                actionLinks.link_request && (
1785 steven 206 
                                  <div className="col">
207 
                                    <button
208 
                                      onClick={() => handleActionLink(actionLinks.link_request)}
209 
                                      className="btn btn-primary"
210 
                                      title=""
211 
                                    >
212 
                                      Solicitar membresia
213 
                                    </button>
214 
                                  </div>
215 
                                )
216 
                              }
1756 steven 217 
                            </div>
218 
                          </div>
2246 stevensc 219 
 
1 www 220 
                        </ul>
221 
                      </div>
222 
                    </div>
223 
                  </div>
224 
                  <GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />
225 
                </div>
226 
 
227 
                <div className="col-lg-6">
228 
                  <div className="message-btn d-block d-md-none d-lg-none d-sm-none">
2246 stevensc 229 
 
1 www 230 
                  </div>
231 
                  <div className="main-ws-sec">
232 
                    <div className="user-tab-sec">
233 
                      {
234 
                        !withoutFeeds && (
1763 steven 235 
                          <div className="row">
236 
                            <div className="col text-left pl-0">
237 
                              <button
2246 stevensc 238 
                                className={` ${currentTab === groupTabs.FEED_TAB ? "active" : ""
239 
                                  } animated fadeIn btn btn-link p-0 text-decoration-none`}
1 www 240 
                                onClick={(e) => {
241 
                                  e.preventDefault();
242 
                                  setCurrentTab(groupTabs.FEED_TAB);
2246 stevensc 243 
 
1 www 244 
                                }}
245 
                              >
1763 steven 246 
                                <span className="ellipsis text-dark font-weight-bold">Ver Publicaciones</span>
247 
                              </button>
248 
                            </div>
249 
                            <div className="col text-right pl-0">
250 
                              <button
2246 stevensc 251 
                                className={` ${currentTab === groupTabs.INFO_TAB ? "active" : ""
252 
                                  } animated fadeIn btn btn-link p-0 text-decoration-none`}
1 www 253 
                                onClick={(e) => {
254 
                                  e.preventDefault();
2032 steven 255 
                                  setCurrentTab(groupTabs.INFO_TAB);
1 www 256 
                                }}
257 
                              >
2032 steven 258 
                                <span className="ellipsis text-dark font-weight-bold">Ver Información</span>
1763 steven 259 
                              </button>
260 
                            </div>
261 
                          </div>
1 www 262 
                        )
263 
                      }
264 
                      {/* <!-- tab-feed end--> */}
265 
                    </div>
266 
                    {/* <!--user-tab-sec end--> */}
267 
 
268 
                    <div
269 
                      className="product-feed-tab animated fadeIn"
270 
                      id="feed-dd"
271 
                      style={{
272 
                        display:
273 
                          currentTab === groupTabs.FEED_TAB ? "block" : "none",
274 
                      }}
275 
                    >
2246 stevensc 276 
                      <ShareFeed
277 
                        feedType={feedTypes.GROUP}
278 
                        postUrl={`/feed/add/group/${groupId}`}
279 
                      />
1 www 280 
                      {/* <!--posts-section star--> */}
281 
                      <div className="posts-section">
282 
                        <FeedSection routeTimeline={routeTimeline} />
283 
                      </div>
284 
                      {/* <!--posts-section end--> */}
285 
                    </div>
286 
                    {/* <!--product-feed-tab end--> */}
287 
 
288 
                    <div
289 
                      className="product-feed-tab  animated fadeIn"
290 
                      id="info-dd"
291 
                      style={{
292 
                        display:
293 
                          currentTab === groupTabs.INFO_TAB ? "block" : "none",
294 
                      }}
295 
                    >
296 
                      <div className="main-ws-sec">
297 
                        {/* <!--user-tab-sec start--> */}
298 
                        {!!overview && (
299 
                          <div className="user-profile-extended-ov">
300 
                            <h3>Visión General</h3>
301 
                            <span id="overview-description">
302 
                              {parse(overview)}
303 
                            </span>
304 
                          </div>
305 
                        )}
306 
                        {/* <!--user-tab-sec endit--> */}
307 
 
308 
                        {/* <!--user-tab-sec start--> */}
309 
                        {!!groupType && (
310 
                          <div className="user-profile-extended-ov">
311 
                            <h3>Tipo</h3>
312 
                            <span id="overview-type">{groupType}</span>
313 
                          </div>
314 
                        )}
315 
                        {/* <!--user-tab-sec endit--> */}
316 
 
317 
                        {/* <!--user-tab-sec start--> */}
318 
                        {!!industry && (
319 
                          <div className="user-profile-extended-ov">
320 
                            <h3>Industria</h3>
321 
                            <span id="overview-industry">{industry}</span>
322 
                          </div>
323 
                        )}
324 
                        {/* <!--user-tab-sec endit--> */}
325 
 
326 
                        {/* <!--user-tab-sec start--> */}
327 
                        {/* <?php if($privacy) : ?> */}
328 
                        {!!privacy && (
329 
                          <div className="user-profile-extended-ov">
330 
                            <h3>Privacidad</h3>
331 
                            <span id="overview-privacy">{privacy}</span>
332 
                          </div>
333 
                        )}
334 
                        {/* <!--user-tab-sec endit--> */}
335 
 
336 
                        {/* <!--user-tab-sec start--> */}
337 
                        {!!accessibility && (
338 
                          <div className="user-profile-extended-ov">
339 
                            <h3>Accesibilidad</h3>
340 
                            <span id="overview-accessibility">
341 
                              {accessibility}
342 
                            </span>
343 
                          </div>
344 
                        )}
345 
                        {/* <!--user-tab-sec endit--> */}
346 
 
347 
                        {/* <!--user-tab-sec start--> */}
348 
                        {!!website && (
349 
                          <div className="user-profile-extended-ov">
350 
                            <h3>Página Web</h3>
351 
                            <span id="overview-website">{website}</span>
352 
                          </div>
353 
                        )}
354 
                        {/* <!--user-tab-sec endit--> */}
355 
 
356 
                        {/* <!--user-profile-ov end--> */}
357 
                      </div>
358 
                      {/* <!--main-ws-sec end--> */}
359 
                    </div>
360 
                  </div>
361 
                </div>
362 
                {/* <!--main-ws-sec end--> */}
363 
 
364 
                <div className="col-lg-3 d-sm-none d-none d-md-block d-lg-block">
2248 stevensc 365 
                  {/* <?php echo $this->similarGroupsHelper($group_id) ?> */}
366 
                  <SuggestedGroupsHelper groupId={groupId} />
1 www 367 
                </div>
368 
              </div>
369 
            </div>
370 
          </div>
371 
        </div>
372 
      </main>
373 
    </React.Fragment>
374 
  );
375 
};
376 
 
377 
const mapDispatchToProps = {
378 
  setTimelineUrl: (url) => setTimelineUrl(url),
379 
  addNotification: (notification) => addNotification(notification),
380 
};
381 
 
382 
 
383 
export default connect(null, mapDispatchToProps)(View);