Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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