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

Proyectos de Subversion LeadersLinked - Antes de SPA

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