Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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