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

Rev	Autor	Línea Nro.	Línea
1	www	1	`import React, { useEffect, useRef } from "react";`
		2	`import { useState } from "react";`
		3	`import { connect } from "react-redux";`
		4	`import styled from "styled-components";`
1105	stevensc	5	`import { axios } from "../../../utils";`
1	www	6	`import CompanyFollowersHelper from "../../../shared/helpers/company-followers-helper/CompanyFollowers";`
		7	`import parse from "html-react-parser";`
		8	`import { addNotification } from "../../../redux/notification/notification.actions";`
		9	`import Spinner from "../../../shared/loading-spinner/Spinner";`
		10	`import { setTimelineUrl } from "../../../redux/feed/feed.actions";`
		11	`import FeedSection from "../../../dashboard/components/feed-section/FeedSection";`
		12
		13	`const TABS = {`
		14	`FEEDS: "FEEDS",`
		15	`INFO: "INFO",`
		16	`};`
		17
		18	`const View = (props) => {`
		19	`// backendVars destructuring`
		20	`const {`
		21	`companyId,`
		22	`cover,`
		23	`image,`
		24	`totalFollowers,`
		25	`facebook,`
		26	`twitter,`
		27	`instagram,`
		28	`companyName,`
		29	`overview,`
		30	`locations,`
		31	`industry,`
		32	`companySize,`
		33	`foundationYear,`
		34	`website,`
		35	`timeline,`
		36	`} = props.backendVars;`
		37
		38	`// redux destructuring`
		39	`const { addNotification, setTimelineUrl } = props;`
		40
		41	`// const [isFollower, setIsFollower] = useState(!!+follower);`
		42	`const [authorizedLinks, setAuthorizedLinks] = useState(null);`
		43	`const [loading, setLoading] = useState(false);`
		44	`const [followers, setFollowers] = useState(totalFollowers);`
		45	`const [initialLoading, setInitialLoading] = useState(true);`
1108	stevensc	46	`const [isFollower, setIsFollower] = useState(false);`
1107	stevensc	47	`const [currentTab, setCurrentTab] = useState(TABS.INFO);`
1	www	48	`const [suggestionCompanies, setSuggestionCompanies] = useState([])`
1705	steven	49	`const [lookMore, setLookMore] = useState(false);`
1	www	50	`const shouldSetInitialTab = useRef(true);`
		51
1110	stevensc	52	`useEffect(() => {`
1	www	53	`setTimelineUrl(timeline);`
1110	stevensc	54	`fetchAuthorizedLinks();`
1	www	55	`shouldSetInitialTab.current = false;`
		56	`setInitialLoading(false);`
		57	`getSuggestionCompanies()`
		58	`}, []);`
1108	stevensc	59
1	www	60	`const getSuggestionCompanies = async () => {`
		61	`try {`
		62	`setLoading(true);`
		63	const response = await axios.get(`/helpers/company-suggestion/${companyId}`);
1105	stevensc	64	`if (response.data.success)`
1	www	65	`setSuggestionCompanies(response.data.data)`
		66	`} catch (error) {`
		67	`console.log('>>: error > ', error)`
1105	stevensc	68	`} finally {`
1	www	69	`setLoading(false)`
		70	`}`
		71	`}`
		72
1107	stevensc	73	`useEffect(() => {`
		74	`isFollower`
1108	stevensc	75	`? setCurrentTab(TABS.FEEDS)`
		76	`: setCurrentTab(TABS.INFO)`
1114	stevensc	77	`}, [isFollower]);`
1107	stevensc	78
1	www	79	`const fetchAuthorizedLinks = async () => {`
		80	`setLoading(true);`
		81	const response = await axios.get(`/company/view/${companyId}`);
		82	`const resData = response.data;`
