Skip to content

D
DAAExample
Commit 1c483382 authored by Cristopher Álvarez Martínez's avatar Cristopher Álvarez Martínez
Browse files
Options

Rework

parent 34340705
Expand all Show whitespace changes
Inline Side-by-side
Showing with 705 additions and 1188 deletions
src/main/react/app/components/App.js
View file @ 1c483382
var React = require('react'); import React, { Component } from 'react';
var ReactRouter = require('react-router-dom'); import ReactRouter, { BrowserRouter, Route, Switch } from 'react-router-dom';
import People from './People';
import Pet from './Pet';
var Router = ReactRouter.BrowserRouter; class App extends Component {
var Route = ReactRouter.Route;
var Switch = ReactRouter.Switch;
var browserHistory =ReactRouter.browserHistory;
var Nav = require('./Nav');
var Main = require('./Main');
var Content = require('./Content');
var Pet = require('../components/entity/pet/Pet');
class App extends React.Component {
render() { render() {
return ( return (
<Router> <BrowserRouter>
<div className='container'> <div className='container'>
<Nav/>
<h4 className="header">DAA Example</h4> <h4 className="header">DAA Example</h4>
<Switch> <Switch>
<Route exact path='/DAAExample' component={Main} /> <Route exact path='/DAAExample/people' component={People} />
<Route exact path='/DAAExample/people' component={Content}/> <Route exact path='/DAAExample/pet' component={Pet} />
<Route path='/DAAExample/people/pet' component={Pet}/>
<Route render={function () { <Route render={function () {
return <p>Not Found</p> return <p>Not Found</p>
}} /> }} />
</Switch> </Switch>
</div> </div>
</Router> </BrowserRouter>
) )
} }
} }
......
src/main/react/app/components/Content.js deleted 100644 → 0
View file @ 34340705
var React = require('react');
var PropTypes = require('prop-types');
var Person = require('../components/entity/person/Person');
var queryString = require('query-string');
class Content extends React.Component {
constructor(props) {
super(props);
this.state =
{
userLogged: this.props.user
}
}
componentDidMount(){
var query = queryString.parse(this.props.location.search);
console.log(query);
this.updateContent(query.login);
}
updateContent(userLogged) {
this.setState(function () {
return {
userLogged:userLogged
}
})
}
render() {
//Router url
var match = this.props.match;
var userLogged = this.state.userLogged;
return (
<div className="container">
{userLogged &&
<div>
<p className="header-owner">Personas</p>
<Person match={match}/>
</div>
}
</div>
)
}
}
module.exports = Content;
src/main/react/app/components/Nav.js deleted 100644 → 0
View file @ 34340705
var React = require('react');
var NavLink = require('react-router-dom').NavLink;
function Nav () {
return (
<ul className='nav'>
</ul>
)
}
module.exports = Nav;
\ No newline at end of file
src/main/react/app/components/People.js 0 → 100644
View file @ 1c483382
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Table from './Table';
export default class People extends Component {
constructor(props) {
super(props);
}
renderPeople(user) {
return (
<tr className="row" key={user.id}>
<td className="col-sm-4">{user.name}</td>
<td className="col-sm-4">{user.surname}</td>
<td className="col-sm-4">
<a className="edit btn btn-warning" >Editar</a>
<a className="edit btn btn-danger">Eliminar</a>
</td>
</tr>
);
}
render() {
return (
<Table data={this.props.people} headers={this.props.headers} />
)
}
}
People.propTypes = {
headers: PropTypes.array.isRequired,
people: PropTypes.array.isRequired,
pets: PropTypes.array.isRequired,
}
People.defaultProps = {
headers: ['Nombre', 'Apellido', ' '],
people: [{ "id": 0, "name": "Antón", "surname": "Pérez" }, { "id": 1, "name": "Manuel", "surname": "Martínez" }],
pets: [{ "id": 1, "owner": 1, "name": "Bobby", "type": "Perro" }, { "id": 2, "owner": 1, "name": "Cookie", "type": "Gato" }]
}
\ No newline at end of file
src/main/react/app/components/Pet.js 0 → 100644
View file @ 1c483382
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Pet extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h5 className="header-owner">Owner</h5>
<table className="table">
<thead>
<tr className="row" >
{this.props.headers.map(function (head) {
return (
<th className="col-sm-4" key={head}> {head} </th>
)
})}
</tr>
</thead>
<tbody>
{this.props.pets.map(function (pet) {
return (
<tr className="row" key={pet.id}>
<td className="col-sm-4">{pet.name}</td>
<td className="col-sm-5">{pet.type}</td>
<td className="col-sm-3">
<a className="edit btn btn-warning" >Editar</a>
<a className="edit btn btn-danger">Eliminar</a>
</td>
</tr>
)
}, this)}
</tbody>
</table>
</div>
)
}
}
Pet.propTypes = {
headers: PropTypes.array.isRequired,
pets: PropTypes.array.isRequired,
}
Pet.defaultProps = {
headers: ['Nombre', 'Tipo', ' '],
pets: [{ "id": 1, "owner": 1, "name": "Bobby", "type": "Perro" }, { "id": 2, "owner": 1, "name": "Cookie", "type": "Gato" }]
}
\ No newline at end of file
src/main/react/app/components/Table.js 0 → 100644
View file @ 1c483382
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default (props) => {
const { headers, data } = props;
return (
<div className="container">
<table className="table table-hover">
<thead>
<tr className="row" >
{headers.map(renderHeaders)}
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
);
}
function renderHeaders(header) {
return (
<th key={header} className="col-sm-4">{header}</th>
);
}
src/main/react/app/components/entity/person/EditFormPerson.js deleted 100644 → 0
View file @ 34340705
var React = require('react');
var PropTypes = require('prop-types');
class EditFormPerson extends React.Component {
constructor(props) {
super(props);
this.state = {
id: this.props.person.id,
name: '',
surname:''
}
this.handleName = this.handleName.bind(this);
this.handleSurname = this.handleSurname.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleName(event) {
var value = event.target.value;
this.setState (function () {
return {
name: value
}
});
}
handleSurname(event) {
var value = event.target.value;
this.setState (function () {
return {
surname: value
}
});
}
handleSubmit (event) {
event.preventDefault();
var editedUser = {};
editedUser['id'] = this.state.id;
editedUser['name'] = this.state.name;
editedUser['surname'] = this.state.surname;
this.props.onSubmit(editedUser);
/*
api.checkUser(this.state.username, this.state.password)
.then(function(status){
this.props.onSubmit (status);
}.bind(this));
*/
}
render() {
return (
<div>
<form className='login' onSubmit={this.handleSubmit}>
<input
id='name'
placeholder= {this.props.person.name}
type='text'
value={this.state.name}
autoComplete='off'
onChange = {this.handleName}
/>
<input
id='surname'
placeholder={this.props.person.surname}
type='text'
value={this.state.surname}
autoComplete='off'
onChange = {this.handleSurname}
/>
<button className='button' type='submit'>
Submit
</button>
</form>
</div>
)
}
}
EditFormPerson.propTypes = {
person: PropTypes.object.isRequired
}
module.exports = EditFormPerson;
\ No newline at end of file
src/main/react/app/components/entity/person/Person.js deleted 100644 → 0
View file @ 34340705
var React = require('react');
var PropTypes = require('prop-types');
var EditFormPerson = require('./EditFormPerson');
var Link = require('react-router-dom').Link;
class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
user: null,
pets: this.props.pets,
people: this.props.people,
editFormPerson: false,
}
this.handleEdit = this.handleEdit.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.updatePeople = this.updatePeople.bind(this);
this.handleSubmitPerson = this.handleSubmitPerson.bind(this);
}
componentDidMount() {
this.updatePeople(this.state.user,this.state.pets,this.state.people);
}
updatePeople(user,pets,people) {
this.setState(function () {
return {
user: user,
pets: pets,
people: people,
editFormPerson: false,
}
})
}
handleEdit(user) {
this.setState(function () {
return { user: user, editFormPerson: true }
})
}
handleSubmitPerson(user) {
var userIndex = this.state.people.findIndex(obj => obj.id == user.id);
var newPeople = this.state.people;
newPeople[userIndex] = user;
this.setState(function () {
return { people: newPeople, editFormPerson: false}
})
}
handleDelete(user) {
var newPeople = this.state.people.filter(function (person) {
return person.name !== user.name
});
// --- Remember: setState is fucking asynchronous
if(confirm('Delete the item?')) {
this.setState({people: newPeople}, function () {
});
}
}
render() {
var editFormPerson = this.state.editFormPerson;
var person = this.state.user;
var match = this.props.match;
return (
<div>
<table className="table">
<thead>
<tr className="row" >
{this.props.headers.map(function (head) {
return (
<th className="col-sm-4" key={head}> {head} </th>
)
})}
</tr>
</thead>
<tbody>
{this.state.people.map(function (user) {
return(
<tr className="row" key={user.id}>
<td className="col-sm-4">{user.name}</td>
<td className="col-sm-5">{user.surname}</td>
<td className="col-sm-3">
<a onClick={this.handleEdit.bind(null,user)}
className="edit btn btn-warning"
>Editar</a>
<a onClick={this.handleDelete.bind(null,user)}
className="edit btn btn-danger"
>Eliminar</a>
<Link
className="edit btn btn-info"
to={{
pathname: match.url + '/pet',
search:'?user='+user.name
}}
>Pets</Link>
</td>
</tr>
)
},this)}
</tbody>
</table>
{editFormPerson &&
<EditFormPerson person={person} onSubmit={this.handleSubmitPerson}/>
}
</div>
)
}
}
Person.propTypes = {
headers: PropTypes.array.isRequired,
people: PropTypes.array.isRequired,
pets: PropTypes.array.isRequired,
}
Person.defaultProps = {
headers: ['Nombre', 'Apellido', ' '],
people: [{"id":0,"name":"Antón","surname":"Pérez"},{"id":1,"name":"Manuel","surname":"Martínez"}],
pets: [{"id":1,"owner":1,"name":"Bobby","type":"Perro"},{"id":2,"owner":1,"name":"Cookie","type":"Gato"}]
}
module.exports = Person;
\ No newline at end of file
src/main/react/app/components/entity/pet/EditFormPet.js deleted 100644 → 0
View file @ 34340705
var React = require('react');
var PropTypes = require('prop-types');
class EditForm extends React.Component {
constructor(props) {
super(props);
this.state = {
id: this.props.pet.id,
owner: this.props.pet.owner,
name: '',
type:''
}
this.handleName = this.handleName.bind(this);
this.handleType = this.handleType.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleName(event) {
var value = event.target.value;
this.setState (function () {
return {
name: value
}
});
}
handleType(event) {
var value = event.target.value;
this.setState (function () {
return {
type: value
}
});
}
handleSubmit (event) {
event.preventDefault();
var editedPet = {};
editedPet['id'] = this.state.id;
editedPet['owner'] = this.state.owner;
editedPet['name'] = this.state.name;
editedPet['type'] = this.state.type;
this.props.onSubmit(editedPet);
/*
api.checkUser(this.state.username, this.state.password)
.then(function(status){
this.props.onSubmit (status);
}.bind(this));
*/
}
render() {
return (
<div>
<form className='login' onSubmit={this.handleSubmit}>
<input
id='name'
placeholder= {this.props.pet.name}
type='text'
value={this.state.name}
autoComplete='off'
onChange = {this.handleName}
/>
<input
id='surname'
placeholder={this.props.pet.type}
type='text'
value={this.state.type}
autoComplete='off'
onChange = {this.handleType}
/>
<button className='button' type='submit'>
Submit
</button>
</form>
</div>
)
}
}
EditForm.propTypes = {
pet: PropTypes.object.isRequired
}
module.exports = EditForm;
\ No newline at end of file
src/main/react/app/components/entity/pet/Pet.js deleted 100644 → 0
View file @ 34340705
var React = require('react');
var PropTypes = require('prop-types');
var EditFormPet = require('./EditFormPet');
var queryString = require('query-string');
class Pet extends React.Component {
constructor(props) {
super(props);
this.state = {
owner:'',
pet: null,
pets: this.props.pets,
editFormPet: false
}
this.handleEdit = this.handleEdit.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.updatePet = this.updatePet.bind(this);
this.handleSubmitPet = this.handleSubmitPet.bind(this);
}
componentDidMount() {
var query = queryString.parse(this.props.location.search);
this.updatePet(query.user,this.state.pet,this.state.pets);
}
updatePet(owner,pet,pets) {
this.setState(function () {
return {
owner: owner,
pet: pet,
pets: pets,
editFormPet: false
}
})
}
handleEdit(pet) {
this.setState(function () {
return { pet: pet, editFormPet: true }
})
}
handleSubmitPet(pet) {
var userIndex = this.state.pets.findIndex(obj => obj.id == pet.id);
var newPets = this.state.pets;
newPets[userIndex] = pet;
this.setState(function () {
return { pets: newPets, editFormPet: false}
})
}
handleDelete(pet) {
var newPets = this.state.pets.filter(function (pets) {
return pets.name !== pet.name
});
if(confirm('Delete the item?')) {
// --- Remember: setState is fucking asynchronous
this.setState({ pets: newPets }, function () {
console.log("item deleted");
});
}
}
render() {
var editFormPet = this.state.editFormPet;
var pet = this.state.pet;
var owner = this.state.owner;
return (
<div>
<h5 className="header-owner">{owner}</h5>
<table className="table">
<thead>
<tr className="row" >
{this.props.headers.map(function (head) {
return (
<th className="col-sm-4" key={head}> {head} </th>
)
})}
</tr>
</thead>
<tbody>
{this.state.pets.map(function (pet) {
return(
<tr className="row" key={pet.id}>
<td className="col-sm-4">{pet.name}</td>
<td className="col-sm-5">{pet.type}</td>
<td className="col-sm-3">
<a onClick={this.handleEdit.bind(null,pet)}
className="edit btn btn-warning"
>Editar</a>
<a onClick={this.handleDelete.bind(null,pet)}
className="edit btn btn-danger"
>Eliminar</a>
</td>
</tr>
)
},this)}
</tbody>
</table>
{editFormPet &&
<EditFormPet pet={pet} onSubmit={this.handleSubmitPet}/>
}
</div>
)
}
}
Pet.propTypes = {
headers: PropTypes.array.isRequired,
pets: PropTypes.array.isRequired,
}
Pet.defaultProps = {
headers: ['Nombre', 'Tipo', ' '],
pets: [{"id":1,"owner":1,"name":"Bobby","type":"Perro"},{"id":2,"owner":1,"name":"Cookie","type":"Gato"}]
}
module.exports = Pet;
\ No newline at end of file
src/main/react/package-lock.json
View file @ 1c483382
This diff is collapsed.
src/main/react/webpack.config.js
View file @ 1c483382
...@@ -6,19 +6,19 @@ module.exports = { ...@@ -6,19 +6,19 @@ module.exports = {
output: { output: {
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js', filename: 'index_bundle.js',
//publicPath: '/' publicPath: '/'
}, },
module: { module: {
rules: [ rules: [
{ test: /\.(js)$/, use: 'babel-loader' }, { test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} { test: /\.css$/, use: ['style-loader', 'css-loader'] }
] ]
}, },
/*
devServer: { devServer: {
historyApiFallback: true, historyApiFallback: true,
}, },
*/
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: 'app/index.html' template: 'app/index.html'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment