Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2374 | Rev 2378 | 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">
2375 stevensc 127 
              <div className="main-left-sidebar ">
128 
                <div className="user_profile border-gray overflow-hidden m-0 p-1">
129 
                  <div className="user-pro-img">
130 
                    <img
131 
                      src={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
132 
                      alt="profile-image"
133 
                    />
134 
                  </div>
135 
                  <div className="user_pro_status">
136 
                    <h1 className="font-weight-bold" style={{ fontSize: '1.5rem' }} >{name}</h1>
137 
                    <ul className="flw-status">
138 
                      <div
139 
                        className="container horizontal-list"
140 
                      >
141 
                        <div className="row ">
142 
                          <div className="col">
143 
                            <a
144 
                              href={linkInmail || '#'}
145 
                              className="btn btn-primary"
146 
                              title=""
147 
                            >
148 
                              Mensaje
149 
                            </a>
2372 stevensc 150 
                          </div>
2375 stevensc 151 
                          <div className="col">
152 
                            <p>Miembros</p>
153 
                            <b style={{ fontSize: '1rem' }} >{totalMembers}</b>
154 
                          </div>
155 
                          {
156 
                            actionLinks.link_accept && (
157 
                              <div className="col">
158 
                                <button
159 
                                  onClick={() => handleActionLink(actionLinks.link_accept)}
160 
                                  className="btn btn-primary"
161 
                                  title=""
162 
                                >
163 
                                  <span className="ellipsis">
164 
                                    Aceptar invitacion
165 
                                  </span>
166 
                                </button>
167 
                              </div>
168 
                            )
169 
                          }
170 
                          {
171 
                            actionLinks.link_cancel && (
172 
                              <div className="col">
173 
                                <button
174 
                                  onClick={() => handleActionLink(actionLinks.link_cancel)}
175 
                                  className="btn btn-primary"
176 
                                  title=""
177 
                                >
178 
                                  <span className="ellipsis">
179 
                                    Cancelar invitacion
180 
                                  </span>
181 
                                </button>
182 
                              </div>
183 
                            )
184 
                          }
185 
                          {
186 
                            (!linkInvite && actionLinks.link_leave) && (
187 
                              <div className="col">
188 
                                <button
189 
                                  onClick={() => handleActionLink(actionLinks.link_leave)}
190 
                                  className="btn btn-primary"
191 
                                  title=""
192 
                                >
193 
                                  <span className="ellipsis">
194 
                                    Abandonar grupo
195 
                                  </span>
196 
                                </button>
197 
                              </div>
198 
                            )
199 
                          }
200 
                          {
201 
                            actionLinks.link_request && (
202 
                              <div className="col">
203 
                                <button
204 
                                  onClick={() => handleActionLink(actionLinks.link_request)}
205 
                                  className="btn btn-primary"
206 
                                  title=""
207 
                                >
208 
                                  Solicitar membresia
209 
                                </button>
210 
                              </div>
211 
                            )
212 
                          }
2372 stevensc 213 
                        </div>
2375 stevensc 214 
                      </div>
2246 stevensc 215 
 
2375 stevensc 216 
                    </ul>
1 www 217 
                  </div>
218 
                </div>
2372 stevensc 219 
                <GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />
2375 stevensc 220 
              </div>
2372 stevensc 221 
              <div className="main-ws-sec">
222 
                <div className="user-tab-sec">
223 
                  {
224 
                    !withoutFeeds && (
225 
                      <div className="row">
226 
                        <div className="col text-left pl-0">
227 
                          <button
228 
                            className={` ${currentTab === groupTabs.FEED_TAB ? "active" : ""
229 
                              } animated fadeIn btn btn-link p-0 text-decoration-none`}
230 
                            onClick={(e) => {
231 
                              e.preventDefault();
232 
                              setCurrentTab(groupTabs.FEED_TAB);
1 www 233 
 
2372 stevensc 234 
                            }}
235 
                          >
236 
                            <span className="ellipsis text-dark font-weight-bold">Ver Publicaciones</span>
237 
                          </button>
238 
                        </div>
239 
                        <div className="col text-right pl-0">
240 
                          <button
241 
                            className={` ${currentTab === groupTabs.INFO_TAB ? "active" : ""
242 
                              } animated fadeIn btn btn-link p-0 text-decoration-none`}
243 
                            onClick={(e) => {
244 
                              e.preventDefault();
245 
                              setCurrentTab(groupTabs.INFO_TAB);
246 
                            }}
247 
                          >
248 
                            <span className="ellipsis text-dark font-weight-bold">Ver Información</span>
249 
                          </button>
250 
                        </div>
251 
                      </div>
252 
                    )
253 
                  }
254 
                  {/* <!-- tab-feed end--> */}
255 
                </div>
256 
                {/* <!--user-tab-sec end--> */}
2246 stevensc 257 
 
2372 stevensc 258 
                <div
259 
                  className="product-feed-tab animated fadeIn"
260 
                  id="feed-dd"
261 
                  style={{
262 
                    display:
263 
                      currentTab === groupTabs.FEED_TAB ? "block" : "none",
264 
                  }}
265 
                >
266 
                  <ShareFeed
267 
                    feedType={feedTypes.GROUP}
268 
                    postUrl={`/feed/add/group/${groupId}`}
269 
                  />
270 
                  {/* <!--posts-section star--> */}
271 
                  <div className="posts-section">
272 
                    <FeedSection routeTimeline={routeTimeline} />
1 www 273 
                  </div>
2372 stevensc 274 
                  {/* <!--posts-section end--> */}
275 
                </div>
276 
                {/* <!--product-feed-tab end--> */}
277 
 
278 
                <div
279 
                  className="product-feed-tab  animated fadeIn"
280 
                  id="info-dd"
281 
                  style={{
282 
                    display:
283 
                      currentTab === groupTabs.INFO_TAB ? "block" : "none",
284 
                  }}
285 
                >
1 www 286 
                  <div className="main-ws-sec">
2372 stevensc 287 
                    {/* <!--user-tab-sec start--> */}
288 
                    {!!overview && (
289 
                      <div className="user-profile-extended-ov">
290 
                        <h3>Visión General</h3>
291 
                        <span id="overview-description">
292 
                          {parse(overview)}
293 
                        </span>
294 
                      </div>
295 
                    )}
296 
                    {/* <!--user-tab-sec endit--> */}
2246 stevensc 297 
 
2372 stevensc 298 
                    {/* <!--user-tab-sec start--> */}
299 
                    {!!groupType && (
300 
                      <div className="user-profile-extended-ov">
301 
                        <h3>Tipo</h3>
302 
                        <span id="overview-type">{groupType}</span>
303 
                      </div>
304 
                    )}
305 
                    {/* <!--user-tab-sec endit--> */}
1 www 306 
 
2372 stevensc 307 
                    {/* <!--user-tab-sec start--> */}
308 
                    {!!industry && (
309 
                      <div className="user-profile-extended-ov">
310 
                        <h3>Industria</h3>
311 
                        <span id="overview-industry">{industry}</span>
1 www 312 
                      </div>
2372 stevensc 313 
                    )}
314 
                    {/* <!--user-tab-sec endit--> */}
1 www 315 
 
2372 stevensc 316 
                    {/* <!--user-tab-sec start--> */}
317 
                    {/* <?php if($privacy) : ?> */}
318 
                    {!!privacy && (
319 
                      <div className="user-profile-extended-ov">
320 
                        <h3>Privacidad</h3>
321 
                        <span id="overview-privacy">{privacy}</span>
322 
                      </div>
323 
                    )}
324 
                    {/* <!--user-tab-sec endit--> */}
1 www 325 
 
2372 stevensc 326 
                    {/* <!--user-tab-sec start--> */}
327 
                    {!!accessibility && (
328 
                      <div className="user-profile-extended-ov">
329 
                        <h3>Accesibilidad</h3>
330 
                        <span id="overview-accessibility">
331 
                          {accessibility}
332 
                        </span>
333 
                      </div>
334 
                    )}
335 
                    {/* <!--user-tab-sec endit--> */}
1 www 336 
 
2372 stevensc 337 
                    {/* <!--user-tab-sec start--> */}
338 
                    {!!website && (
339 
                      <div className="user-profile-extended-ov">
340 
                        <h3>Página Web</h3>
341 
                        <span id="overview-website">{website}</span>
342 
                      </div>
343 
                    )}
344 
                    {/* <!--user-tab-sec endit--> */}
1 www 345 
 
2372 stevensc 346 
                    {/* <!--user-profile-ov end--> */}
1 www 347 
                  </div>
2372 stevensc 348 
                  {/* <!--main-ws-sec end--> */}
1 www 349 
                </div>
350 
              </div>
2372 stevensc 351 
              <SuggestedGroupsHelper groupId={groupId} />
1 www 352 
            </div>
353 
          </div>
354 
        </div>
355 
      </main>
356 
    </React.Fragment>
357 
  );
358 
};
359 
 
360 
const mapDispatchToProps = {
361 
  setTimelineUrl: (url) => setTimelineUrl(url),
362 
  addNotification: (notification) => addNotification(notification),
363 
};
364 
 
365 
 
366 
export default connect(null, mapDispatchToProps)(View);