Finalización de refactorización de página

src/App.tsx

@@ -5,50 +5,90 @@ import './components/Menu-lateral'
 import Menulateral from './components/Menu-lateral';
 import Headerlogin from './components/Header-login';
 import Headerinicio from './components/Hedaer-inicio';
-import MenuComisiones from './components/Menu-comisiones';
+import MenuComisiones from './containers/Menu-comisiones';
 import Social from './components/Social';
 import Footernormal from './components/Footer-normal';
 import FooterSocial from './components/Footer-social';
 import Footerbolitas from './components/Footer-bolitas';
+import IndividualDetails from './containers/Individual-details';
+import { Action, createStore } from 'redux';
+import IGlobalState, { initialState } from './state/globalState';
+import { IMenuComisionesAction, IMenuComisionesAprobacionAction, IMenuComisionesEventosAction, IMenuComisionesFuncionesAction, IMenuComisionesMiembrosAction, IMenuComisionesParrafoAction, IMenuComisionesTitleAction, MenuComisionesActions } from './actions/MenuComisionesActions';
+import { Provider } from 'react-redux';
+
+
+const reducer = (state: IGlobalState = initialState, action: Action) => {
+  // En el vídeo de teoría se indica que es poco óptimo pero que ya se explicarán mejores maneras de abordar esta parte
+
+  switch (action.type) {
+    // CASOS PARA EL BOTÓN
+    case MenuComisionesActions.COLLAPSE:
+      const collapseAction = action as IMenuComisionesAction;
+      return { ...state, collapsed: collapseAction.payload }
+    case MenuComisionesActions.TITLE:
+      const titleAction = action as IMenuComisionesTitleAction;
+      return { ...state, title: titleAction.payload }
+    case MenuComisionesActions.FUNCIONES:
+      const funcionesAction = action as IMenuComisionesFuncionesAction;
+      return { ...state, funciones: funcionesAction.payload }
+
+    case MenuComisionesActions.EVENTOS:
+      const eventosAction = action as IMenuComisionesEventosAction;
+      return { ...state, events: eventosAction.payload }
+
+    case MenuComisionesActions.PARRAFO:
+      const parrafoAction = action as IMenuComisionesParrafoAction;
+      return { ...state, parrafo: parrafoAction.payload }
+    case MenuComisionesActions.MIEMBROS:
+      const miembrosAction = action as IMenuComisionesMiembrosAction;
+      console.log(miembrosAction.payload)
+      return { ...state, miembros: miembrosAction.payload }
+
+    case MenuComisionesActions.APROBACION:
+      const aprobacionAction = action as IMenuComisionesAprobacionAction;
+      return { ...state, aprobacion: aprobacionAction.payload }
+  }
+  return state;
+}
+
+const store = createStore(reducer, initialState)
+
 function App() {
   return (
-    <div className="App">
+    <Provider store={store} >
+      <div className="App">
 
-      <Headerlogin></Headerlogin>
-      <Headerinicio></Headerinicio>
-      <div className="container-fluid" id="fav-mainwrap">
-        <div className="row-fluid">
-          <div id="fav-main" className="clearfix">
+        <Headerlogin></Headerlogin>
+        <Headerinicio></Headerinicio>
+        <div className="container-fluid" id="fav-mainwrap">
+          <div className="row-fluid">
+            <div id="fav-main" className="clearfix">
 
-            <Menulateral></Menulateral>
-            <div id="fav-maincontent" className="span9">
-              <div id="system-message-container">
-              </div>
-              <div className="item-page" >
-                <div className="page-header">
-                  <h2 >  Comisiones		</h2>
-                </div>
-                <div>
-                  <Social></Social>
+              <Menulateral></Menulateral>
+              <div id="fav-maincontent" className="span9">
+                <div id="system-message-container">
                 </div>
-                <div>
+                <div className="item-page" >
+
+
                   <MenuComisiones></MenuComisiones>
+                  <IndividualDetails></IndividualDetails>
+
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <Footerbolitas></Footerbolitas>
-      <div ></div>
+        <Footerbolitas></Footerbolitas>
+        <div ></div>
 
 
 
 
-      <Footernormal></Footernormal>
-      <FooterSocial></FooterSocial>
-    </div>
-
+        <Footernormal></Footernormal>
+        <FooterSocial></FooterSocial>
+      </div>
+    </Provider>
 
   );
 }

src/actions/MenuComisionesActions.ts

@@ -0,0 +1,34 @@
+import { Action } from 'redux';
+
+export enum MenuComisionesActions {
+    COLLAPSE = 'COLLAPSE',
+    TITLE = 'TITLE',
+    FUNCIONES = 'FUNCIONES',
+    PARRAFO = 'PARRAFO',
+    APROBACION = 'APROBACION',
+    MIEMBROS = 'MIEMBROS',
+    EVENTOS = 'EVENTOS'
+}
+export interface IMenuComisionesAction extends Action {
+    payload: boolean;
+}
+export interface IMenuComisionesTitleAction extends Action {
+    payload: string;
+}
+export interface IMenuComisionesFuncionesAction extends Action {
+    payload: String[];
+}
+
+
+export interface IMenuComisionesParrafoAction extends Action {
+    payload: string;
+}
+export interface IMenuComisionesAprobacionAction extends Action {
+    payload: string;
+}
+export interface IMenuComisionesMiembrosAction extends Action {
+    payload: String[];
+}
+export interface IMenuComisionesEventosAction extends Action {
+    payload: String[];
+}

src/components/Individual-details.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import Social from '../components/Social';
+
+interface IIndividualDetailsProps {
+    collapsed: boolean;
+    title: string;
+    events: Array<String>;
+    funciones: Array<String>;
+    parrafo: string;
+    aprobacion: string;
+    miembros: Array<String>;
+}
+
+class IndividualDetails extends React.Component<IIndividualDetailsProps, {}> {
+    constructor(props: IIndividualDetailsProps) {
+        super(props);
+
+    }
+    public render() {
+        const listfuncione = this.props.funciones.map((funcione) =>
+            <li>{funcione}</li>
+        )
+        const listMiembros = this.props.miembros.slice(1, this.props.miembros.length - 1).map((member) =>
+
+            <div>
+                {member}<br />
+            </div>
+
+
+
+        )
+        const listEvent = this.props.events.map((event) =>
+
+
+            <div >
+                <div className="clr"></div>
+                <div className="contenido-65"><a >{event}</a></div>
+            </div>
+
+        )
+        return (
+            <div>
+                {!!!this.props.collapsed ?
+                    <div>
+                        <div className="page-header">
+                            <h2 >  {this.props.title}	</h2>
+                        </div>
+                        <div>
+                            <Social></Social>
+                        </div>
+                        <div style={{ clear: 'both' }}>
+                            <p>{this.props.parrafo}</p>
+                            <ul>
+                                {listfuncione}
+                            </ul>
+
+                            <div className="colum_97">
+                                <div className="bubble-dir">
+                                    <p><b>Miembros de la Comisión</b><br />{this.props.aprobacion}</p>
+                                    <div className="linea">
+
+
+                                        <blockquote>
+                                            <b> {this.props.miembros[0]}</b><br />
+                                            {listMiembros}
+
+                                        </blockquote>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="colum_97">
+                                <div className="bubble-dir">
+                                    <p><b>Convocatorias y Acuerdos</b>
+                                    </p>
+
+
+                                    <div className="linea">
+                                        <blockquote>
+                                            {listEvent}
+                                        </blockquote>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <p></p>
+                        </div>
+                    </div>
+                    : null}
+            </div>
+
+        )
+    };
+}
+
+export default IndividualDetails;