Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2946 | Rev 3845 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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