Mejorada estructura de componentes para aumentar la legibilidad. Arre…

…glado error de camelCase en carpeta Componentes
juadecha · Mar 7, 2021 · 5dff89a · 5dff89a
1 parent 250b29e
commit 5dff89a
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 193 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,14 @@
 import NB from './containers/navbar'
-import Slideshow from './Components/slideshow'
-
-import Bottomwrap from './Components/bottomwrap'
-import Newsshow from './Components/newsshow'
-import JobComponent from './Components/jobComponent'
-import useWindowDimensions from './Components/setWindowDimensions'
-import Mainbottomwrap from './Components/mainbottomwrap';
-import Backtotop from './Components/backtotop';
-import Footerwrap from './Components/footerwrap';
-import Copyrightwrap from './Components/copyrightwrap';
+import Slideshow from './components/slideshow'
+
+import Bottomwrap from './components/bottomwrap'
+import Newsshow from './components/newsshow'
+import JobComponent from './components/jobComponent'
+import useWindowDimensions from './components/setWindowDimensions'
+import Mainbottomwrap from './components/mainbottomwrap';
+import Backtotop from './components/backtotop';
+import Footerwrap from './components/footerwrap';
+import Copyrightwrap from './components/copyrightwrap';
 import { Action, createStore } from 'redux'
 import IGlobalState, { initialState} from './state/globalState'
 import { Provider } from 'react-redux'

diff --git a/src/Components/backtotop.tsx b/src/Components/backtotop.tsx
@@ -1,8 +1,9 @@
 import React, {useState} from 'react';
 
 
