Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3892 | Rev 3906 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3892 Rev 3903
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
- 
 
 2 
import React, { useEffect, useState } from "react";
2 
import React from "react";
 3 
import parse from "html-react-parser";
3 
import { useState } from "react";
 4 
import { axios } from "../../../utils";
4 
import { connect } from "react-redux";
 5 
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";
 6 
import { setTimelineUrl } from "../../../redux/feed/feed.actions";
- 
 
 7 
import { addNotification } from "../../../redux/notification/notification.actions";
8 
import { feedTypes } from "../../../redux/feed/feed.types";
 8 
import { feedTypes } from "../../../redux/feed/feed.types";
- 
 
 9 
import FeedSection from "../../../dashboard/components/feed-section/FeedSection";
- 
 
 10 
import ShareFeed from "../../../dashboard/components/share-feed/ShareFeed";
9 
import GroupMembersHelper from "../../../shared/helpers/group-members-helper/GroupMembersHelper";
 11 
import GroupMembersHelper from "../../../shared/helpers/group-members-helper/GroupMembersHelper";
10 
import SuggestedGroupsHelper from "../../../shared/helpers/suggested-groups-helper/SuggestedGroupsHelper";
 12 
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";
 - 
 
Línea 14... Línea 13...
14 
 
 13 
 
15 
 
 14 
 
16 
const View = (props) => {
 15 
const View = (props) => {
Línea 31... Línea 30...
31 
    withoutFeeds,
 30 
    withoutFeeds,
32 
    linkInmail
 31 
    linkInmail
33 
  } = props.backendVars;
 32 
  } = props.backendVars;
Línea 34... Línea 33...
34 
 
 33 
 
35 
  // redux destructuring
 34 
  // redux destructuring
Línea 36... Línea 35...
36 
  const { setTimelineUrl, addNotification: AddNotification } = props;
 35 
  const { setTimelineUrl, addNotification } = props;
37 
 
 36 
 