1105	stevensc	83	`(resData);`
1	www	84	`if (resData.success) {`
		85	`setAuthorizedLinks(resData.data);`
		86	`setFollowers(resData.data.total_followers);`
		87	`if (resData.data.link_unfollow) {`
		88	`setIsFollower(true);`
		89	`if (shouldSetInitialTab.current) setCurrentTab(TABS.FEEDS);`
		90	`} else {`
		91	`setIsFollower(false);`
		92	`}`
		93	`}`
		94	`return setLoading(false);`
		95	`};`
		96
		97	`const handleButtonAction = async (link) => {`
		98	`setLoading(true);`
		99	`const response = await axios.post(link);`
		100	`const resData = response.data;`
		101	`if (resData.success) {`
		102	`addNotification({`
		103	`style: "success",`
		104	`msg: resData.data,`
		105	`});`
		106	`fetchAuthorizedLinks();`
		107	`} else {`
		108	`setLoading(false);`
		109	`addNotification({`
		110	`style: "danger",`
		111	`msg: "ha ocurrido un error",`
		112	`});`
		113	`}`
		114	`};`
		115	`const changeCurrentTab = (tab) => {`
		116	`setCurrentTab(tab)`
		117	`}`
1705	steven	118
		119	`const getData = () => {`
1706	steven	120	`let infoFollows = [...suggestionCompanies]`
1705	steven	121	`if(!lookMore){`
		122	`infoFollows = infoFollows.slice(0, 5);`
		123	`}`
		124	`return infoFollows`
		125	`}`
1	www	126	`return (`
		127	`<React.Fragment>`
		128	`<section className="cover-sec">`
		129	`<img`
		130	`id="user-cover-img"`
1105	stevensc	131	src={`/storage/type/company-cover/code/${companyId}/${cover ? `filename/${cover}` : ""
		132	}`}
1	www	133	`alt="cover-image"`
		134	`/>`
		135	`</section>`
		136	`<main>`
		137	`<div className="main-section">`
		138	`<div className="container">`
		139	`<div className="main-section-data">`
		140	`<div className="row">`
		141	`<div className="col-lg-3">`
		142	`<div className="main-left-sidebar">`
1689	steven	143	`<div className="user_profile border-gray border-radius pb-5">`
1	www	144	`<div className="user-pro-img">`
		145	`<img`
		146	`id="company-img"`
