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

Proyectos de Subversion LeadersLinked - Antes de SPA

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