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">`
1765	steven	126	`<div className="ph-5">`
1	www	127	`<div className="main-section-data">`
		128	`<div className="row">`
		129	`<div className="col-lg-3">`
1782	steven	130	`<div className="main-left-sidebar border-radius border-gray">`
		131	`<div className="user_profile m-0 p-1">`
1	www	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">`
1756	steven	144	`<div`
		145	`className="container horizontal-list"`
		146	`>`
		147	`<div`
		148	`className="row "`
		149	`>`
		150	`<div className="col">`
1757	steven	151	`<p>Miembros</p>`
		152	`<b style={{fontSize: '1rem'}} >{totalMembers}</b>`
		153	`</div>`
		154	`<div className="col">`
1756	steven	155	`<a`
		156	`href={linkInmail \|\| '#'}`
1759	steven	157	`className="btn btn-primary"`
1758	steven	158	`title=""`
		159	`>`
1760	steven	160	`Mensaje`
1758	steven	161	`</a>`
		162	`</div>`
		163	`<div className="col">`
		164	`<a`
		165	`href={linkInmail \|\| '#'}`
1756	steven	166	`className="btn btn-primary"`
		167	`title=""`
		168	`>`
		169	`Mensaje`
		170	`</a>`
		171	`</div>`
		172	`{`
		173	`actionLinks.link_accept && (`
		174	`<div`
		175	`className="col"`
		176	`>`
		177	`<button`
		178	`onClick={() => handleActionLink(actionLinks.link_accept)}`
		179	`className="btn btn-primary"`
		180	`title=""`
		181	`>`
		182	`<span className="ellipsis">`
		183	`Aceptar invitacion`
		184	`</span>`
		185	`</button>`
		186	`</div>`
		187	`)`
		188	`}`
		189	`{`
		190	`actionLinks.link_cancel && (`
		191	`<div`
		192	`className="col"`
		193	`>`
		194	`<button`
		195	`onClick={() => handleActionLink(actionLinks.link_cancel)}`
		196	`className="btn btn-primary"`
		197	`title=""`
		198	`>`
		199	`<span className="ellipsis">`
		200	`Cancelar invitacion`
		201	`</span>`
		202	`</button>`
		203	`</div>`
		204	`)`
		205	`}`
		206	`{`
		207	`(!linkInvite && actionLinks.link_leave) && (`
		208	`<div`
		209	`className="col"`
		210	`>`
		211	`<button`
		212	`onClick={() => handleActionLink(actionLinks.link_leave)}`
		213	`className="btn btn-danger"`
		214	`title=""`
		215	`>`
		216	`<span className="ellipsis">`
		217	`Abandonar grupo`
		218	`</span>`
		219	`</button>`
		220	`</div>`
		221	`)`
		222	`}`
		223	`{`
		224	`actionLinks.link_request && (`
		225	`<div`
		226	`className="col"`
		227	`>`
		228	`<button`
		229	`onClick={() => handleActionLink(actionLinks.link_request)}`
		230	`className="btn btn-primary"`
		231	`title=""`
		232	`>`
		233	`Solicitar membresia`
		234	`</button>`
		235	`</div>`
		236	`)`
		237	`}`
