ReactJS-BA · ghost · Apr 22, 2016 · Apr 22, 2016
diff --git a/DOC05.md b/DOC05.md
@@ -0,0 +1,52 @@
+## DOC05 05 Dando estilo a la app con Material-UI
+
+Instalar Material-UI 
+
+* En este paso vamos a darle un poco más de vida y estilo a nuestra app utilizando los componentes de Material-UI. Se requieren las siguientes dependencias:
+
+```
+"material-ui": "^0.15.0-beta.1"
+"react-tap-event-plugin": "^1.0.0"
+```
+
+* Para instalar Material-UI, realizar en 'app.js' las siguientes importaciones:
+
+```
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+```
+
+* Para modificar el theme de Material UI (por ejemplo, cambiar los colores) debemos utilizar 'getMuiTheme' para crear nuestro estilo y establecer el contexto. Posteriormente 'MuiThemeProvider' servirá para aplicar dichos estilos a nuestros componentes.
+
+* Posteriormente, simplemente crean la paleta de colores y se importa cada componente de MUI para renderizarlo. Por ejemplo:
+
+```
+import React from 'react';
+import {render} from 'react-dom';
+
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
+import {grey800} from 'material-ui/styles/colors';
+
+import AppBar from 'material-ui/AppBar';
+
+const muiTheme = getMuiTheme({
+  palette: {
+    primary1Color: grey800
+  }
+});
+
+class App extends React.Component {
+    render() {
+        return (
+                <MuiThemeProvider muiTheme={muiTheme}>
+                    <AppBar title="Explorador de Repos de GitHub!" />
+                </MuiThemeProvider>
+        )
+    }
+};
+```
+
+* Para entender más y sacarle provecho a Material-UI, te recomiendo leer toda la documentación:
+http://www.material-ui.com/v0.15.0-alpha.1/ 
diff --git a/main.css b/main.css
@@ -1,17 +1,45 @@
-html, body { background: #f9f9f9; padding: 0; margin: 0; }
-body { border-top: 5px solid #307ace; }
-ul { list-style-type: none; padding: 0; margin: 0; }
-li { width: 90%; margin: 10px auto; background: #f7f7f7; border: 1px solid #307ace; border-radius: 4px; padding: 10px; }
-li img { border-radius: 2px; }
-input { padding: 10px; font-size: 16px; width: 90%; display: block; border: 1px solid #307ace; background: #fff; margin: 10px 10px auto; }
-.repo-link { display: block; width: 90%; margin: 10px auto; background: #fff; color: #307ace; text-decoration: none; padding: 10px; }
-h2, p { margin: 0; }
-.repo-link p { color: #333; font-family: Helvetica, arial, sans-serif; font-size: 14px; }
-.repo-link:hover { background: #f1f1f1; }
-small { color: #777; }
-h1 { text-align: center; color: #222; }
-.commit { background: #fff; }
-.commit img { float: left; margin-right: 10px; }
-.commit h2 { font-size: 16px; }
-.logo {padding: 10px;}
-.content h2 {margin-left: 10px;}
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  position: relative;
+  font-family: 'Roboto', sans-serif;
+  overflow-x: hidden;
+  background-color: #f9f9f9;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+#app a:link, #app a:hover {
+  text-decoration: none;
+}
+
+p {
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.footer {
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  height: auto;
+  padding: 4em;
+  text-transform: uppercase;
+  font-size: 14px;
+}
+
+@media only screen and (min-width: 40.063em) {
+  .footer.fixed-bottom {
+    position: fixed;
+    z-index: -99;
+  }
+  .footer.fixed-bottom h6 {
+    margin-top: 0;
+  }
+}
diff --git a/package.json b/package.json
@@ -19,9 +19,11 @@
   },
   "homepage": "https://github.com/ReactJS-BA/meetup-2016-04-05#readme",
   "dependencies": {
-    "react": "^0.14.8",
-    "react-dom": "^0.14.8",
+    "material-ui": "^0.15.0-beta.1",
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
     "react-router": "^2.0.1",
+    "react-tap-event-plugin": "^1.0.0",
     "redux": "^3.3.1",
     "redux-thunk": "^2.0.1"
   },

diff --git a/src/app.js b/src/app.js
@@ -1,50 +1,122 @@
 import React from 'react';
 import {render} from 'react-dom';
 import {Link, Router, Route, browserHistory} from 'react-router';
+
+/* Components */
 import ListaRepos from './components/lista-repos';
 import ListaMensajesCommit from './components/lista-mensajes-commit';
 
-const Logo = () => <div className="logo col-sm-04"><Link to="/"><img src="public/images/logo.png" /></Link></div> 
+/* Materia-UI Settings */
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import {grey800, orange800} from 'material-ui/styles/colors';
+/* Material-UI Components */
+import AppBar from 'material-ui/AppBar';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+import Card from 'material-ui/Card';
+
+/* Inject Material-UI */
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+/* Material-UI Customization */
+const muiTheme = getMuiTheme({
+  palette: {
+    /* More colors: http://www.material-ui.com/#/customization/colors */
+    primary1Color: grey800,
+    accent1Color: orange800
+  }
+});
 
+/* ! APP ! */
 class App extends React.Component {
     constructor(props) {
         super(props);
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
     getChildContext() {
-        return {params: this.props.params};
+        return {muiTheme: getMuiTheme()};
     }
 
     handleSubmit(e) {
         e.preventDefault();
-        let username = this.refs.input.value;
+        let username = this.refs.myInput.getValue();
         browserHistory.push('/' + username);
     }
 
     render() {
-        return <div className="container">
-          <div className="row">
-            <Logo />
-            <div className="content col-sm-08">
-                <h2>Bienvenidos al Explorador de Repos de GitHub</h2>
-                <form method="get" action="/" onSubmit={this.handleSubmit}>
-                    <input type="text" ref="input" placeholder="Ingresar un usuario de GitHub y apretar enter" />
-                </form>
-                {this.props.children}
-            </div>
-          </div>
-        </div>;
+        return (
+            <MuiThemeProvider muiTheme={muiTheme}>
+                <div style={{height: '100%'}}>
+                    <Link to="/">
+                        <AppBar style={{textAlign: 'center'}} title="Explorador de Repos de GitHub!" 
+                        />
+                    </Link>
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-md-6 col-md-offset-3 text-center" style={{ marginTop: 50 }}>
+                                <p>
+                                    Ingresar a continuación el nombre de usuario de <strong>GitHub</strong> de quien deseas buscar los repositorios a los cuales contribuyó.
+                                </p>
+                            </div>
+                        </div>
+                        <div className="row">
+                            <div className="col-md-10">
+                                <Card style={{ marginTop: 50, padding: '5px 25px' }}>
+                                    <form method="get" action="/" onSubmit={this.handleSubmit}>
+                                        <TextField
+                                            ref="myInput"
+                                            hintText="@username de GitHub"
+                                            fullWidth={true}
+                                        />
+                                    </form>
+                                </Card>
+                            </div>
+                            <div className="col-md-2">
+                                <RaisedButton 
+                                    onClick={this.handleSubmit}
+                                    style={{ marginTop: 50, height: '58px', width: '150px' }}
+                                    label="Buscar" 
+                                    secondary={true} 
+                                />
+                            </div>
+                        </div>
+                        <div className="row" style={{ marginBottom: 200 }}>
+                            <div className="col-md-12">
+                                {this.props.children}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="footer">
+                        <div className="container">
+                            <div className="row">
+                                <div className="col-md-12 text-center">
+                                    <p>OPEN SOURCE</p>
+                                    <a href="https://github.com/ReactJS-BA/meetup-2016-04-05">Ver repositorio en GitHub</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </MuiThemeProvider>
+        )
     }
 };
 
-App.childContextTypes = {params: React.PropTypes.object};
+App.childContextTypes = {
+  muiTheme: React.PropTypes.object
+};
 
+/* Rendering */
 render((
+    /* Router Config */
     <Router history={browserHistory}>
         <Route path="/" component={App}>
             <Route path=":username" component={ListaRepos} />
             <Route path=":username/:repository" component={ListaMensajesCommit} />
         </Route>
     </Router>
 ), document.getElementById('app'));
+
diff --git a/src/components/link-repo.js b/src/components/link-repo.js
@@ -1,16 +1,24 @@
 import React from 'react';
+import {Component} from 'react';
 import {Link} from 'react-router';
 
+/* Material-UI Components */
+import List from 'material-ui/List';
+import ListItem from 'material-ui/List/ListItem';
+import Avatar from 'material-ui/Avatar';
+import FileFolder from 'material-ui/svg-icons/file/folder';
 
-class LinkRepo extends React.Component {
+class LinkRepo extends Component {
     render() {
         let url = this.props.repo.owner.login + '/' + this.props.repo.name;
         return (
-            <Link to={url} className="repo-link">
-                <h2>{url}</h2>
-                <p>{this.props.repo.description}</p>
-                <p><small>{this.props.repo.watchers_count} Watchers</small></p>
-            </Link>
+                <Link to={url}>
+                <ListItem
+                    leftAvatar={<Avatar icon={<FileFolder />} />}
+                    primaryText={url}
+                    secondaryText={this.props.repo.description}
+                />
+                </Link>
         );
     }
 };

diff --git a/src/components/lista-mensajes-commit.js b/src/components/lista-mensajes-commit.js
@@ -1,9 +1,19 @@
 import React from 'react';
+import {Component} from 'react';
+
+/* Store / Actions */
 import store from '../store/store';
 import {addUser, loadRepository} from '../store/actions';
+
+/* Import Components */
 import MensajeCommit from './mensaje-commit';
 
-class ListaMensajesCommit extends React.Component {
+/* Material-UI Components */
+import List from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+
+
+class ListaMensajesCommit extends Component {
     constructor(props) {
         super(props);
         this.state = {history: []};
@@ -35,12 +45,14 @@ class ListaMensajesCommit extends React.Component {
     }
 
     render() {
-        return <ul className="repository">
-            <h1>Mostrando Commits Recientes en {this.props.params.username}/{this.props.params.repository}</h1>
-            {this.state.history.map(function(commit, i) {
-                return <MensajeCommit commit={commit} key={i} />;
-            })}
-        </ul>;
+        return (
+            <List style={{ marginTop: 50 }}>
+                <Subheader>Mostrando <u>commits recientes</u> en <strong>{this.props.params.username}/{this.props.params.repository}</strong></Subheader>
+                {this.state.history.map(function(commit, i) {
+                        return <MensajeCommit commit={commit} key={i} />;
+                })}
+            </List>
+                );
     }
 };
 

diff --git a/src/components/lista-repos.js b/src/components/lista-repos.js
@@ -1,10 +1,19 @@
 import React from 'react';
+import {Component} from 'react';
+
+/* Store / Actions */
 import store from '../store/store';
 import {addUser, loadUser} from '../store/actions';
+
+/* Import Components */
 import LinkRepo from './link-repo';
 
+/* Material-UI Components */
+import List from 'material-ui/List';
+import Divider from 'material-ui/Divider';
+import Subheader from 'material-ui/Subheader';
 
-class ListaRepos extends React.Component {
+class ListaRepos extends Component {
     constructor(props) {
         super(props);
         this.state = {repositories: []};
@@ -40,12 +49,14 @@ class ListaRepos extends React.Component {
     }
 
     render() {
-        return (<div id="repository-list">
-            <h1>Mostrando Repositorios a los cuales contribuye {this.props.params.username} </h1>
-            {this.state.repositories.map(function(repo, i) {
-                return <LinkRepo repo={repo} key={i} />;
-            })}
-        </div>);
+        return (
+            <List style={{ marginTop: 50 }}>
+                <Subheader>Repositorios a los cuales contribuyó <strong>@{this.props.params.username}</strong></Subheader>
+                {this.state.repositories.map(function(repo, i) {
+                    return <LinkRepo repo={repo} key={i} />;
+                })}
+            </List>
+        );
     }
 }