diff --git a/app/README.md b/app/README.md new file mode 100644 index 000000000..68329b7aa --- /dev/null +++ b/app/README.md @@ -0,0 +1,5 @@ +In this application is used: +React, React-Router, Redux, React-Redux and React-Bootstrap. It is also used flexbox at some time. + +About this app: +In this application of League shows the information of the players, you can choose the favorite teams, you can make purchases in the store and see a calendar of the matches that were played. \ No newline at end of file diff --git a/app/package.json b/app/package.json new file mode 100644 index 000000000..a065342d2 --- /dev/null +++ b/app/package.json @@ -0,0 +1,20 @@ +{ + "name": "app", + "version": "0.1.0", + "private": true, + "dependencies": { + "react": "^16.2.0", + "react-bootstrap": "^0.32.1", + "react-dom": "^16.2.0", + "react-redux": "^5.0.7", + "react-router-dom": "^4.2.2", + "react-scripts": "1.1.1", + "redux": "^4.0.0" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} diff --git a/app/public/index.html b/app/public/index.html new file mode 100644 index 000000000..df6081df0 --- /dev/null +++ b/app/public/index.html @@ -0,0 +1,11 @@ + + + + + + League + + +
+ + diff --git a/app/src/Router.js b/app/src/Router.js new file mode 100644 index 000000000..3cf9c2627 --- /dev/null +++ b/app/src/Router.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { BrowserRouter, Route, Switch } from 'react-router-dom'; + +import Jugadores from './components/jugadores/Jugadores'; +import FavoriteTeam from './components/favorite-team/FavoriteTeam'; +import Shop from './components/shop/Shop'; +import Calendario from './components/calendario/Calendario'; +import NotFound from './components/common/not-found/NotFound'; + +const Router = () => ( + + + + + + + + + +) + +export default Router; diff --git a/app/src/actionCreators.js b/app/src/actionCreators.js new file mode 100644 index 000000000..72c14ff68 --- /dev/null +++ b/app/src/actionCreators.js @@ -0,0 +1,15 @@ +const addToCart = product => { + return { + type: "ADD_TO_CART", + product + } +} + +const removeFromCart = product => { + return { + type: "REMOVE_FROM_CART", + product + } +} + +export { addToCart, removeFromCart }; \ No newline at end of file diff --git a/app/src/assets/fotos/ernesto.png b/app/src/assets/fotos/ernesto.png new file mode 100644 index 000000000..0250c77ea Binary files /dev/null and b/app/src/assets/fotos/ernesto.png differ diff --git a/app/src/assets/fotos/hugo.png b/app/src/assets/fotos/hugo.png new file mode 100644 index 000000000..b36dc9845 Binary files /dev/null and b/app/src/assets/fotos/hugo.png differ diff --git a/app/src/assets/fotos/jose.png b/app/src/assets/fotos/jose.png new file mode 100644 index 000000000..f3a6b638c Binary files /dev/null and b/app/src/assets/fotos/jose.png differ diff --git a/app/src/assets/fotos/juan.png b/app/src/assets/fotos/juan.png new file mode 100644 index 000000000..03c64f259 Binary files /dev/null and b/app/src/assets/fotos/juan.png differ diff --git a/app/src/assets/fotos/luis.png b/app/src/assets/fotos/luis.png new file mode 100644 index 000000000..a9065ffc7 Binary files /dev/null and b/app/src/assets/fotos/luis.png differ diff --git a/app/src/assets/fotos/manuel.png b/app/src/assets/fotos/manuel.png new file mode 100644 index 000000000..b332b0115 Binary files /dev/null and b/app/src/assets/fotos/manuel.png differ diff --git a/app/src/assets/fotos/paco.png b/app/src/assets/fotos/paco.png new file mode 100644 index 000000000..7d7840e94 Binary files /dev/null and b/app/src/assets/fotos/paco.png differ diff --git a/app/src/assets/fotos/sergio.png b/app/src/assets/fotos/sergio.png new file mode 100644 index 000000000..f4d46ef01 Binary files /dev/null and b/app/src/assets/fotos/sergio.png differ diff --git a/app/src/assets/logos/felinos.png b/app/src/assets/logos/felinos.png new file mode 100644 index 000000000..3f5c945c0 Binary files /dev/null and b/app/src/assets/logos/felinos.png differ diff --git a/app/src/assets/logos/piratas.png b/app/src/assets/logos/piratas.png new file mode 100644 index 000000000..475ba76a0 Binary files /dev/null and b/app/src/assets/logos/piratas.png differ diff --git a/app/src/assets/logos/tiburones.png b/app/src/assets/logos/tiburones.png new file mode 100644 index 000000000..388ba2c70 Binary files /dev/null and b/app/src/assets/logos/tiburones.png differ diff --git a/app/src/assets/stadium.png b/app/src/assets/stadium.png new file mode 100644 index 000000000..85fb5a1e9 Binary files /dev/null and b/app/src/assets/stadium.png differ diff --git a/app/src/components/calendario/Calendario.css b/app/src/components/calendario/Calendario.css new file mode 100644 index 000000000..1f649d0c4 --- /dev/null +++ b/app/src/components/calendario/Calendario.css @@ -0,0 +1,6 @@ +.calendarios { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} \ No newline at end of file diff --git a/app/src/components/calendario/Calendario.js b/app/src/components/calendario/Calendario.js new file mode 100644 index 000000000..905337a2e --- /dev/null +++ b/app/src/components/calendario/Calendario.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react'; +import { Grid, PageHeader } from 'react-bootstrap'; + +import './Calendario.css'; + +import Juego from './../common/juego/Juego'; + +import LogoFelinos from './../../assets/logos/felinos.png'; +import LogoPiratas from './../../assets/logos/piratas.png'; +import LogoTiburones from './../../assets/logos/tiburones.png'; + +class Calendario extends Component { + render() { + return ( + + + Calendar Results of all league matches + + +
+ + + +
+ + ); + } +} + +export default Calendario; diff --git a/app/src/components/common/equipo/Equipo.css b/app/src/components/common/equipo/Equipo.css new file mode 100644 index 000000000..b8925db38 --- /dev/null +++ b/app/src/components/common/equipo/Equipo.css @@ -0,0 +1,17 @@ +.team-logo { + width: 150px; + filter: drop-shadow(5px 5px 5px #222); +} + +.like { + font-size: 25px; + cursor: pointer; + filter: drop-shadow(1px 1px #222); +} + +.like_selected { + font-size: 25px; + cursor: pointer; + filter: drop-shadow(1px 1px #222); + color: red; +} diff --git a/app/src/components/common/equipo/Equipo.js b/app/src/components/common/equipo/Equipo.js new file mode 100644 index 000000000..badd5fbdc --- /dev/null +++ b/app/src/components/common/equipo/Equipo.js @@ -0,0 +1,51 @@ +import React, { Component } from 'react'; +import { Glyphicon } from 'react-bootstrap'; + +import './Equipo.css'; + +class Equipo extends Component { + state = { + equipos: [], + fav: { value: 'like' } + } + + // When you give "like ♥" to a team, it stays saved even if you restart the browser + + componentDidMount() { + const localFavs = localStorage.getItem(this.props.nombre); + + if (localFavs) { + this.setState({ + fav: JSON.parse(localFavs) + }) + } + } + + setFav() { + const fav = { ...this.state.fav }; + fav.value = fav.value === 'like' ? 'like_selected' : 'like'; + + this.setState({ + fav + }); + } + + componentDidUpdate() { + localStorage.setItem(this.props.nombre, JSON.stringify(this.state.fav)); + } + + render() { + return ( +
+ {this.props.nombre} +

+
+ ); + } +} + +export default Equipo; diff --git a/app/src/components/common/header/Header.js b/app/src/components/common/header/Header.js new file mode 100644 index 000000000..23802089b --- /dev/null +++ b/app/src/components/common/header/Header.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react'; +import { Navbar, Nav, NavItem, Glyphicon } from 'react-bootstrap'; + +class Header extends Component { + render() { + return ( + + + + League + + + + + + + + ); + } +} + +export default Header; diff --git a/app/src/components/common/juego/Juego.css b/app/src/components/common/juego/Juego.css new file mode 100644 index 000000000..a0b85d35f --- /dev/null +++ b/app/src/components/common/juego/Juego.css @@ -0,0 +1,27 @@ +.juegos { + display: flex; +} + +.card-game { + width: 200px; + margin: 20px; +} + +.logo-score { + display: flex; + justify-content: center; + align-items: center; +} + +.score-game { + font-size: 40px; +} + +.info-game { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + text-align: center; + font-size: 12px; +} \ No newline at end of file diff --git a/app/src/components/common/juego/Juego.js b/app/src/components/common/juego/Juego.js new file mode 100644 index 000000000..cae2174ab --- /dev/null +++ b/app/src/components/common/juego/Juego.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import { Image } from 'react-bootstrap'; + +import Equipo from './../equipo/Equipo'; +import Stadium from './../../../assets/stadium.png'; + +import './Juego.css'; + +class Juego extends Component { + render() { + return ( +
+ {/* Equipo local */} +
+
+ +
+ {this.props.localAnotaciones} +
+
+
+ +
+ {this.props.estadio} +