1105	stevensc	147	src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ""
		148	}`}
1	www	149	`alt="profile-image"`
		150	`/>`
		151	`</div>`
		152	`{/* <!--user-pro-img end--> */}`
		153	`<div className="user_pro_status">`
		154	`<h1>{companyName}</h1>`
1701	steven	155	`<div`
		156	`className="row"`
		157	`style={{`
		158	`margin: '-1px'`
		159	`}}`
		160	`>`
		161	`{`
		162	`facebook && (`
		163	`<div`
		164	`className="col col-md col-sm"`
		165	`>`
		166	`<i onClick={() => window.location.href = facebook} className="cursor-pointer fa fa-facebook" style={{ fontSize: '1.4rem' }} />`
		167	`</div>`
		168	`)`
		169	`}`
		170	`{`
		171	`twitter && (`
		172	`<div`
		173	`className="col col-md col-sm"`
		174	`>`
		175	`<i onClick={() => window.location.href = twitter} className="cursor-pointer fa fa-twitter" style={{ fontSize: '1.4rem' }} />`
		176	`</div>`
		177	`)`
		178	`}`
		179	`{`
		180	`instagram && (`
		181	`<div`
		182	`className="col col-md col-sm"`
		183	`>`
		184	`<i onClick={() => window.location.href = instagram} className="fa fa-instagram cursor-pointer" style={{ fontSize: '1.4rem' }} />`
		185	`</div>`
		186	`)`
		187	`}`
		188	`</div>`
1	www	189	`<ul className="flw-status">`
1702	steven	190	`<div`
1703	steven	191	`className="row overflow-auto"`
1702	steven	192	`>`
		193	`<div`
1703	steven	194	`className="col ellipsis"`
1702	steven	195	`>`
		196	`<li>`
		197	`<span style={{ fontSize: '1rem' }} >Seguidores</span>`
		198	`<b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>`
		199	`</li>`
		200	`</div>`
		201	`{authorizedLinks?.link_unfollow && (`
		202	`<div`
1703	steven	203	`className="col ellipsis"`
1701	steven	204	`>`
1702	steven	205	`<li>`
		206	`<a`
		207	`href="#"`
		208	`className="btn-remove-follower"`
		209	`onClick={(e) => {`
		210	`e.preventDefault();`
		211	`handleButtonAction(authorizedLinks?.link_unfollow);`
		212	`}}`
		213	`>`
		214	`<i className="fa fa-user-times"></i> Dejar de seguir`
		215	`</a>`
		216	`</li>`
		217	`</div>`
		218	`)}`
		219	`{authorizedLinks?.link_follow && (`
		220	`<div`
1703	steven	221	`className="col ellipsis"`
1701	steven	222	`>`
1702	steven	223	`<li>`
		224	`<a`
		225	`href="#"`
		226	`className="btn-add-follower"`
		227	`onClick={(e) => {`
		228	`e.preventDefault();`
		229	`handleButtonAction(authorizedLinks?.link_follow);`
		230	`}}`
		231	`>`
		232	`<i className="fa fa-plus"></i> Seguir`
		233	`</a>`
		234	`</li>`
		235	`</div>`
		236	`)}`
		237	`{authorizedLinks?.link_request && (`
		238	`<div`
1703	steven	239	`className="col ellipsis"`
1701	steven	240	`>`
1702	steven	241	`<li>`
		242	`<a`
		243	`href="#"`
		244	`className="btn-request"`
		245	`onClick={(e) => {`
		246	`e.preventDefault();`
		247	`handleButtonAction(authorizedLinks?.link_request);`
		248	`}}`
		249	`>`
		250	`<i className="fa fa-user-plus"></i>`
		251	`Trabaja en esta empresa?`
		252	`</a>`
		253	`</li>`
		254	`</div>`
		255	`)}`
		256	`{authorizedLinks?.link_accept && (`
		257	`<div`
1703	steven	258	`className="col ellipsis"`
1701	steven	259	`>`
1702	steven	260	`<li>`
		261	`<a`
		262	`href="#"`
		263	`className="btn-accept"`
		264	`onClick={(e) => {`
		265	`e.preventDefault();`
		266	`handleButtonAction(authorizedLinks?.link_accept);`
		267	`}}`
		268	`>`
		269	`<i className="fa fa-check"></i> Aceptar`
		270	`</a>`
		271	`</li>`
		272	`</div>`
		273	`)}`
1701	steven	274
1702	steven	275	`{authorizedLinks?.link_cancel && (`
		276	`<div`
1703	steven	277	`className="col ellipsis"`
1701	steven	278	`>`
1702	steven	279	`<li>`
		280	`<a`
		281	`href="#"`
		282	`title=""`
		283	`className="btn-cancel"`
		284	`onClick={(e) => {`
		285	`e.preventDefault();`
		286	`handleButtonAction(authorizedLinks?.link_cancel);`
		287	`}}`
		288	`>`
		289	`<i className="fa fa-user-times "></i> Cancelar`
		290	`</a>`
		291	`</li>`
		292	`</div>`
		293	`)}`
1704	steven	294	`{authorizedLinks?.link_reject && (`
		295	`<div`
		296	`className="col ellipsis"`
		297	`>`
		298	`<li>`
		299	`<a`
		300	`href="#"`
		301	`title=""`
		302	`className="btn-reject"`
		303	`onClick={(e) => {`
		304	`e.preventDefault();`
		305	`handleButtonAction(authorizedLinks?.link_reject);`
		306	`}}`
		307	`>`
		308	`<i className="fa fa-user-times "></i> Rechazar`
		309	`</a>`
		310	`</li>`
		311	`</div>`
		312	`)}`
		313
		314	`{authorizedLinks?.link_leave && (`
		315	`<div`
		316	`className="col ellipsis"`
		317	`>`
		318	`<li>`
		319	`<a`
		320	`href="#"`
		321	`data-link="{{>link_leave}}"`
		322	`title=""`
		323	`className="btn-leave"`
		324	`onClick={(e) => {`
		325	`e.preventDefault();`
		326	`handleButtonAction(authorizedLinks?.link_leave);`
		327	`}}`
		328	`>`
		329	`<i className="fa fa-user-times "></i>`
		330	`Abandonar esta empresa`
		331	`</a>`
		332	`</li>`
		333	`</div>`
		334	`)}`
		335	`{authorizedLinks?.link_contact && (`
		336	`<div`
		337	`className="col ellipsis"`
		338	`>`
		339
		340	`<li>`
		341	`<a`
		342	`href={authorizedLinks?.link_contact}`
		343	`title=""`
		344	`className="btn-send-message"`
		345	`>`
		346	`<i className="fa fa-envelope "></i> Mensaje`
		347	`</a>`
		348	`</li>`
		349	`</div>`
		350	`)}`
1702	steven	351	`</div>`
		352
1	www	353	`</ul>`
		354	`</div>`
		355	`{/* <!--user_pro_status end--> */}`
		356	`</div>`
		357	`{/* <!--user_profile end--> */}`
		358
		359	`<CompanyFollowersHelper companyId={companyId} />`
		360	`</div>`
		361	`{/* <!--main-left-sidebar end--> */}`
		362	`</div>`
		363	`<div className="col-lg-6">`
		364	`<div className="main-ws-sec">`
		365	`<div className="user-tab-sec rewivew">`
1108	stevensc	366	`{`
		367	`!initialLoading`
		368	`&&`
1	www	369	`<div`
		370	`className="row"`
		371	`>`
1113	stevensc	372	`{`
		373	`isFollower`
		374	`&&`
		375	`<div`
1708	steven	376	`className="col text-left pl-0"`
1105	stevensc	377	`>`
1113	stevensc	378	`<button`
1709	steven	379	`className="btn btn-link p-0 text-decoration-none"`
1113	stevensc	380	`onClick={() => changeCurrentTab(TABS.FEEDS)}`
		381	`>`
1708	steven	382	`<span className="p-2 default-link font-weight-bold">Ver Publicaciones</span>`
1113	stevensc	383	`</button>`
		384	`</div>`
		385	`}`
1	www	386	`<div`
1708	steven	387	`className="col text-right pl-0"`
1	www	388	`>`
1105	stevensc	389	`<button`
1709	steven	390	`className="btn btn-link p-0 text-decoration-none"`
1105	stevensc	391	`onClick={() => changeCurrentTab(TABS.INFO)}`
		392	`>`
1708	steven	393	`<span className="p-2 default-link font-weight-bold">Ver Info</span>`
1105	stevensc	394	`</button>`
1	www	395	`</div>`
		396	`</div>`
1108	stevensc	397	`}`
1	www	398	`{/* <!-- tab-feed end--> */}`
		399	`</div>`
1109	stevensc	400	`{`
1112	stevensc	401	`currentTab === TABS.FEEDS`
1105	stevensc	402	`&&`
1109	stevensc	403	`<div`
		404	`className="product-feed-tab animated fadeIn"`
		405	`id="feed-dd feed"`
1111	stevensc	406	`style={{ display: 'block' }}`
1109	stevensc	407	`>`
		408	`<div className="posts-section">`
		409	`<FeedSection routeTimeline={timeline} />`
		410	`</div>`
		411	`</div>`
		412	`}`
		413	`{`
1113	stevensc	414	`currentTab === TABS.INFO`
1109	stevensc	415	`&&`
		416	`< div`
		417	`className="product-feed-tab animated fadeIn"`
		418	`id="feed-dd info"`
1111	stevensc	419	`style={{ display: 'block' }}`
1109	stevensc	420	`>`
1	www	421	`{`
1109	stevensc	422	`overview`
1105	stevensc	423	`&&`
1109	stevensc	424	`<div className="user-profile-extended-ov">`
		425	`<h3>Visión general</h3>`
		426	`<span>{parse(overview)}</span>`
1105	stevensc	427	`</div>`
		428	`}`
		429	`{`
1109	stevensc	430	`locations`
1105	stevensc	431	`&&`
1109	stevensc	432	`<div className="user-profile-extended-ov st2">`
		433	`<h3>Ubicación</h3>`
		434	`<span>`
		435	`{locations.map(`
		436	`({ formatted_address, is_main }, index) => (`
		437	`<React.Fragment key={index}>`
		438	`{index >= 0 ? <hr /> : ""}`
		439	`<p>`
		440	{`${formatted_address} ${is_main === "y" ? "(Principal)" : ""
		441	}`}
		442	`</p>`
		443	`</React.Fragment>`
		444	`)`
		445	`)}`
		446	`</span>`
1105	stevensc	447	`</div>`
		448	`}`
1109	stevensc	449	`{`
		450	`industry`
		451	`&&`
		452	`<div className="user-profile-ov">`
		453	`<h3>Industria</h3>`
		454	`<span>{industry}</span>`
		455	`</div>`
		456	`}`
		457	`{`
		458	`companySize`
		459	`&&`
		460	`<div className="user-profile-ov">`
		461	`<h3>Tamaño de la empresa</h3>`
		462	`<span>{companySize}</span>`
		463	`</div>`
		464	`}`
		465	`{`
		466	`foundationYear`
		467	`&&`
		468	`<div className="user-profile-ov">`
		469	`<h3>Año de fundación</h3>`
		470	`<span>{foundationYear}</span>`
		471	`</div>`
		472	`}`
		473	`{`
		474	`website`
		475	`&&`
		476	`<div className="user-profile-ov">`
		477	`<h3>Página web</h3>`
		478	`<span>{website}</span>`
		479	`</div>`
		480	`}`
		481	`</div>`
1105	stevensc	482	`}`
1110	stevensc	483	`{`
		484	`initialLoading`
		485	`&&`
1	www	486	`<div`
		487	`style={{`
		488	`display: "flex",`
		489	`justifyContent: "center",`
		490	`alignItems: "center",`
		491	`}}`
		492	`>`
		493	`<Spinner />`
		494	`</div>`
1110	stevensc	495	`}`
1	www	496	`</div>`
		497	`</div>`
		498	`<div className="col-lg-3">`
		499	`<div className="right-sidebar">`
1701	steven	500	`{loading && (`
		501	`<div className="spinner-container">`
		502	`<Spinner />`
		503	`</div>`
		504	`)}`
1	www	505	`<div`
1105	stevensc	506	`className="widget suggestions full-width d-none d-md-block d-lg-block"`
		507	`style={{`
1707	steven	508	`height: "auto",`
1105	stevensc	509	`overflowY: "auto",`
		510	`}}`
		511	`>`
		512	`<div className="sd-title">`
		513	`<h3>Empresas similares</h3>`
		514	`</div>`
		515	`{/* <!--sd-title end--> */}`
		516	`{suggestionCompanies.length ? (`
1705	steven	517	`getData().map(element => {`
1105	stevensc	518	`return (`
1691	steven	519	`<div className="suggestion-usd d-flex justify-content-start align-items-center " key={element.id}>`
1105	stevensc	520	`<img`
1692	steven	521	`style={{ width: "10%", height: "auto" }}`
1105	stevensc	522	`src={element.image}`
		523	`alt=""`
		524	`/>`
		525	`<div`
		526	`className="sgt-text"`
		527	`>`
		528	`<a href={element.profile} target="_blank">`
		529	`<h4 className="text-dark">{element.name}</h4>`
		530	`</a>`
1	www	531	`</div>`
1105	stevensc	532	`</div>`
		533	`)`
		534	`})`
		535	`) : (`
		536	`<div className="view-more">Sin empresas similares</div>`
		537	`)}`
1705	steven	538	`<div`
		539	`className="w-100 text-center"`
		540	`>`
		541	`<button className="btn btn-primary" onClick={() => setLookMore(!lookMore)}>`
		542	`Ver mas`
		543	`</button>`
		544	`</div>`
1	www	545	`</div>`
		546	`</div>`
		547	`{/* <!--right-sidebar end--> */}`
		548	`</div>`
		549	`</div>`
		550	`</div>`
		551	`{/* <!-- main-section-data end--> */}`
		552	`</div>`
		553	`</div>`
		554	`</main>`
1105	stevensc	555	`</React.Fragment >`
1	www	556	`);`
		557	`};`
		558
		559	`// const mapStateToProps = (state) => ({`
		560
		561	`// })`
		562
		563	`const mapDispatchToProps = {`
		564	`addNotification: (notification) => addNotification(notification),`
		565	`setTimelineUrl: (url) => setTimelineUrl(url),`
		566	`};`
		567
		568	`export default connect(null, mapDispatchToProps)(View);`

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/company/view/view/View.js – Rev 1709