Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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