{this.props.estadio}
+ {this.props.fecha}
+ {this.props.hora} +

+
+ + {/* Equipo visitante */} +
+
+
+ {this.props.visitanteAnotaciones} +
+ +
+
+
+ ); + } +} + +export default Juego; diff --git a/app/src/components/common/jugador/Jugador.css b/app/src/components/common/jugador/Jugador.css new file mode 100644 index 000000000..70645b575 --- /dev/null +++ b/app/src/components/common/jugador/Jugador.css @@ -0,0 +1,8 @@ +.picture { + width: 150px; + filter: drop-shadow(5px 5px 5px #222); +} + +.name { + font-size: 22px; +} diff --git a/app/src/components/common/jugador/Jugador.js b/app/src/components/common/jugador/Jugador.js new file mode 100644 index 000000000..1d35af456 --- /dev/null +++ b/app/src/components/common/jugador/Jugador.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import { Grid, Button, Glyphicon, Collapse, Well } from 'react-bootstrap'; + +import './Jugador.css'; + +class Jugador extends Component { + + constructor(props, context) { + super(props, context); + + this.state = { + open: false + }; + } + + render() { + return ( + + {this.props.nombre} +
+

{this.props.nombre}

+
+
+ + +
+ +

Age: {this.props.edad}
+ Nick: {this.props.apodo}
+ Position: {this.props.posicion} +

+ +
+ +
+
+ + ); + } +} + +export default Jugador; diff --git a/app/src/components/common/not-found/NotFound.css b/app/src/components/common/not-found/NotFound.css new file mode 100644 index 000000000..c59f31701 --- /dev/null +++ b/app/src/components/common/not-found/NotFound.css @@ -0,0 +1,3 @@ +.error-404 { + font-size: 30px; +} \ No newline at end of file diff --git a/app/src/components/common/not-found/NotFound.js b/app/src/components/common/not-found/NotFound.js new file mode 100644 index 000000000..b7469d233 --- /dev/null +++ b/app/src/components/common/not-found/NotFound.js @@ -0,0 +1,13 @@ +import React from "react"; +import { Grid, Glyphicon } from 'react-bootstrap'; + +import './NotFound.css' + +const NotFound = () => ( + +

Error 404

+

Page not found

+ +); + +export default NotFound; diff --git a/app/src/components/favorite-team/FavoriteTeam.js b/app/src/components/favorite-team/FavoriteTeam.js new file mode 100644 index 000000000..a89a07044 --- /dev/null +++ b/app/src/components/favorite-team/FavoriteTeam.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react'; +import { Grid, PageHeader, Glyphicon, Row, Col } from 'react-bootstrap'; + +import Equipo from '../common/equipo/Equipo'; + +class FavoriteTeam extends Component { + state = { + equipos: [] + } + + componentDidMount() { + fetch('https://api-mi-liga.now.sh/api/equipos') + .then(response => response.json()) + .then(equipos => { + this.setState({ + equipos: equipos + }) + }) + .catch(error => console.log(error)); + } + + render() { + return ( + + + Best teams Click on the icon to choose favorite teams + + + + { + this.state.equipos.map((equipo, index) => { + return + }) + } + + + + ); + } +} + +export default FavoriteTeam; diff --git a/app/src/components/jugadores/Jugadores.js b/app/src/components/jugadores/Jugadores.js new file mode 100644 index 000000000..cc3693ac7 --- /dev/null +++ b/app/src/components/jugadores/Jugadores.js @@ -0,0 +1,49 @@ +import React, { Component } from 'react'; +import { Grid, PageHeader, Row, Col } from 'react-bootstrap'; + +import Jugador from './../common/jugador/Jugador'; + +class Jugadores extends Component { + state = { + jugadores: [] + } + + componentDidMount() { + fetch('https://api-mi-liga.now.sh/api/jugadores') + .then(response => response.json()) + .then(jugadores => { + this.setState({ + jugadores: jugadores + }) + }) + .catch(error => console.log(error)); + } + + render() { + return ( + + + List of players See the info of the best players + + + + { + this.state.jugadores.map((jugador, index) => { + return + }) + } + + + + ); + } +} + +export default Jugadores; diff --git a/app/src/components/shop/ProductList.css b/app/src/components/shop/ProductList.css new file mode 100644 index 000000000..42eec7d15 --- /dev/null +++ b/app/src/components/shop/ProductList.css @@ -0,0 +1,3 @@ +.product-name { + font-size: 22px; +} \ No newline at end of file diff --git a/app/src/components/shop/ProductList.js b/app/src/components/shop/ProductList.js new file mode 100644 index 000000000..b057a9ea8 --- /dev/null +++ b/app/src/components/shop/ProductList.js @@ -0,0 +1,55 @@ +import React, { Component } from 'react'; +import { Panel, Image, Button, Glyphicon } from 'react-bootstrap'; +import store from '../../store'; +import { addToCart } from '../../actionCreators'; + +import './ProductList.css'; + +class ProductList extends Component { + constructor() { + super(); + this.addToCart = this.addToCart.bind(this); + + this.state = { + products: [ + { id: 1, name: "Ball", price: 85, image: "https://http2.mlstatic.com/pelota-futbol-D_Q_NP_710631-MLA26534253069_122017-X.webp" }, + { id: 2, name: "Shirt", price: 99, image: "https://http2.mlstatic.com/camisetas-clubes-extranjeros-D_Q_NP_788868-MLA26607271469_012018-X.webp" }, + { id: 3, name: "Booties", price: 150, image: "https://http2.mlstatic.com/botines-D_Q_NP_932371-MLA26170584818_102017-X.webp" }, + { id: 4, name: "Gloves", price: 70, image: "https://http2.mlstatic.com/guantes-arquero-reusch-D_Q_NP_927037-MLA25888073579_082017-X.webp" } + ] + } + } + + render() { + return ( + + + Product List + + + {this.state.products.map(product => +
+ {product.name} +
+

