WebSVN – LeadersLinked - Antes de SPA – Autoría – /react-webpack/group/view/view/View.js

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('')`
1068	stevensc	69
1	www	70	`setTimelineUrl(routeTimeline);`
		71	`const load = () =>{`
		72	`axios.get('')`
		73	`.then(res => {`
		74	`if(res.data.success){`
		75	`setActionLinks(res.data.data)`
		76	`}else{`
		77	`AddNotification({`
		78	`type: 'error',`
		79	`payload: res.data.data`
		80	`})`
		81	`}`
		82	`})`
		83	`.catch(err => {`
		84	`console.log('>>: err > ', err)`
		85	`})`
		86	`}`
1068	stevensc	87
1	www	88	`React.useEffect(() =>{`
		89	`load()`
		90	`}, [])`
1068	stevensc	91
1	www	92	`const handleActionLink = (url) => {`
		93	`axios.post(url)`
		94	`.then(res => {`
		95	`if(res.data.success){`
		96	`AddNotification({`
		97	`style: 'success',`
		98	`msg: res.data.data`
		99	`})`
		100	`window.location.reload()`
		101	`}else{`
		102	`AddNotification({`
		103	`style: 'error',`
		104	`msg: res.data.data`
		105	`})`
		106	`}`
		107	`})`
		108	`.catch(err => {`
		109	`console.log('>>: err > ', err)`
		110	`})`
		111	`}`
1068	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]) ?>"`
		118	src={`/storage/type/group-cover/code/${groupId}/${
		119	cover ? `filename/${cover}` : ""
		120	}`}
		121	`alt="cover-image"`
		122	`/>`
		123	`</section>`
		124	`<main>`
		125	`<div className="main-section">`
		126	`<div className="container">`
		127	`<div className="main-section-data">`
		128	`<div className="row">`
		129	`<div className="col-lg-3">`
		130	`<div className="main-left-sidebar">`
		131	`<div className="user_profile">`
		132	`<div className="user-pro-img">`
		133	`<img`
		134	`// src="<?php echo $this->url('storage', ['type' => 'group', 'code' => $group_id_encrypted, 'filename' => $image]) ?>"`
		135	src={`/storage/type/group/code/${groupId}/${
		136	image ? `filename/${image}` : ""
		137	}`}
		138	`alt="profile-image"`
		139	`/>`
		140	`</div>`
		141	`<div className="user_pro_status">`
		142	`<h1 className="font-weight-bold" style={{fontSize: '1.5rem'}} >{name}</h1>`
		143	`<ul className="flw-status">`
		144	`<li>`
		145	`<p>Miembros</p>`
		146	`<b style={{fontSize: '1rem'}} >{totalMembers}</b>`
		147	`</li>`
1756	steven	148
		149	`<div`
		150	`className="container horizontal-list"`
		151	`>`
		152	`<div`
		153	`className="row "`
		154	`>`
		155	`<div className="col">`
		156	`<a`
		157	`href={linkInmail \|\| '#'}`
		158	`className="btn btn-primary"`
		159	`title=""`
		160	`>`
		161	`Mensaje`
		162	`</a>`
		163	`</div>`
		164	`{`
		165	`actionLinks.link_accept && (`
		166	`<div`
		167	`className="col"`
		168	`>`
		169	`<button`
		170	`onClick={() => handleActionLink(actionLinks.link_accept)}`
		171	`className="btn btn-primary"`
		172	`title=""`
		173	`>`
		174	`<span className="ellipsis">`
		175	`Aceptar invitacion`
		176	`</span>`
		177	`</button>`
		178	`</div>`
		179	`)`
		180	`}`
		181	`{`
		182	`actionLinks.link_cancel && (`
		183	`<div`
		184	`className="col"`
		185	`>`
		186	`<button`
		187	`onClick={() => handleActionLink(actionLinks.link_cancel)}`
		188	`className="btn btn-primary"`
		189	`title=""`
		190	`>`
		191	`<span className="ellipsis">`
		192	`Cancelar invitacion`
		193	`</span>`
		194	`</button>`
		195	`</div>`
		196	`)`
		197	`}`
		198	`{`
		199	`(!linkInvite && actionLinks.link_leave) && (`
		200	`<div`
		201	`className="col"`
		202	`>`
		203	`<button`
		204	`onClick={() => handleActionLink(actionLinks.link_leave)}`
		205	`className="btn btn-danger"`
		206	`title=""`
		207	`>`
		208	`<span className="ellipsis">`
		209	`Abandonar grupo`
		210	`</span>`
		211	`</button>`
		212	`</div>`
		213	`)`
		214	`}`
		215	`{`
		216	`actionLinks.link_request && (`
		217	`<div`
		218	`className="col"`
		219	`>`
		220	`<button`
		221	`onClick={() => handleActionLink(actionLinks.link_request)}`
		222	`className="btn btn-primary"`
		223	`title=""`
		224	`>`
		225	`Solicitar membresia`
		226	`</button>`
		227	`</div>`
		228	`)`
		229	`}`
		230	`</div>`
		231	`</div>`
		232
