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

Proyectos de Subversion LeadersLinked - Antes de SPA

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