{product.name}

+

+ +

+
+
+ )} + + + ); + } + + addToCart(product) { + store.dispatch(addToCart(product)); + } +} + +export default ProductList; diff --git a/app/src/components/shop/Shop.js b/app/src/components/shop/Shop.js new file mode 100644 index 000000000..deec76699 --- /dev/null +++ b/app/src/components/shop/Shop.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; +import { Grid, PageHeader, Row, Col } from 'react-bootstrap'; +import ShoppingCart from './ShoppingCart'; +import ProductList from './ProductList'; + +class App extends Component { + render() { + return ( + + + Shop Buy our products at a fantastic price + + + + + + + + + + + ); + } +} + +export default App; diff --git a/app/src/components/shop/ShoppingCart.js b/app/src/components/shop/ShoppingCart.js new file mode 100644 index 000000000..1f111c4c8 --- /dev/null +++ b/app/src/components/shop/ShoppingCart.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { Panel, Table, Button, Glyphicon } from 'react-bootstrap'; +import { removeFromCart } from '../../actionCreators'; +import { connect } from 'react-redux'; + +const ShoppingCart = ({ cart, removeFromCart }) => { + return ( + + + Shopping Cart + + + + {cart.map(product => + + + + + + )} + + + + + + +
{product.name}${product.price}
+ Total: ${cart.reduce((sum, product) => sum + product.price, 0)} +
+ + ) +} + +const mapStateToProps = state => { + return { + cart: state.cart + } +} + +const mapDispatchToProps = dispatch => { + return { + removeFromCart(product) { + dispatch(removeFromCart(product)); + } + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart); diff --git a/app/src/index.css b/app/src/index.css new file mode 100644 index 000000000..371e226f8 --- /dev/null +++ b/app/src/index.css @@ -0,0 +1,6 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); + +body { + font-family: 'Roboto', sans-serif; + background-color: #e2e2e2; +} \ No newline at end of file diff --git a/app/src/index.js b/app/src/index.js new file mode 100644 index 000000000..c4ec24d21 --- /dev/null +++ b/app/src/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { render } from 'react-dom'; +import store from './store'; +import { Provider } from 'react-redux'; + +import './index.css'; + +import Header from './components/common/header/Header'; +import Router from './Router'; + +const Root = () => { + return ( +
+
+
+ +
+
+ ) +} + +render( + + + , + document.getElementById('root') +); \ No newline at end of file diff --git a/app/src/store.js b/app/src/store.js new file mode 100644 index 000000000..be2e1210d --- /dev/null +++ b/app/src/store.js @@ -0,0 +1,18 @@ +import { createStore } from 'redux'; + +const reducer = (state, action) => { + if (action.type === "ADD_TO_CART") { + return { + cart: [...state.cart, action.product] + } + } else if (action.type === "REMOVE_FROM_CART") { + return { + ...state, + cart: state.cart.filter(product => product.id !== action.product.id) + } + } + + return state; +} + +export default createStore(reducer, { cart: [] }); \ No newline at end of file