Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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