38 
  const groupTabs = {
 37 
  const groupTabs = {
39 
    FEED_TAB: "FEED_TAB",
 38 
    FEED_TAB: "FEED_TAB",
Línea 43... Línea 42...
43 
  // states
 42 
  // states
44 
  const [currentTab, setCurrentTab] = useState(withoutFeeds ? groupTabs.INFO_TAB : groupTabs.FEED_TAB);
 43 
  const [currentTab, setCurrentTab] = useState(withoutFeeds ? groupTabs.INFO_TAB : groupTabs.FEED_TAB);
45 
  const [actionLinks, setActionLinks] = useState({})
 44 
  const [actionLinks, setActionLinks] = useState({})
46 
  const [linkInvite, setLinkInvite] = useState('')
 45 
  const [linkInvite, setLinkInvite] = useState('')
Línea 47... Línea -...
47 
 
 - 
 
- 
 
 46 
 
48 
  setTimelineUrl(routeTimeline);
 47 
 
49 
  const load = () => {
 48 
  const load = () => {
50 
    axios.get('')
 49 
    axios.get('')
51 
      .then(res => {
 50 
      .then(({ data }) => {
52 
        if (res.data.success) {
 51 
        if (!data.success) {
53 
          setActionLinks(res.data.data)
 - 
 
54 
        } else {
 - 
 
55 
          AddNotification({
 - 
 
56 
            type: 'error',
 - 
 
57 
            payload: res.data.data
 - 
 
58 
          })
 52 
          return addNotification({ style: 'error', msg: data.data })
- 
 
 53 
        }
59 
        }
 54 
        setActionLinks(data.data)
60 
      })
 - 
 
61 
      .catch(err => {
 55 
      })
62 
        console.log('>>: err > ', err)
 - 
 
63 
      })
 56 
      .catch(err => console.log('>>: err > ', err))
Línea 64... Línea 57...
64 
  }
 57 
  }
- 
 
 58 
 
65 
 
 59 
  useEffect(() => {
66 
  React.useEffect(() => {
 60 
    setTimelineUrl(routeTimeline);
Línea 67... Línea 61...
67 
    load()
 61 
    load()
68 
  }, [])
 62 
  }, [])
69 
 
 63 
 
70 
  const handleActionLink = (url) => {
 64 
  const handleActionLink = (url) => {
71 
    axios.post(url)
 - 
 
72 
      .then(res => {
 - 
 
73 
        if (res.data.success) {
 - 
 
74 
          AddNotification({
 - 
 
75 
            style: 'success',
 - 
 
76 
            msg: res.data.data
 - 
 
77 
          })
 - 
 
78 
          window.location.reload()
 65 
    axios.post(url)
79 
        } else {
 - 
 
80 
          AddNotification({
 - 
 
81 
            style: 'error',
 66 
      .then(({ data }) => {
- 
 
 67 
        if (!data.success) {
- 
 
 68 
          return addNotification({ style: 'error', msg: data.data })
82 
            msg: res.data.data
 69 
        }
83 
          })
 - 
 
84 
        }
 70 
        addNotification({ style: 'success', msg: data.data })
85 
      })
 - 
 
86 
      .catch(err => {
 71 
        window.location.reload()
Línea 87... Línea 72...
87 
        console.log('>>: err > ', err)
 72 
      })
88 
      })
 73 
      .catch(err => console.log('>>: err > ', err))
89 
  }
 74 
  }
90 
 
 75 
 
91 
  return (
 76 
  return (
92 
    <React.Fragment>
 77 
    <>
93 
      <section className="cover-sec">
 78 
      <section className="cover-sec">
94 
        <img
 79 
        <img
95 
          src={`/storage/type/group-cover/code/${groupId}/${cover ? `filename/${cover}` : ""}`}
 - 
 
96 
          alt="cover-image"
 80 
          src={`/storage/type/group-cover/code/${groupId}/${cover ? `filename/${cover}` : ""}`}
97 
        />
 - 
 
98 
      </section>
 81 
          alt="cover-image"
99 
      <main>
 82 
        />
100 
        <div className="main-section">
 83 
      </section>
101 
          <div className="ph-5">
 84 
      <main className="main-section">
102 
            <div className="main-section-data">
 85 
        <div className="main-section-data">
103 
              <div className="main-left-sidebar">
 86 
          <div className="main-left-sidebar">
104 
                <div className="user_profile">
 87 
            <div className="user_profile">
105 
                  <div className="user-pro-img">
 - 
 
106 
                    <img
 - 
 
107 
                      src={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
 - 
 
108 
                      alt="profile-image"
 - 
 
109 
                    />
 - 
 
110 
                  </div>
 - 
 
111 
                  <div className="user_pro_status">
 - 
 
112 
                    <h1 className="font-weight-bold" style={{ fontSize: '1.5rem' }} >{name}</h1>
 - 
 
113 
                    <ul className="flw-status">
 - 
 
114 
                      <div className="container horizontal-list">
 - 
 
115 
                        <div className="row ">
 - 
 
116 
                          {
 - 
 
117 
                            linkInmail &&
 - 
 
118 
                            <a
 - 
 
119 
                              href={linkInmail || '#'}
 - 
 
120 
                              className="btn btn-primary"
 - 
 
121 
                            >
 - 
 
122 
                              Contactar con el Administrador
 - 
 
123 
                            </a>
 - 
 
124 
                          }
 - 
 
125 
                          <div className="members_count">
 - 
 
126 
                            <b style={{ fontSize: '1rem' }} >{totalMembers}</b>
 - 
 
127 
                            <p>Miembros</p>
 - 
 
128 
                          </div>
 - 
 
129 
                          {
 - 
 
130 
                            actionLinks.link_accept &&
 - 
 
131 
                            <button
 - 
 
132 
                              onClick={() => handleActionLink(actionLinks.link_accept)}
 - 
 
133 
                              className="btn btn-primary"
 - 
 
134 
                            >
 - 
 
135 
                              Aceptar invitacion
 - 
 
136 
                            </button>
 - 
 
137 
                          }
 - 
 
138 
                          {
 - 
 
139 
                            actionLinks.link_cancel &&
 - 
 
140 
                            <button
 - 
 
141 
                              onClick={() => handleActionLink(actionLinks.link_cancel)}
 - 
 
142 
                              className="btn btn-primary"
 - 
 
143 
                            >
 - 
 
144 
                              Cancelar invitacion
 - 
 
145 
                            </button>
 - 
 
146 
                          }
 - 
 
147 
                          {
 - 
 
148 
                            (!linkInvite && actionLinks.link_leave) &&
 - 
 
149 
                            <button
 - 
 
150 
                              onClick={() => handleActionLink(actionLinks.link_leave)}
 - 
 
151 
                              className="btn btn-primary"
 - 
 
152 
                            >
 - 
 
153 
                              Abandonar grupo
 - 
 
154 
                            </button>
 - 
 
155 
                          }
 - 
 
156 
                          {
 - 
 
157 
                            actionLinks.link_request &&
 - 
 
158 
                            <button
 - 
 
159 
                              onClick={() => handleActionLink(actionLinks.link_request)}
 - 
 
160 
                              className="btn btn-primary"
 - 
 
161 
                            >
 - 
 
162 
                              {accessibility === 'Auto unirse' ? 'Unirse' : 'Solicitar membresia'}
 - 
 
163 
                            </button>
 - 
 
164 
                          }
 - 
 
165 
                        </div>
 - 
 
166 
                      </div>
 88 
              <div className="user-pro-img">
167 
 
 - 
 
168 
                    </ul>
 89 
                <img
169 
                  </div>
 90 
                  src={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
- 
 
 91 
                  alt="profile-image"
170 
                </div>
 92 
                />
- 
 
 93 
              </div>
- 
 
 94 
              <div className="user_pro_status">
171 
                <GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />
 95 
                <h1 className="font-weight-bold" style={{ fontSize: '1.5rem' }} >{name}</h1>
172 
              </div>
 96 
                <ul className="flw-status">
- 
 
 97 
                  <div className="container horizontal-list">
- 
 
 98 
                    <div className="row ">
173 
              <div className="main-ws-sec">
 99 
                      {
- 
 
 100 
                        linkInmail &&
- 
 
 101 
                        <a
- 
 
 102 
                          href={linkInmail || '#'}
- 
 
 103 
                          className="btn btn-primary"
174 
                <div className="user-tab-sec">
 104 
                        >
- 
 
 105 
                          Contactar con el Administrador
- 
 
 106 
                        </a>
- 
 
 107 
                      }
- 
 
 108 
                      <div className="members_count">
- 
 
 109 
                        <b style={{ fontSize: '1rem' }} >{totalMembers}</b>
175 
                  {
 110 
                        <p>Miembros</p>
176 
                    !withoutFeeds &&
 - 
 
177 
                    <div className="row">
 111 
                      </div>
178 
                      <div className="col text-left pl-0">
 112 
                      {
179 
                        <button
 - 
 
180 
                          className={` ${currentTab === groupTabs.FEED_TAB ? "active" : ""} animated fadeIn btn btn-link p-0 text-decoration-none`}
 - 
 
181 
                          onClick={(e) => {
 113 
                        actionLinks.link_accept &&
182 
                            e.preventDefault();
 114 
                        <button
183 
                            setCurrentTab(groupTabs.FEED_TAB);
 115 
                          onClick={() => handleActionLink(actionLinks.link_accept)}
- 
 
 116 
                          className="btn btn-primary"
184 
                          }}
 117 
                        >
185 
                        >
 118 
                          Aceptar invitacion
186 
                          <span className="font-weight-bold">Ver Publicaciones</span>
 119 
                        </button>
187 
                        </button>
 - 
 
188 
                      </div>
 120 
                      }
189 
                      <div className="col text-right pl-0">
 121 
                      {
190 
                        <button
 - 
 
191 
                          className={` ${currentTab === groupTabs.INFO_TAB ? "active" : ""} animated fadeIn btn btn-link p-0 text-decoration-none`}
 - 
 
192 
                          onClick={(e) => {
 122 
                        actionLinks.link_cancel &&
193 
                            e.preventDefault();
 123 
                        <button
194 
                            setCurrentTab(groupTabs.INFO_TAB);
 124 
                          onClick={() => handleActionLink(actionLinks.link_cancel)}
- 
 
 125 
                          className="btn btn-primary"
- 
 
 126 
                        >
- 
 
 127 
                          Cancelar invitacion
- 
 
 128 
                        </button>
- 
 
 129 
                      }
- 
 
 130 
                      {
195 
                          }}
 131 
                        (!linkInvite && actionLinks.link_leave) &&
- 
 
 132 
                        <button
- 
 
 133 
                          onClick={() => handleActionLink(actionLinks.link_leave)}
- 
 
 134 
                          className="btn btn-primary"
- 
 
 135 
                        >
- 
 
 136 
                          Abandonar grupo
- 
 
 137 
                        </button>
- 
 
 138 
                      }
- 
 
 139 
                      {
- 
 
 140 
                        actionLinks.link_request &&
- 
 
 141 
                        <button
- 
 
 142 
                          onClick={() => handleActionLink(actionLinks.link_request)}
- 
 
 143 
                          className="btn btn-primary"
196 
                        >
 144 
                        >
197 
                          <span className="font-weight-bold">Ver Información</span>
 - 
 
198 
                        </button>
 - 
 
199 
                      </div>
 - 
 
200 
                    </div>
 - 
 
201 
                  }
 - 
 
202 
                </div>
 - 
 
203 
                <div
 - 
 
204 
                  className="product-feed-tab animated fadeIn"
 - 
 
205 
                  style={{ display: currentTab === groupTabs.FEED_TAB ? "flex" : "none" }}
 - 
 
206 
                >
 - 
 
207 
                  <ShareFeed
 - 
 
208 
                    feedType={feedTypes.GROUP}
 - 
 
209 
                    postUrl={`/feed/add/group/${groupId}`}
 - 
 
210 
                    image={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
 - 
 
211 
                  />
 - 
 
212 
                  <div className="posts-section">
 - 
 
213 
                    <FeedSection
 145 
                          {accessibility === 'Auto unirse' ? 'Unirse' : 'Solicitar membresia'}
- 
 
 146 
                        </button>
214 
                      routeTimeline={routeTimeline}
 147 
                      }
215 
                      image={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
 148 
                    </div>
216 
                    />
 149 
                  </div>
217 
                  </div>
 150 
 
218 
                </div>
 151 
                </ul>
219 
                <div
 152 
              </div>
220 
                  className="product-feed-tab  animated fadeIn"
 - 
 
221 
                  style={{ display: currentTab === groupTabs.INFO_TAB ? "flex" : "none", }}
 153 
            </div>
222 
                >
 - 
 
223 
                  <div className="main-ws-sec">
 - 
 
224 
                    {!!overview &&
 - 
 
225 
                      <div className="user-profile-extended-ov">
 - 
 
226 
                        <h3>Visión General</h3>
 154 
            <GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />
227 
                        <span id="overview-description">
 155 
          </div>
228 
                          {parse(overview)}
 156 
          <div className="main-ws-sec">
229 
                        </span>
 157 
            <div className="user-tab-sec">
230 
                      </div>
 158 
              {
231 
                    }
 159 
                !withoutFeeds &&
232 
                    {!!groupType &&
 160 
                <div className="row">
233 
                      <div className="user-profile-extended-ov">
 - 
 
234 
                        <h3>Tipo</h3>
 - 
 
235 
                        <span id="overview-type">{groupType}</span>
 - 
 
236 
                      </div>
 161 
                  <div className="col text-left pl-0">
237 
                    }
 162 
                    <button
238 
                    {!!industry &&
 163 
                      className={` ${currentTab === groupTabs.FEED_TAB ? "active" : ""} animated fadeIn btn btn-link p-0 text-decoration-none`}
239 
                      <div className="user-profile-extended-ov">
 164 
                      onClick={(e) => {
240 
                        <h3>Industria</h3>
 - 
 
241 
                        <span id="overview-industry">{industry}</span>
 - 
 
242 
                      </div>
 - 
 
243 
                    }
 165 
                        e.preventDefault();
244 
                    {!!privacy &&
 166 
                        setCurrentTab(groupTabs.FEED_TAB);
245 
                      <div className="user-profile-extended-ov">
 167 
                      }}
246 
                        <h3>Privacidad</h3>
 - 
 
247 
                        <span id="overview-privacy">{privacy}</span>
 168 
                    >
248 
                      </div>
 169 
                      <span className="font-weight-bold">Ver Publicaciones</span>
249 
                    }
 170 
                    </button>
250 
                    {!!accessibility &&
 171 
                  </div>
251 
                      <div className="user-profile-extended-ov">
 172 
                  <div className="col text-right pl-0">
252 
                        <h3>Accesibilidad</h3>
 173 
                    <button
253 
                        <span id="overview-accessibility">
 174 
                      className={` ${currentTab === groupTabs.INFO_TAB ? "active" : ""} animated fadeIn btn btn-link p-0 text-decoration-none`}
254 
                          {accessibility}
 175 
                      onClick={(e) => {
255 
                        </span>
 - 
 
256 
                      </div>
 - 
 
257 
                    }
 176 
                        e.preventDefault();
258 
                    {!!website &&
 177 
                        setCurrentTab(groupTabs.INFO_TAB);
259 
                      <div className="user-profile-extended-ov">
 - 
 
260 
                        <h3>Página Web</h3>
 178 
                      }}
261 
                        <span id="overview-website">{website}</span>
 179 
                    >
- 
 
 180 
                      <span className="font-weight-bold">Ver Información</span>
- 
 
 181 
                    </button>
- 
 
 182 
                  </div>
- 
 
 183 
                </div>
- 
 
 184 
              }
- 
 
 185 
            </div>
- 
 
 186 
            <div
- 
 
 187 
              className="product-feed-tab animated fadeIn"
- 
 
 188 
              style={{ display: currentTab === groupTabs.FEED_TAB ? "flex" : "none" }}
- 
 
 189 
            >
- 
 
 190 
              <ShareFeed
- 
 
 191 
                feedType={feedTypes.GROUP}
- 
 
 192 
                postUrl={`/feed/add/group/${groupId}`}
- 
 
 193 
                image={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
- 
 
 194 
              />
- 
 
 195 
              <div className="posts-section">
262 
                      </div>
 196 
                <FeedSection
- 
 
 197 
                  routeTimeline={routeTimeline}
- 
 
 198 
                  image={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`}
- 
 
 199 
                />
- 
 
 200 
              </div>
- 
 
 201 
            </div>
263 
                    }
 202 
            <div
- 
 
 203 
              className="product-feed-tab  animated fadeIn"
- 
 
 204 
              style={{ display: currentTab === groupTabs.INFO_TAB ? "flex" : "none", }}
- 
 
 205 
            >
- 
 
 206 
              <div className="main-ws-sec">
- 
 
 207 
                {!!overview &&
- 
 
 208 
                  <div className="user-profile-extended-ov">
- 
 
 209 
                    <h3>Visión General</h3>
- 
 
 210 
                    <span id="overview-description">
- 
 
 211 
                      {parse(overview)}
- 
 
 212 
                    </span>
- 
 
 213 
                  </div>
264 
                  </div>
 214 
                }
- 
 
 215 
                {!!groupType &&
- 
 
 216 
                  <div className="user-profile-extended-ov">
- 
 
 217 
                    <h3>Tipo</h3>
- 
 
 218 
                    <span id="overview-type">{groupType}</span>
- 
 
 219 
                  </div>
- 
 
 220 
                }
- 
 
 221 
                {!!industry &&
- 
 
 222 
                  <div className="user-profile-extended-ov">
- 
 
 223 
                    <h3>Industria</h3>
- 
 
 224 
                    <span id="overview-industry">{industry}</span>
- 
 
 225 
                  </div>
- 
 
 226 
                }
- 
 
 227 
                {!!privacy &&
- 
 
 228 
                  <div className="user-profile-extended-ov">
- 
 
 229 
                    <h3>Privacidad</h3>
- 
 
 230 
                    <span id="overview-privacy">{privacy}</span>
- 
 
 231 
                  </div>
- 
 
 232 
                }
- 
 
 233 
                {!!accessibility &&
- 
 
 234 
                  <div className="user-profile-extended-ov">
- 
 
 235 
                    <h3>Accesibilidad</h3>
- 
 
 236 
                    <span id="overview-accessibility">
- 
 
 237 
                      {accessibility}
- 
 
 238 
                    </span>
- 
 
 239 
                  </div>
- 
 
 240 
                }
- 
 
 241 
                {!!website &&
- 
 
 242 
                  <div className="user-profile-extended-ov">
265 
                </div>
 243 
                    <h3>Página Web</h3>
266 
              </div>
 244 
                    <span id="overview-website">{website}</span>
267 
              <div className="right-sidebar">
 245 
                  </div>
- 
 
 246 
                }
- 
 
 247 
              </div>
- 
 
 248 
            </div>
268 
                <SuggestedGroupsHelper groupId={groupId} />
 249 
          </div>
269 
              </div>
 250 
          <div className="right-sidebar">
270 
            </div>
 251 
            <SuggestedGroupsHelper groupId={groupId} />
271 
          </div >
 252 
          </div>
272 
        </div >
 253 
        </div>
Línea 273... Línea 254...
273 
      </main >
 254 
      </main >
274 
    </React.Fragment >
 255 
    </>