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>`
1716	steven	189	`<div`
		190	`className="container"`
		191	`>`
1702	steven	192	`<div`
1716	steven	193	`className="row overflow-auto"`
1702	steven	194	`>`
		195	`<div`
1716	steven	196	`className="col"`
1702	steven	197	`>`
1716	steven	198	`<span style={{ fontSize: '1rem' }} >Seguidores</span>`
		199	`<b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>`
		200	`</div>`
		201	`{authorizedLinks?.link_unfollow && (`
1702	steven	202	`<div`
1715	steven	203	`className="col"`
1701	steven	204	`>`
1716	steven	205	`<a`
		206	`href="#"`
		207	`className="btn btn-primary ellipsis"`
		208	`onClick={(e) => {`
		209	`e.preventDefault();`
		210	`handleButtonAction(authorizedLinks?.link_unfollow);`
		211	`}}`
		212	`>`
		213	`Dejar de seguir`
		214	`</a>`
1702	steven	215	`</div>`
1716	steven	216	`)}`
		217	`{authorizedLinks?.link_follow && (`
		218	`<div`
		219	`className="col"`
		220	`>`
		221	`<a`
		222	`href="#"`
		223	`className="btn btn-primary ellipsis"`
		224	`onClick={(e) => {`
		225	`e.preventDefault();`
		226	`handleButtonAction(authorizedLinks?.link_follow);`
		227	`}}`
1712	steven	228	`>`
1716	steven	229	`Seguir`
		230	`</a>`
		231	`</div>`
		232	`)}`
		233	`{authorizedLinks?.link_request && (`
		234	`<div`
		235	`className="col"`
		236	`>`
		237	`<a`
		238	`href="#"`
		239	`className="btn btn-primary ellipsis"`
		240	`onClick={(e) => {`
		241	`e.preventDefault();`
		242	`handleButtonAction(authorizedLinks?.link_request);`
		243	`}}`
1712	steven	244	`>`
1716	steven	245	`Trabaja en esta empresa?`
		246	`</a>`
		247	`</div>`
		248	`)}`
		249	`{authorizedLinks?.link_accept && (`
		250	`<div`
		251	`className="col"`
		252	`>`
		253	`<a`
		254	`href="#"`
		255	`className="btn btn-primary ellipsis"`
		256	`onClick={(e) => {`
		257	`e.preventDefault();`
		258	`handleButtonAction(authorizedLinks?.link_accept);`
		259	`}}`
1712	steven	260	`>`
1716	steven	261	`Aceptar`
		262	`</a>`
		263	`</div>`
		264	`)}`
		265
		266	`{authorizedLinks?.link_cancel && (`
		267	`<div`
		268	`className="col"`
		269	`>`
		270	`<a`
		271	`href="#"`
		272	`title=""`
		273	`className="btn btn-primary ellipsis"`
		274	`onClick={(e) => {`
		275	`e.preventDefault();`
		276	`handleButtonAction(authorizedLinks?.link_cancel);`
		277	`}}`
		278	`>`
		279	`Cancelar`
		280	`</a>`
		281	`</div>`
		282	`)}`
		283	`{authorizedLinks?.link_reject && (`
		284	`<div`
		285	`className="col"`
		286	`>`
		287	`<li>`
		288	`<a`
		289	`href="#"`
		290	`title=""`
		291	`className="btn btn-primary ellipsis"`
		292	`onClick={(e) => {`
		293	`e.preventDefault();`
		294	`handleButtonAction(authorizedLinks?.link_reject);`
		295	`}}`
		296	`>`
		297	`Rechazar`
		298	`</a>`
		299	`</li>`
		300	`</div>`
		301	`)}`
		302
		303	`{authorizedLinks?.link_leave && (`
		304	`<div`
		305	`className="col"`
		306	`>`
		307	`<li>`
		308	`<a`
		309	`href="#"`
		310	`data-link="{{>link_leave}}"`
		311	`title=""`
		312	`className="btn btn-primary ellipsis"`
		313	`onClick={(e) => {`
		314	`e.preventDefault();`
		315	`handleButtonAction(authorizedLinks?.link_leave);`
		316	`}}`
		317	`>`
		318	`Abandonar esta empresa`
		319	`</a>`
		320	`</li>`
		321	`</div>`
		322	`)}`
		323	`{authorizedLinks?.link_contact && (`
		324	`<div`
		325	`className="col"`
		326	`>`
1704	steven	327
1716	steven	328	`<li>`
		329	`<a`
		330	`href={authorizedLinks?.link_contact}`
		331	`title=""`
		332	`className="btn btn-primary ellipsis"`
		333	`>`
		334	`Mensaje`
		335	`</a>`
		336	`</li>`
		337	`</div>`
		338	`)}`
1702	steven	339	`</div>`
1716	steven	340	`</div>`
1	www	341	`</div>`
		342	`{/* <!--user_pro_status end--> */}`
		343	`</div>`
		344	`{/* <!--user_profile end--> */}`
		345
		346	`<CompanyFollowersHelper companyId={companyId} />`
		347	`</div>`
		348	`{/* <!--main-left-sidebar end--> */}`
		349	`</div>`
		350	`<div className="col-lg-6">`
		351	`<div className="main-ws-sec">`
		352	`<div className="user-tab-sec rewivew">`
1108	stevensc	353	`{`
		354	`!initialLoading`
		355	`&&`
1	www	356	`<div`
		357	`className="row"`
		358	`>`
1113	stevensc	359	`{`
		360	`isFollower`
		361	`&&`
		362	`<div`
1708	steven	363	`className="col text-left pl-0"`
1105	stevensc	364	`>`
1113	stevensc	365	`<button`
1709	steven	366	`className="btn btn-link p-0 text-decoration-none"`
1113	stevensc	367	`onClick={() => changeCurrentTab(TABS.FEEDS)}`
		368	`>`
1710	steven	369	`<span className="p-2 default-link font-weight-bold text-dark">Ver Publicaciones</span>`
1113	stevensc	370	`</button>`
		371	`</div>`
		372	`}`
1	www	373	`<div`
1708	steven	374	`className="col text-right pl-0"`
1	www	375	`>`
1105	stevensc	376	`<button`
1709	steven	377	`className="btn btn-link p-0 text-decoration-none"`
1105	stevensc	378	`onClick={() => changeCurrentTab(TABS.INFO)}`
		379	`>`
1710	steven	380	`<span className="p-2 default-link font-weight-bold text-dark">Ver Info</span>`
1105	stevensc	381	`</button>`
1	www	382	`</div>`
		383	`</div>`
1108	stevensc	384	`}`
1	www	385	`{/* <!-- tab-feed end--> */}`
		386	`</div>`
1109	stevensc	387	`{`
1112	stevensc	388	`currentTab === TABS.FEEDS`
1105	stevensc	389	`&&`
1109	stevensc	390	`<div`
		391	`className="product-feed-tab animated fadeIn"`
		392	`id="feed-dd feed"`
1111	stevensc	393	`style={{ display: 'block' }}`
1109	stevensc	394	`>`
		395	`<div className="posts-section">`
		396	`<FeedSection routeTimeline={timeline} />`
		397	`</div>`
		398	`</div>`
		399	`}`
		400	`{`
1113	stevensc	401	`currentTab === TABS.INFO`
1109	stevensc	402	`&&`
		403	`< div`
		404	`className="product-feed-tab animated fadeIn"`
		405	`id="feed-dd info"`
1111	stevensc	406	`style={{ display: 'block' }}`
1109	stevensc	407	`>`
1	www	408	`{`
1109	stevensc	409	`overview`
1105	stevensc	410	`&&`
1109	stevensc	411	`<div className="user-profile-extended-ov">`
		412	`<h3>Visión general</h3>`
		413	`<span>{parse(overview)}</span>`
1105	stevensc	414	`</div>`
		415	`}`
		416	`{`
1109	stevensc	417	`locations`
1105	stevensc	418	`&&`
1109	stevensc	419	`<div className="user-profile-extended-ov st2">`
		420	`<h3>Ubicación</h3>`
		421	`<span>`
		422	`{locations.map(`
		423	`({ formatted_address, is_main }, index) => (`
		424	`<React.Fragment key={index}>`
		425	`{index >= 0 ? <hr /> : ""}`
		426	`<p>`
		427	{`${formatted_address} ${is_main === "y" ? "(Principal)" : ""
		428	}`}
		429	`</p>`
		430	`</React.Fragment>`
		431	`)`
		432	`)}`
		433	`</span>`
1105	stevensc	434	`</div>`
		435	`}`
1109	stevensc	436	`{`
		437	`industry`
		438	`&&`
		439	`<div className="user-profile-ov">`
		440	`<h3>Industria</h3>`
		441	`<span>{industry}</span>`
		442	`</div>`
		443	`}`
		444	`{`
		445	`companySize`
		446	`&&`
		447	`<div className="user-profile-ov">`
		448	`<h3>Tamaño de la empresa</h3>`
		449	`<span>{companySize}</span>`
		450	`</div>`
		451	`}`
		452	`{`
		453	`foundationYear`
		454	`&&`
		455	`<div className="user-profile-ov">`
		456	`<h3>Año de fundación</h3>`
		457	`<span>{foundationYear}</span>`
		458	`</div>`
		459	`}`
		460	`{`
		461	`website`
		462	`&&`
		463	`<div className="user-profile-ov">`
		464	`<h3>Página web</h3>`
		465	`<span>{website}</span>`
		466	`</div>`
		467	`}`
		468	`</div>`
1105	stevensc	469	`}`
1110	stevensc	470	`{`
		471	`initialLoading`
		472	`&&`
1	www	473	`<div`
		474	`style={{`
		475	`display: "flex",`
		476	`justifyContent: "center",`
		477	`alignItems: "center",`
		478	`}}`
		479	`>`
		480	`<Spinner />`
		481	`</div>`
1110	stevensc	482	`}`
1	www	483	`</div>`
		484	`</div>`
		485	`<div className="col-lg-3">`
		486	`<div className="right-sidebar">`
1701	steven	487	`{loading && (`
		488	`<div className="spinner-container">`
		489	`<Spinner />`
		490	`</div>`
		491	`)}`
1	www	492	`<div`
1105	stevensc	493	`className="widget suggestions full-width d-none d-md-block d-lg-block"`
		494	`style={{`
1707	steven	495	`height: "auto",`
1105	stevensc	496	`overflowY: "auto",`
		497	`}}`
		498	`>`
		499	`<div className="sd-title">`
		500	`<h3>Empresas similares</h3>`
		501	`</div>`
		502	`{/* <!--sd-title end--> */}`
		503	`{suggestionCompanies.length ? (`
1705	steven	504	`getData().map(element => {`
1105	stevensc	505	`return (`
1691	steven	506	`<div className="suggestion-usd d-flex justify-content-start align-items-center " key={element.id}>`
1105	stevensc	507	`<img`
1692	steven	508	`style={{ width: "10%", height: "auto" }}`
1105	stevensc	509	`src={element.image}`
		510	`alt=""`
		511	`/>`
		512	`<div`
		513	`className="sgt-text"`
		514	`>`
		515	`<a href={element.profile} target="_blank">`
		516	`<h4 className="text-dark">{element.name}</h4>`
		517	`</a>`
1	www	518	`</div>`
1105	stevensc	519	`</div>`
		520	`)`
		521	`})`
		522	`) : (`
		523	`<div className="view-more">Sin empresas similares</div>`
		524	`)}`
1705	steven	525	`<div`
		526	`className="w-100 text-center"`
		527	`>`
		528	`<button className="btn btn-primary" onClick={() => setLookMore(!lookMore)}>`
		529	`Ver mas`
		530	`</button>`
		531	`</div>`
1	www	532	`</div>`
		533	`</div>`
		534	`{/* <!--right-sidebar end--> */}`
		535	`</div>`
		536	`</div>`
		537	`</div>`
		538	`{/* <!-- main-section-data end--> */}`
		539	`</div>`
		540	`</div>`
		541	`</main>`
1105	stevensc	542	`</React.Fragment >`
1	www	543	`);`
		544	`};`
		545
		546	`// const mapStateToProps = (state) => ({`
		547
		548	`// })`
		549
		550	`const mapDispatchToProps = {`
		551	`addNotification: (notification) => addNotification(notification),`
		552	`setTimelineUrl: (url) => setTimelineUrl(url),`
		553	`};`
		554
		555	`export default connect(null, mapDispatchToProps)(View);`

Proyectos de Subversion LeadersLinked - Antes de SPA

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