-const ScrollArrow = () =>{
+const ScrollButton = () =>{
 
+  //Controlamos con un Hook si debemos mostrar el botón
   const [showScroll, setShowScroll] = useState(false)
 
   const checkScrollTop = () => {
@@ -26,4 +27,4 @@ const ScrollArrow = () =>{
   );
 }
 
-export default ScrollArrow;
+export default ScrollButton;
diff --git a/src/Components/bottomwrap.tsx b/src/Components/bottomwrap.tsx
@@ -3,11 +3,13 @@ import footer1 from '../Inicio_files/img/cita-secretaria.png'
 import footer2 from '../Inicio_files/img/TFG.png'
 import footer3 from '../Inicio_files/img/etsiiorienta.png'
 import footer4 from '../Inicio_files/img/expon-us250A.png'
+
+
 class Bottomwrap extends React.Component {
     public render () {
 
     return(
-      <div className="container-fluid" id="fav-topwrap">
+    <div className="container-fluid" id="fav-topwrap">
         <div className="title topwrapTitle">
           <h2 className="cardTitleText">Enlaces de Interés</h2>
         </div>
@@ -31,22 +33,19 @@ class Bottomwrap extends React.Component {
     ) }
 }
 
+
 interface IBottomwrapElementProps {
   dsihtml: string,
   classname: string,
   link: string,
   img: string,
-
-
-
 }
 
 interface IBottomwrapElementState {
   dsihtml: string,
   classname: string,
   link: string,
   img: string,
-
 }
 
 class BottomwrapElement extends React.Component<IBottomwrapElementProps, IBottomwrapElementState> {
@@ -59,15 +58,15 @@ class BottomwrapElement extends React.Component<IBottomwrapElementProps, IBottom
   public render(){
     return (
     <div className="moduletable">
-    <style type="text/css" dangerouslySetInnerHTML={{__html: this.state.dsihtml}}/>
-    <div id="favpromote" className={this.state.classname}>
-      <div id="favpromote-uploadimage" className="topwrapImgs">
-        <a href={this.state.link} target="_self">
-          <img src={this.state.img} alt=""/>
-        </a>
-      </div>
-    </div>
-  </div>)
+      <style type="text/css" dangerouslySetInnerHTML={{__html: this.state.dsihtml}}/>
+        <div id="favpromote" className={this.state.classname}>
+          <div id="favpromote-uploadimage" className="topwrapImgs">
+            <a href={this.state.link} target="_self">
+              <img src={this.state.img} alt=""/>
+            </a>
+          </div>
+        </div>
+    </div>)
   }
 }
 

diff --git a/src/Components/copyrightwrap.tsx b/src/Components/copyrightwrap.tsx
@@ -4,7 +4,7 @@ class Copyrightwrap extends React.Component {
     public render () {
 
     return(
-      <div className="container-fluid footerCopyright" id="fav-copyrightwrap">
+    <div className="container-fluid footerCopyright" id="fav-copyrightwrap">
       <div className="row-fluid">
           <div id="fav-showcopyright" className="span3">
             <p className="footerText">© 2021

diff --git a/src/Components/footerwrap.tsx b/src/Components/footerwrap.tsx
@@ -5,7 +5,7 @@ class Footerwrap extends React.Component {
     public render () {
 
     return(
-<div className="container-fluid footer" id="fav-footerwrap">
+    <div className="container-fluid footer" id="fav-footerwrap">
       <div className="row-fluid">
         <div id="fav-footer" className="clearfix">
           <div id="fav-footer1" className="span3">
@@ -24,20 +24,20 @@ class Footerwrap extends React.Component {
                 <a href="https://www.informatica.us.es/index.php/rel-externas" ref="_blank noopener noreferrer"><p className="footerText">Relaciones Externas</p></a>
                 <a href="https://www.informatica.us.es/index.php/servicios" ref="_blank noopener noreferrer"><p className="footerText">Servicios</p></a>
                 <a href="https://www.informatica.us.es/index.php/usuarios" ref="_blank noopener noreferrer"><p className="footerText">Perfiles</p></a>
-                </div>
+              </div>
             </div>
           </div>
           <div id="fav-footer1" className="span4 footerRight">
             <div className="moduletable">
               <div className="custom footerCustom">
-              <p className="footerText">Escuela Técnica Superior de Ingeniería Informática</p>
-              <p className="footerText">Av. Reina Mercedes s/n, 41012 Sevilla</p>
-              <p className="footerText">Contacto: +(34) 954556817</p>
-              <p className="footerText">Encuéntranos en redes sociales:</p>
-              <a href="https://www.facebook.com/pages/Secretar%C3%ADa-ETS-Ingenier%C3%ADa-Inform%C3%A1tica-Univ-Sevilla/196373487061548?ref=ts"><i className="fa fa-facebook-square footerText fa-2x" /> </a> 
-              <a href="https://twitter.com/etsii"><i className="fa fa-twitter-square footerText fa-2x" /> </a> 
-              <a href="https://www.youtube.com/channel/UCic5LtftOI4kAvckx-24gKQ"><i className="fa fa-youtube-square footerText fa-2x" /> </a> 
-                </div>
+                <p className="footerText">Escuela Técnica Superior de Ingeniería Informática</p>
+                <p className="footerText">Av. Reina Mercedes s/n, 41012 Sevilla</p>
+                <p className="footerText">Contacto: +(34) 954556817</p>
+                <p className="footerText">Encuéntranos en redes sociales:</p>
+                <a href="https://www.facebook.com/pages/Secretar%C3%ADa-ETS-Ingenier%C3%ADa-Inform%C3%A1tica-Univ-Sevilla/196373487061548?ref=ts"><i className="fa fa-facebook-square footerText fa-2x" /> </a> 
+                <a href="https://twitter.com/etsii"><i className="fa fa-twitter-square footerText fa-2x" /> </a> 
+                <a href="https://www.youtube.com/channel/UCic5LtftOI4kAvckx-24gKQ"><i className="fa fa-youtube-square footerText fa-2x" /> </a> 
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/Components/jobComponent.tsx b/src/Components/jobComponent.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
 import {Jumbotron, Button} from 'react-bootstrap'
 import imgJumbotron from '../Inicio_files/img/jumbotron.jpg'
+
+
 class JobComponent extends React.Component {
     public render () {
-
     return(
-      <div  id="jumbotron" className="container-fluid jumbotronDiv">
-<Jumbotron style={{backgroundImage: 'url(' + imgJumbotron + ')'}}>
-  <h1 className="jumbotronText">Ofertas de empleo</h1>
-  <p  className="jumbotronText">
-    Con nuestras ferias de prácticas y contactos en empresas, podemos posicionar a nuestros alumnos y egresados en empresas del más alto nivel. ¡No pierdas la oportunidad!
-  </p>
-  <p  className="jumbotronText">
-    <Button variant="primary" href="https://t.me/empleo_etsii">Suscríbete al canal de prácticas de empleo para egresados</Button>
-  </p>
-</Jumbotron>
+    <div  id="jumbotron" className="container-fluid jumbotronDiv">
+      <Jumbotron style={{backgroundImage: 'url(' + imgJumbotron + ')'}}>
+        <h1 className="jumbotronText">Ofertas de empleo</h1>
+        <p  className="jumbotronText">
+        Con nuestras ferias de prácticas y contactos en empresas, podemos posicionar a nuestros alumnos y egresados en empresas del más alto nivel. ¡No pierdas la oportunidad!
+        </p>
+        <p  className="jumbotronText">
+          <Button variant="primary" href="https://t.me/empleo_etsii">Suscríbete al canal de prácticas de empleo para egresados</Button>
+        </p>
+      </Jumbotron>
     </div>
     ) }
 }

diff --git a/src/Components/mainbottomwrap.tsx b/src/Components/mainbottomwrap.tsx
@@ -4,7 +4,7 @@ class Mainbottomwrap extends React.Component {
     public render () {
 
     return(
-      <div className="container-fluid" id="fav-mainbottomwrap">
+    <div className="container-fluid" id="fav-mainbottomwrap">
       <div className="row-fluid">
         <div id="fav-mainbottom" className="clearfix">
           <div id="fav-mainbottom1" className=" span3">
@@ -16,12 +16,11 @@ class Mainbottomwrap extends React.Component {
           <div id="fav-mainbottom2" className="span6">
             <div className="moduletable">
               <div id="faveffects" className="row-fluid">
-              <FaveffectsBox title="Buscar" link="https://www.informatica.us.es/index.php/buscar" backgroundColor="#0099FF" border="4px solid #77C9FF" icon="fa fa-search-plus" />
-              <FaveffectsBox title="Noticias" link="https://www.informatica.us.es/index.php/noticias" backgroundColor="#FF6666" border="3px solid #FFCCCC" icon="fa fa-file-text-o" />
-              <FaveffectsBox title="Directorio" link="https://www.informatica.us.es/index.php/directorio" backgroundColor="#65479B" border="3px solid #A48ECB" icon="fa fa-phone" />
-              <FaveffectsBox title="Tablón de Anuncios" link="https://www.informatica.us.es/index.php/practicas-en-empresas/tablon-de-anuncios/otras-ofertas" backgroundColor="#FF7B2D" border="3px solid #FFC6A4" icon="fa fa-tags" />
-              <FaveffectsBox title="Mapa del Sitio" link="https://www.informatica.us.es/index.php/mapa-del-sitio" backgroundColor="#37B1C2" border="4px solid #90D6E0" icon="fa fa-sitemap" />
-
+                <FaveffectsBox title="Buscar" link="https://www.informatica.us.es/index.php/buscar" backgroundColor="#0099FF" border="4px solid #77C9FF" icon="fa fa-search-plus" />
+                <FaveffectsBox title="Noticias" link="https://www.informatica.us.es/index.php/noticias" backgroundColor="#FF6666" border="3px solid #FFCCCC" icon="fa fa-file-text-o" />
+                <FaveffectsBox title="Directorio" link="https://www.informatica.us.es/index.php/directorio" backgroundColor="#65479B" border="3px solid #A48ECB" icon="fa fa-phone" />
+                <FaveffectsBox title="Tablón de Anuncios" link="https://www.informatica.us.es/index.php/practicas-en-empresas/tablon-de-anuncios/otras-ofertas" backgroundColor="#FF7B2D" border="3px solid #FFC6A4" icon="fa fa-tags" />
+                <FaveffectsBox title="Mapa del Sitio" link="https://www.informatica.us.es/index.php/mapa-del-sitio" backgroundColor="#37B1C2" border="4px solid #90D6E0" icon="fa fa-sitemap" />
               </div>
             </div>
           </div>
@@ -37,16 +36,12 @@ class Mainbottomwrap extends React.Component {
     ) }
 }
 
-
 interface IFaveffectsBoxProps {
   title: string ,
   link: string,
   icon: string,
   backgroundColor: string,
   border: string,
-
-
-
 }
 
 interface IFaveffectsBoxState {
@@ -55,7 +50,6 @@ interface IFaveffectsBoxState {
   icon: string,
   backgroundColor: string,
   border: string,
-
 }
 
 
@@ -67,11 +61,10 @@ class FaveffectsBox extends React.Component<IFaveffectsBoxProps, IFaveffectsBoxS
 
   public render () {
     return (
-      <div id="faveffects-box1" className="span2-4">
+    <div id="faveffects-box1" className="span2-4">
       <div id="faveffects-icon1" className="faveffects-effect6" style={{backgroundColor: this.state.backgroundColor, border: this.state.border, WebkitBorderRadius: '50%', MozBorderRadius: '50%', borderRadius: '50%'}}>
         <a href={this.state.link} target="_self">
-          <i className={this.state.icon} style={{color: '#EEEEEE', fontSize: '2em'}}>
-          </i>
+          <i className={this.state.icon} style={{color: '#EEEEEE', fontSize: '2em'}} />
         </a>
       </div>
       <p id="faveffects-title1" style={{fontFamily: 'PT Sans Narrow', fontSize: 18}}>      

diff --git a/src/Components/navbar.tsx b/src/Components/navbar.tsx
@@ -5,7 +5,6 @@ import etsiilogo from '../Inicio_files/img/logotest.png'
 interface INBProps {
 collapsed: boolean
 onButtonClick: (collapsed: boolean) => any;
-
 }
 
 interface INBState {
@@ -24,23 +23,21 @@ class NB extends React.Component<INBProps, INBState> {
 
     return(
       <Navbar className="Opacity" bg="light" expand="lg" sticky="top">
-      <Navbar.Brand href="#home" className="navbarBrand">
-      <img src={etsiilogo} alt="ETSII" className="navbarLogo"/>
-
-
-      </Navbar.Brand>
-      <Navbar.Toggle aria-controls="basic-navbar-nav" />
-      <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
-        <Nav className="justify-content-end navbarLinks">
-        <Nav.Link href="https://www.informatica.us.es/index.php/la-escuela">La Escuela</Nav.Link>
-        <Nav.Link href="https://www.informatica.us.es/index.php/estudios">Estudios</Nav.Link>
-        {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/organizacion-docente">Organización Docente</Nav.Link> : null  }
-        {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/rel-externas">Relaciones Externas</Nav.Link> : null  }
-        {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/servicios">Servicios</Nav.Link> : null  }
-        {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/usuarios">Perfiles</Nav.Link> : null  }
-        <Nav.Link onClick={() => this.props.onButtonClick(!!!this.props.collapsed)}>...</Nav.Link> 
-        <Button variant="outline-primary" size="sm" className="navbarButton">Iniciar Sesión</Button>
-        </Nav>
+        <Navbar.Brand href="#home" className="navbarBrand">
+          <img src={etsiilogo} alt="ETSII" className="navbarLogo"/>
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
+          <Nav className="justify-content-end navbarLinks">
+            <Nav.Link href="https://www.informatica.us.es/index.php/la-escuela">La Escuela</Nav.Link>
+            <Nav.Link href="https://www.informatica.us.es/index.php/estudios">Estudios</Nav.Link>
+            {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/organizacion-docente">Organización Docente</Nav.Link> : null  }
+            {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/rel-externas">Relaciones Externas</Nav.Link> : null  }
+            {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/servicios">Servicios</Nav.Link> : null  }
+            {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/usuarios">Perfiles</Nav.Link> : null  }
+            <Nav.Link onClick={() => this.props.onButtonClick(!!!this.props.collapsed)}>...</Nav.Link> 
+            <Button variant="outline-primary" size="sm" className="navbarButton">Iniciar Sesión</Button>
+          </Nav>
       </Navbar.Collapse>
     </Navbar>
     ) }