1785	steven	238	`{`
		239	`actionLinks.link_accept && (`
		240	`<div`
		241	`className="col"`
		242	`>`
		243	`<button`
		244	`onClick={() => handleActionLink(actionLinks.link_accept)}`
		245	`className="btn btn-success"`
		246	`title=""`
		247	`>`
		248	`<i className="fa fa-check"></i> Aceptar invitacion`
		249	`</button>`
		250	`</div>`
		251	`)`
		252	`}`
		253	`{`
		254	`actionLinks.link_cancel && (`
		255	`<div className="col">`
		256	`<button`
		257	`onClick={() => handleActionLink(actionLinks.link_cancel)}`
		258	`className="btn btn-danger"`
		259	`title=""`
		260	`>`
		261	`Cancelar invitacion`
		262	`</button>`
		263	`</div>`
		264	`)`
		265	`}`
		266	`{`
		267	`(!linkInvite && actionLinks.link_leave) && (`
		268	`<div`
		269	`className="col"`
		270	`>`
		271	`<button`
		272	`onClick={() => handleActionLink(actionLinks.link_leave)}`
		273	`className="btn btn-danger"`
		274	`title=""`
		275	`>`
		276	`Abandonar grupo`
		277	`</button>`
		278	`</div>`
		279	`)`
		280	`}`
		281	`{`
		282	`actionLinks.link_request && (`
		283	`<div className="col">`
		284	`<button`
		285	`onClick={() => handleActionLink(actionLinks.link_request)}`
		286	`className="btn btn-primary"`
		287	`title=""`
		288	`>`
		289	`Solicitar membresia`
		290	`</button>`
		291	`</div>`
		292	`)`
		293	`}`
1756	steven	294	`</div>`
		295	`</div>`
		296
1	www	297	`</ul>`
		298	`</div>`
		299	`</div>`
		300	`</div>`
		301	`<GroupMembersHelper groupId={groupId} handleFirstLinkInvite={link => setLinkInvite(link)} />`
		302	`</div>`
		303
		304	`<div className="col-lg-6">`
		305	`<div className="message-btn d-block d-md-none d-lg-none d-sm-none">`
1756	steven	306
1	www	307	`</div>`
		308	`<div className="main-ws-sec">`
		309	`<div className="user-tab-sec">`
		310	`{`
		311	`!withoutFeeds && (`
1763	steven	312	`<div className="row">`
		313	`<div className="col text-left pl-0">`
		314	`<button`
1	www	315	className={` ${
		316	`currentTab === groupTabs.FEED_TAB ? "active" : ""`
1763	steven	317	} animated fadeIn btn btn-link p-0 text-decoration-none`}
1	www	318	`onClick={(e) => {`
		319	`e.preventDefault();`
		320	`setCurrentTab(groupTabs.FEED_TAB);`
		321	`(groupTabs.FEED_TAB);`
		322	`}}`
		323	`>`
1763	steven	324	`<span className="ellipsis text-dark font-weight-bold">Ver Publicaciones</span>`
		325	`</button>`
		326	`</div>`
		327	`<div className="col text-right pl-0">`
		328	`<button`
		329	className={` ${
		330	`currentTab === groupTabs.FEED_TAB ? "active" : ""`
		331	} animated fadeIn btn btn-link p-0 text-decoration-none`}
1	www	332	`onClick={(e) => {`
		333	`e.preventDefault();`
1763	steven	334	`setCurrentTab(groupTabs.FEED_TAB);`
		335	`(groupTabs.FEED_TAB);`
1	www	336	`}}`
		337	`>`
1763	steven	338	`<span className="ellipsis text-dark font-weight-bold">Ver Publicaciones</span>`
		339	`</button>`
		340	`</div>`
		341	`</div>`