1	www	233	`</ul>`
		234	`</div>`
		235	`</div>`
		236	`</div>`
		237	`<GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />`
		238	`</div>`
		239
		240	`<div className="col-lg-6">`
		241	`<div className="message-btn d-block d-md-none d-lg-none d-sm-none">`
1756	steven	242
1	www	243	`</div>`
		244	`<div className="main-ws-sec">`
		245	`<div className="user-tab-sec">`
		246	`{`
		247	`!withoutFeeds && (`
		248	`<StyledTabWrapper>`
		249	`<ul>`
		250	`<li`
		251	className={` ${
		252	`currentTab === groupTabs.FEED_TAB ? "active" : ""`
		253	} animated fadeIn`}
		254	`onClick={(e) => {`
		255	`e.preventDefault();`
		256	`setCurrentTab(groupTabs.FEED_TAB);`
		257	`(groupTabs.FEED_TAB);`
		258	`}}`
		259	`>`
		260	`<a href="#" title="">`
		261	`<img`
		262	`// src="<?php echo $this->basePath('images/ic1.png') ?>"`
		263	`src="/images/ic1.png"`
		264	`alt=""`
		265	`/>`
		266	`<span>Publicaciones</span>`
		267	`</a>`
		268	`</li>`
		269	`<li`
		270	className={`${
		271	`currentTab === groupTabs.INFO_TAB ? "active" : ""`
		272	} animated fadeIn group-view-tab`}
		273	`onClick={(e) => {`
		274	`e.preventDefault();`
		275	`setCurrentTab(groupTabs.INFO_TAB);`
		276	`(groupTabs.INFO_TAB);`
		277	`}}`
		278	`>`
		279	`<a href="#" title="">`
		280	`<img`
		281	`// src="<?php echo $this->basePath('images/ic2.png') ?>"`
		282	`src="/images/ic2.png"`
		283	`alt=""`
		284	`/>`
		285	`<span className="ellipsis">Info. del grupo</span>`
		286	`</a>`
		287	`</li>`
		288	`</ul>`
		289	`</StyledTabWrapper>`
		290	`)`
		291	`}`
		292	`{/* <!-- tab-feed end--> */}`
		293	`</div>`
		294	`{/* <!--user-tab-sec end--> */}`
		295
		296	`<div`
		297	`className="product-feed-tab animated fadeIn"`
		298	`id="feed-dd"`
		299	`style={{`
		300	`display:`
		301	`currentTab === groupTabs.FEED_TAB ? "block" : "none",`
		302	`}}`
		303	`>`
		304	`<div className="">`
		305	`<ShareFeed`
		306	`feedType={feedTypes.GROUP}`
		307	postUrl={`/feed/add/group/${groupId}`}
		308	`/>`
		309	`</div>`
		310	`{/* <!--posts-section star--> */}`
		311	`<div className="posts-section">`
		312	`<FeedSection routeTimeline={routeTimeline} />`
		313	`</div>`
		314	`{/* <!--posts-section end--> */}`
		315	`</div>`
		316	`{/* <!--product-feed-tab end--> */}`
		317
		318	`<div`
		319	`className="product-feed-tab animated fadeIn"`
		320	`id="info-dd"`
		321	`style={{`
		322	`display:`
		323	`currentTab === groupTabs.INFO_TAB ? "block" : "none",`
		324	`}}`
		325	`>`
		326	`<div className="main-ws-sec">`
		327	`{/* <!--user-tab-sec start--> */}`
		328	`{!!overview && (`
		329	`<div className="user-profile-extended-ov">`
		330	`<h3>Visión General</h3>`
		331	`<span id="overview-description">`
		332	`{parse(overview)}`
		333	`</span>`
		334	`</div>`
		335	`)}`
		336	`{/* <!--user-tab-sec endit--> */}`
		337
		338	`{/* <!--user-tab-sec start--> */}`
		339	`{!!groupType && (`
		340	`<div className="user-profile-extended-ov">`
		341	`<h3>Tipo</h3>`
		342	`<span id="overview-type">{groupType}</span>`
		343	`</div>`
		344	`)}`
		345	`{/* <!--user-tab-sec endit--> */}`
		346
		347	`{/* <!--user-tab-sec start--> */}`
		348	`{!!industry && (`
		349	`<div className="user-profile-extended-ov">`
		350	`<h3>Industria</h3>`
		351	`<span id="overview-industry">{industry}</span>`
		352	`</div>`
		353	`)}`
		354	`{/* <!--user-tab-sec endit--> */}`
		355
		356	`{/* <!--user-tab-sec start--> */}`
		357	`{/* <?php if($privacy) : ?> */}`
		358	`{!!privacy && (`
		359	`<div className="user-profile-extended-ov">`
		360	`<h3>Privacidad</h3>`
		361	`<span id="overview-privacy">{privacy}</span>`
		362	`</div>`
		363	`)}`
		364	`{/* <!--user-tab-sec endit--> */}`
		365
		366	`{/* <!--user-tab-sec start--> */}`
		367	`{!!accessibility && (`
		368	`<div className="user-profile-extended-ov">`
		369	`<h3>Accesibilidad</h3>`
		370	`<span id="overview-accessibility">`
		371	`{accessibility}`
		372	`</span>`
		373	`</div>`
		374	`)}`
		375	`{/* <!--user-tab-sec endit--> */}`
		376
		377	`{/* <!--user-tab-sec start--> */}`
		378	`{!!website && (`
		379	`<div className="user-profile-extended-ov">`
		380	`<h3>Página Web</h3>`
		381	`<span id="overview-website">{website}</span>`
		382	`</div>`
		383	`)}`
		384	`{/* <!--user-tab-sec endit--> */}`
		385
		386	`{/* <!--user-profile-ov end--> */}`
		387	`</div>`
		388	`{/* <!--main-ws-sec end--> */}`
		389	`</div>`
		390	`</div>`
		391	`</div>`
		392	`{/* <!--main-ws-sec end--> */}`
		393
		394	`<div className="col-lg-3 d-sm-none d-none d-md-block d-lg-block">`
		395	`<div className="right-sidebar">`
		396	`<div className="message-btn">`
		397	`<a`
		398	`href={linkInmail \|\| '#'}`
		399	`className="btn-send-message"`
		400	`title=""`
		401	`>`
		402	`<i className="fa fa-envelope"></i> Mensaje`
		403	`</a>`
		404	`{`
		405	`actionLinks.link_accept && (`
		406	`<a`
		407	`href="#"`
		408	`onClick={() => handleActionLink(actionLinks.link_accept)}`
		409	`className="btn btn-success"`
		410	`title=""`
		411	`>`
		412	`<i className="fa fa-check"></i> Aceptar invitacion`
		413	`</a>`
		414	`)`
		415	`}`
		416	`{`
		417	`actionLinks.link_cancel && (`
		418	`<a`
		419	`href="#"`
		420	`onClick={() => handleActionLink(actionLinks.link_cancel)}`
		421	`className="btn btn-danger"`
		422	`title=""`
		423	`>`
		424	`<i className="fa fa-close"></i> Cancelar invitacion`
		425	`</a>`
		426	`)`
		427	`}`
		428	`{`
		429	`(!linkInvite && actionLinks.link_leave) && (`
		430	`<a`
		431	`href="#"`
		432	`onClick={() => handleActionLink(actionLinks.link_leave)}`
		433	`className="btn btn-danger"`
		434	`title=""`
		435	`>`
		436	`<i className="fas fa-door-open"></i> Abandonar grupo`
		437	`</a>`
		438	`)`
		439	`}`
		440	`{`
		441	`actionLinks.link_request && (`
		442	`<a`
		443	`href="#"`
		444	`onClick={() => handleActionLink(actionLinks.link_request)}`
		445	`className="btn btn-primary"`
		446	`title=""`
		447	`>`
		448	`<i className="fa fa-plus"></i> Solicitar membresia`
		449	`</a>`
		450	`)`
		451	`}`
		452	`</div>`
		453	`{/* <?php echo $this->similarGroupsHelper($group_id) ?> */}`
		454	`<SuggestedGroupsHelper groupId={groupId} />`
		455	`</div>`
		456	`</div>`
		457	`</div>`
		458	`</div>`
		459	`</div>`
		460	`</div>`
		461	`</main>`
		462	`</React.Fragment>`
		463	`);`
		464	`};`
		465
		466	`const mapDispatchToProps = {`
		467	`setTimelineUrl: (url) => setTimelineUrl(url),`
		468	`addNotification: (notification) => addNotification(notification),`
		469	`};`
		470
		471
		472	`export default connect(null, mapDispatchToProps)(View);`

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/group/view/view/View.js – Rev 1756