Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Commit

Permalink
better error handling
Browse files Browse the repository at this point in the history
  • Loading branch information
ivanflorentin committed Sep 6, 2016
1 parent 3d41a67 commit 70fedc4
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 106 deletions.
65 changes: 52 additions & 13 deletions src/display.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,85 @@ export default function (compDef) {
const {componentName,
fields
} = compDef
let propTypes = {}

const componentProperName = componentName[0].toUpperCase() + componentName.substring(1)
const fieldNames = Object.keys(fields)
fieldNames.map((fieldName)=>{
if (fields[fieldName].relation) {
const relation = fields[fieldName].relation
const relationProperName = relation[0].toUpperCase() + relation.substring(1)
propTypes[`${relation}Routes`] = PropTypes.object
propTypes[`${relation}Templates`] = PropTypes.object
propTypes[`save${componentProperName}${relationProperName}`] = PropTypes.func
propTypes[`delete${componentProperName}${relationProperName}`] = PropTypes.func
propTypes[`${relation}ComponentDef`] = PropTypes.object
propTypes[`${relation}List`] = PropTypes.object
propTypes[relation] = PropTypes.object
}
})


const ComponentDisplay = (props) =>{
console.log('in display', props)
let next = Object.assign({}, props[componentName])
let state = Object.assign({}, props[componentName])
const url = props.routing.locationBeforeTransitions.pathname
const editURL = `${url.slice(0, url.lastIndexOf('/')+1)}edit`
const {goBack} = props
const listCaption = `Datos de ${componentProperName}`
const listFields = []
const relationFields = []

for (let fieldName of fieldNames) {
console.log('field', state[fieldName])
const componentField = compDef.fields[fieldName]
const field = <div key={fieldName}>
<ListItem caption={next[fieldName] ||''}
legend={componentField.label} righticon={componentField.icon}/>
</div>
listFields.push(field)
if (componentField.relation) {
const relComponents = []
const relation = componentField.relation
const relationList = props[`${relation}List`]
console.log('Props relationList', `${relation}List`, relationList)
console.log(`relation, ${componentField.relation}`, state[fieldName])
if (state[fieldName]) {
const ids = Object.keys(state[fieldName])
ids.map((id, index) => {
console.log('rel id', relationList[id])
const relComp = []
const relCompKeys = Object.keys(relationList[id])
relCompKeys.map((name) =>{
relComp.push(<div>{name}: {relationList[id][name]}</div>)
})
relComponents.push(relComp)
})
relationFields.push(<div key={componentField.relation}>
{componentField.relation}, {relComponents}</div>)
}
} else {
const field = <div key={fieldName}>
<ListItem caption={state[fieldName] ||''}
legend={componentField.label} righticon={componentField.icon}/>
</div>
listFields.push(field)
}
}

return (
<div>
<List>
<ListSubHeader caption={listCaption}/>
{listFields}
<div>Relaciones: {relationFields} </div>
</List>
<Button icon='edit' floating disabled={!next.isValid} accent mini onClick={(e)=>{
<Button icon='edit' floating disabled={!state.isValid} accent mini onClick={(e)=>{
props.pushRoute(editURL)
}}/>
<Button icon='undo' floating accent mini onClick={()=>{goBack()}}/>
</div>
)
}

ComponentDisplay.propTypes = {
pushRoute: PropTypes.func,
goBack: PropTypes.func,
routing: PropTypes.object
}
ComponentDisplay.propTypes = propTypes
ComponentDisplay.propTypes.pushRoute = PropTypes.func
ComponentDisplay.propTypes.goBack = PropTypes.func
ComponentDisplay.propTypes.routing = PropTypes.object
ComponentDisplay.propTypes[`${componentName}`] = PropTypes.object
ComponentDisplay.propTypes[`save${componentProperName}`] = PropTypes.func
ComponentDisplay.propTypes[`store${componentProperName}`] = PropTypes.func
Expand Down
202 changes: 127 additions & 75 deletions src/edit.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import {List, ListItem, ListSubHeader, Button, Input} from 'react-toolbox'
import React, {Component, PropTypes} from 'react'
import {List, ListSubHeader, Button, Input} from 'react-toolbox'

export default function (compDef) {
const {componentName,
Expand All @@ -22,86 +22,138 @@ export default function (compDef) {
propTypes[relation] = PropTypes.object
}
})
const ComponentEdit = (props) =>{
const next = Object.assign({}, props[componentName])
console.log('next', next, props)
const save = () =>{props[`save${componentProperName}`](next)}
const store = () =>{props[`store${componentProperName}`](next)}
const {goBack} = props
const listCaption = `Ingrese datos de ${componentProperName}`
class ComponentEdit extends Component {
constructor(props) {
super(props)
this.state = JSON.parse(JSON.stringify(this.props[componentName]))
console.log('isValid?', this.state.isValid)
console.log('\n in constructor, props', this.props[componentName], 'state', this.state)
this.save = () =>{this.props[`save${componentProperName}`](this.state)}
this.store = () =>{this.props[`store${componentProperName}`](this.state)}
this.goBack = this.props.goBack
}

const listFields = fieldNames.map((fieldName)=>{
let label = fields[fieldName].label
if (!label || label === '') {
label = fieldName
componentWillMount() {
console.log('\n in mount, props', this.props[componentName], 'state', this.state)
this.relations = {}
fieldNames.map((fieldName) =>{
const field = fields[fieldName]
const relation = field.relation
if (this.state[relation]) {this.state[relation]={}}
if (relation) {
// const relationProperName = relation[0].toUpperCase() + relation.substring(1)
// const saveRelation = this.props[`save${componentProperName}${relationProperName}`]
if (this.state[`${relation}Selecting`]) {
console.log(`${relation}Selecting`)
const id = this.props[relation].uuid
if (!this.state[relation]) {this.state[relation] = []}
this.state[relation][id] = id
delete this.state[`${relation}Selecting`]
this.save()
}
}
const componentField = compDef.fields[fieldName]
const fieldError = `${fieldName}Error`
let error = ''
if (next[fieldError]) {
error = <span>{next[fieldError]}</span>
}
if (fields[fieldName].relation) {
const relation = fields[fieldName].relation
const relationList = props[`${relation}List`]
const relationComponentDef = props[`${relation}ComponentDef`]
const relationProperName = relation[0].toUpperCase() + relation.substring(1)
const saveRelation = props[`save${componentProperName}${relationProperName}`]
const deleteRelation = props[`delete${componentProperName}${relationProperName}`]
const routes = `${relation}Routes`
const listRoute = props[routes][`${relation}List`]
})
}

componentDidMount() {}
shouldComponentUpdate() {
return true
}

componentWillReceiveProps() {
// this.state = JSON.parse(JSON.stringify(this.props[componentName]))
// console.log('receiveProps == isValid?', this.state.isValid)
}

componentWillUpdate() {
console.log('componentWillUpdate')
}
componentDidUpdate() {console.log('componentDidUpdate')}

if (next[relation]===undefined) {next[relation]=[]}
if (next[`${relation}Selecting`]) {
saveRelation(props[relation].uuid)
delete next[`${relation}Selecting`]
componentWillUnmount() {
this.save()
}

render() {
console.log('Render')
this.state = JSON.parse(JSON.stringify(this.props[componentName]))
console.log('in Update == isValid?', this.state.isValid)
const listCaption = `Ingrese datos de ${componentProperName}`
const listFields = fieldNames.map((fieldName)=>{
let label = fields[fieldName].label
if (!label || label === '') {
label = fieldName
}
const ids = Object.keys(relationList)
const relListFields = ids.map(id => {
const comp = relationList[id]
let thisComp = []
for (let key in comp) {
thisComp.push(<div key={key}>{key}: {comp[key]}</div>)
}
return <div key={comp.uuid}>{thisComp}
<Button icon='close' floating accent mini onClick={
() =>{
deleteRelation(comp.uuid)
const componentField = compDef.fields[fieldName]
const fieldError = `${fieldName}Error`
let error = []
console.log('errors', this.state[fieldError])
if (this.state[fieldError] && this.state[fieldError].length >0) {
error = this.state[fieldError].map((err) =>{return <span key={err}>{err}</span>})
}
if (fields[fieldName].relation) {
const relation = fields[fieldName].relation
const relationList = this.props[`${relation}List`]
// const relationComponentDef = this.props[`${relation}ComponentDef`]
// const relationProperName = relation[0].toUpperCase() + relation.substring(1)
// const saveRelation = this.props[`save${componentProperName}${relationProperName}`]
// const deleteRelation = this.props[`delete${componentProperName}${relationProperName}`]
const routes = `${relation}Routes`
const listRoute = this.props[routes][`${relation}List`]
let relListFields= []
if (relation && this.state[relation]) {
const ids = Object.keys(this.state[relation])
if (ids.length > 0) {
relListFields = ids.map(id => {
const comp = relationList[id]
let thisComp = []
for (let key in comp) {
thisComp.push(<div key={key}>{key}: {comp[key]}</div>)
}
return <div key={comp.uuid}>{thisComp}
<Button icon='close' floating accent mini onClick={
() =>{
delete this.state[relation][comp.uuid]
this.save()
//deleteRelation(comp.uuid)
}
}/>
</div>
})
}
}/>
</div>
})
}
return <div key={fieldName}>
<label>{relation}</label>
<List>{relListFields}</List>
<Button icon='add' onClick={() => {
this.state[`${relation}Selecting`] = true
this.props.pushRoute(listRoute)
}}
/></div>
}
return <div key={fieldName}>
<label>{relation}</label>
<List>{relListFields}</List>
<Button icon='add' onClick={() => {
next[`${relation}Selecting`] = true
//save()
props.pushRoute(listRoute)
}}
/></div>
}
return <div key={fieldName}>
<Input value={next[fieldName] ||''}
type={componentField.uiType} label={label} name='name' icon={componentField.icon}
hint={componentField.hint}
onChange={(e) => {
next[fieldName] = e
save()
}}/>
{error}
</div>
})
return <div>
<ListSubHeader caption={listCaption}/>
{listFields}
<Button icon='done' floating disabled={!next.isValid} accent mini onClick={(e)=>{
store()
goBack()
}}/>
<Button icon='undo' floating accent mini onClick={()=>{goBack()}}/>
</div>
<Input value={this.state[fieldName] ||''}
type={componentField.uiType} label={label} name='name' icon={componentField.icon}
hint={componentField.hint}
onChange={(e) => {
this.state[fieldName] = e
this.save()
}}/>
{error}
</div>
})
return <div>
<ListSubHeader caption={listCaption}/>
{listFields}
<Button icon='done' floating disabled={!this.state.isValid} accent mini onClick={(e)=>{
this.store()
this.goBack()
}}/>
<Button icon='undo' floating accent mini onClick={()=>{this.goBack()}}/>
</div>
}
}

ComponentEdit.propTypes = propTypes
ComponentEdit.propTypes[`${componentName}`] = PropTypes.object
ComponentEdit.propTypes[`save${componentProperName}`] = PropTypes.func
Expand Down
2 changes: 1 addition & 1 deletion src/list.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function (compDef) {
const displayURL = `${url.slice(0, url.lastIndexOf('/')+1)}display`
const editURL = `${url.slice(0, url.lastIndexOf('/')+1)}edit`
const list = props[`${componentName}List`]
console.log('list', list)
//console.log('list', list)
const ids = Object.keys(list)
const Items = ids.map((id, index) =>{
const item = list[id]
Expand Down
27 changes: 10 additions & 17 deletions src/providers.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,6 @@ export default function (compDef) {
const componentDefinitionName = componentName + 'ComponentDef'

let fieldNames = Object.keys(fields)

/*
const crudInit = {}
const crudErrorInit = {}
if (fieldNames.length > 0) {
for (let fieldName of fieldNames) {
crudInit[fieldName] = fields[fieldName].defaultValue
crudErrorInit[`${fieldName}Error`] = ''
}}
*/
const SELECT = `SELECT_${componentCapitalName}`
const DESELECT = `DESELECT_${componentCapitalName}`
const SAVE = `SAVE_${componentCapitalName}`
Expand Down Expand Up @@ -142,27 +132,30 @@ export default function (compDef) {
reducers[componentName] = (state = {isValid: false}, action) =>{
switch (action.type) {
case SELECT: {
console.log('select', state, action)
return action.component
}
case DESELECT: {
return {}
}
case SAVE: {
const next = Object.assign({}, action.component)
//const next = Object.assign({}, action.component)
const next = JSON.parse(JSON.stringify(action.component))
next.isValid = true
for (let fieldName of fieldNames) {
const value = String(action.component[fieldName])
const validators = fields[fieldName].validate
if (validators && validators.length > 0) {
let validatorPassed = true
next.isValid= true
next[`${fieldName}Error`] = []
for (let validator of validators) {
const valid = validator.func(value, validator.params)
if (!valid) {
next.isValid = false
next[`${fieldName}Error`] = validator.message
next[`${fieldName}Error`].push(validator.message)
}
else {delete next[`${fieldName}Error`]}
}
if (next.isValidm && next[`${fieldName}Error`]) {
delete next[`${fieldName}Error`]
}
}
}
Expand All @@ -175,7 +168,7 @@ export default function (compDef) {
}
const next = Object.assign({}, state)
next[fieldName] = Object.assign({}, state[fieldName])
console.log ('save', fieldName, id, next)
// console.log ('Reducer saveRelation', fieldName, id, next)
if (next[fieldName] === undefined) {
next[fieldName] = {}
}
Expand All @@ -185,7 +178,7 @@ export default function (compDef) {
case DELETE_RELATION: {
const next = Object.assign({}, state)
const {fieldName, id} = action
console.log ('delete', fieldName, id, state)
// console.log ('delete', fieldName, id, state)
next[fieldName] = Object.assign({}, state[fieldName])
delete next[fieldName][id]
return next
Expand Down

0 comments on commit 70fedc4

Please sign in to comment.