1	www	342	`)`
		343	`}`
		344	`{/* <!-- tab-feed end--> */}`
		345	`</div>`
		346	`{/* <!--user-tab-sec end--> */}`
		347
		348	`<div`
		349	`className="product-feed-tab animated fadeIn"`
		350	`id="feed-dd"`
		351	`style={{`
		352	`display:`
		353	`currentTab === groupTabs.FEED_TAB ? "block" : "none",`
		354	`}}`
		355	`>`
		356	`<div className="">`
		357	`<ShareFeed`
		358	`feedType={feedTypes.GROUP}`
		359	postUrl={`/feed/add/group/${groupId}`}
		360	`/>`
		361	`</div>`
		362	`{/* <!--posts-section star--> */}`
		363	`<div className="posts-section">`
		364	`<FeedSection routeTimeline={routeTimeline} />`
		365	`</div>`
		366	`{/* <!--posts-section end--> */}`
		367	`</div>`
		368	`{/* <!--product-feed-tab end--> */}`
		369
		370	`<div`
		371	`className="product-feed-tab animated fadeIn"`
		372	`id="info-dd"`
		373	`style={{`
		374	`display:`
		375	`currentTab === groupTabs.INFO_TAB ? "block" : "none",`
		376	`}}`
		377	`>`
		378	`<div className="main-ws-sec">`
		379	`{/* <!--user-tab-sec start--> */}`
		380	`{!!overview && (`
		381	`<div className="user-profile-extended-ov">`
		382	`<h3>Visión General</h3>`
		383	`<span id="overview-description">`
		384	`{parse(overview)}`
		385	`</span>`
		386	`</div>`
		387	`)}`
		388	`{/* <!--user-tab-sec endit--> */}`
		389
		390	`{/* <!--user-tab-sec start--> */}`
		391	`{!!groupType && (`
		392	`<div className="user-profile-extended-ov">`
		393	`<h3>Tipo</h3>`
		394	`<span id="overview-type">{groupType}</span>`
		395	`</div>`
		396	`)}`
		397	`{/* <!--user-tab-sec endit--> */}`
		398
		399	`{/* <!--user-tab-sec start--> */}`
		400	`{!!industry && (`
		401	`<div className="user-profile-extended-ov">`
		402	`<h3>Industria</h3>`
		403	`<span id="overview-industry">{industry}</span>`
		404	`</div>`
		405	`)}`
		406	`{/* <!--user-tab-sec endit--> */}`
		407
		408	`{/* <!--user-tab-sec start--> */}`
		409	`{/* <?php if($privacy) : ?> */}`
		410	`{!!privacy && (`
		411	`<div className="user-profile-extended-ov">`
		412	`<h3>Privacidad</h3>`
		413	`<span id="overview-privacy">{privacy}</span>`
		414	`</div>`
		415	`)}`
		416	`{/* <!--user-tab-sec endit--> */}`
		417
		418	`{/* <!--user-tab-sec start--> */}`
		419	`{!!accessibility && (`
		420	`<div className="user-profile-extended-ov">`
		421	`<h3>Accesibilidad</h3>`
		422	`<span id="overview-accessibility">`
		423	`{accessibility}`
		424	`</span>`
		425	`</div>`
		426	`)}`
		427	`{/* <!--user-tab-sec endit--> */}`
		428
		429	`{/* <!--user-tab-sec start--> */}`
		430	`{!!website && (`
		431	`<div className="user-profile-extended-ov">`
		432	`<h3>Página Web</h3>`
		433	`<span id="overview-website">{website}</span>`
		434	`</div>`
		435	`)}`
		436	`{/* <!--user-tab-sec endit--> */}`
		437
		438	`{/* <!--user-profile-ov end--> */}`
		439	`</div>`
		440	`{/* <!--main-ws-sec end--> */}`
		441	`</div>`
		442	`</div>`
		443	`</div>`
		444	`{/* <!--main-ws-sec end--> */}`
		445
		446	`<div className="col-lg-3 d-sm-none d-none d-md-block d-lg-block">`
1786	steven	447	`<div className="right-sidebar border-radius border-gray">`
1	www	448	`{/* <?php echo $this->similarGroupsHelper($group_id) ?> */}`
		449	`<SuggestedGroupsHelper groupId={groupId} />`
		450	`</div>`
		451	`</div>`
		452	`</div>`
		453	`</div>`
		454	`</div>`
		455	`</div>`
		456	`</main>`
		457	`</React.Fragment>`
		458	`);`
		459	`};`
		460
		461	`const mapDispatchToProps = {`
		462	`setTimelineUrl: (url) => setTimelineUrl(url),`
		463	`addNotification: (notification) => addNotification(notification),`
		464	`};`
		465
		466
		467	`export default connect(null, mapDispatchToProps)(View);`

Proyectos de Subversion LeadersLinked - Antes de SPA

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