definig specific error in step component

src/actions/tutorialBuilderActions.js

@@ -245,7 +245,9 @@ export const readJSON = (json) => (dispatch, getState) => {
   dispatch(resetTutorial());
   dispatch({
     type: BUILDER_ERROR,
-    payload: {steps: [{},{}]}
+    payload: {
+      steps: new Array(json.steps.length).fill({})
+    }
   });
   dispatch(tutorialTitle(json.title));
   dispatch(tutorialId(json.id));

src/components/Tutorial/Builder/BlocklyExample.js

@@ -45,9 +45,10 @@ class BlocklyExample extends Component {
   }
 
   componentDidMount(){
-    if(this.props.task){
+    this.isError();
-      this.props.setError(this.props.index, 'xml');
+    // if(this.props.task){
-    }
+    //   this.props.setError(this.props.index, 'xml');
+    // }
   }
 
   componentDidUpdate(props, state){
@@ -95,9 +96,9 @@ class BlocklyExample extends Component {
             }
           />
         : <FormLabel style={{color: 'black'}}>Musterlösung</FormLabel>}
-        {this.state.checked ? !this.props.value || !this.props.error.steps[this.props.index].xml ?
+        {this.state.checked ? !this.props.value || this.props.error ?
-          <FormHelperText style={{lineHeight: 'initial', marginBottom: '10px'}} className={this.props.classes.errorColor}>Reiche deine Blöcke ein, indem du auf den rot gefärbten Button klickst.</FormHelperText>
+          <FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>Reiche deine Blöcke ein, indem du auf den rot gefärbten Button klickst.</FormHelperText>
-        : <FormHelperText style={{lineHeight: 'initial', marginBottom: '10px'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText>
+        : this.state.input ? <FormHelperText style={{lineHeight: 'initial'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
         : null}
         {this.state.checked ? (() => {
           var initialXml = this.props.value;
@@ -109,19 +110,15 @@ class BlocklyExample extends Component {
             initialXml = null;
             this.props.setError(this.props.index, 'xml');
           }
-          console.log(!this.props.value);
-          console.log(this.props.value);
-          console.log(this.props.error.steps[this.props.index].xml);
-          console.log(!this.props.value || this.props.error.steps[this.props.index].xml);
           return (
-            <div>
+            <div style={{marginTop: '10px'}}>
-              <Grid container className={!this.props.value || !this.props.error.steps[this.props.index].xml ? this.props.classes.errorBorder : null}>
+              <Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
                 <Grid item xs={12}>
                   <BlocklyWindow initialXml={initialXml}/>
                 </Grid>
               </Grid>
               <Button
-                className={!this.props.value || !this.props.error.steps[this.props.index].xml ? this.props.classes.errorButton : null }
+                className={!this.props.value || this.props.error ? this.props.classes.errorButton : null }
                 style={{marginTop: '5px', height: '40px'}}
                 variant='contained'
                 color='primary'

src/components/Tutorial/Builder/Builder.js

@@ -130,8 +130,8 @@ class Builder extends Component {
         <Divider variant='fullWidth' style={{margin: '10px 0 30px 0'}}/>
 
         {/*Tutorial-Builder-Form*/}
-        <Id error={this.props.error} value={this.props.id}/>
+        <Id error={this.props.error.id} value={this.props.id}/>
-        <Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error}/>
+        <Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title}/>
 
         {this.props.steps.map((step, i) =>
           <Step step={step} index={i} />
@@ -165,7 +165,7 @@ class Builder extends Component {
           }
         >
           {this.state.string ?
-            <Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error}/>
+            <Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error.json}/>
           : null}
         </Dialog>
 

src/components/Tutorial/Builder/Hardware.js

@@ -52,7 +52,7 @@ class Requirements extends Component {
     }
     else {
       hardwareArray.push(hardware);
-      if(this.props.error.steps[this.props.index].hardware){
+      if(this.props.error){
         this.props.deleteError(this.props.index, 'hardware');
       }
     }
@@ -67,8 +67,8 @@ class Requirements extends Component {
     return (
       <div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
         <FormLabel style={{color: 'black'}}>Hardware</FormLabel>
-        <FormHelperText style={this.props.error.steps[this.props.index].hardware ? {lineHeight: 'initial', marginTop: '5px'} : {marginTop: '5px', lineHeight: 'initial', marginBottom: '10px'}}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
+        <FormHelperText style={this.props.error ? {lineHeight: 'initial', marginTop: '5px'} : {marginTop: '5px', lineHeight: 'initial', marginBottom: '10px'}}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
-        {this.props.error.steps[this.props.index].hardware ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware aus.</FormHelperText> : null}
+        {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware aus.</FormHelperText> : null}
         <GridList cellHeight={100} cols={cols} spacing={10}>
         {hardware.map((picture,i) => (
           <GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border}}>

src/components/Tutorial/Builder/Id.js

@@ -25,7 +25,7 @@ class Id extends Component {
     var value = parseInt(e.target.value);
     if(Number.isInteger(value) && value > 0){
       this.props.tutorialId(value);
-      if(this.props.error.id){
+      if(this.props.error){
         this.props.deleteError(undefined, 'id');
       }
     }
@@ -39,7 +39,7 @@ class Id extends Component {
     if(this.props.value+step < 1){
       this.props.setError(undefined,'id');
     }
-    else if(this.props.error.id){
+    else if(this.props.error){
       this.props.deleteError(undefined, 'id');
     }
     if(!this.props.value){
@@ -57,7 +57,7 @@ class Id extends Component {
         <InputLabel htmlFor="id">ID</InputLabel>
         <OutlinedInput
           style={{borderRadius: '25px', padding: '0 0 0 10px', width: '200px'}}
-          error={this.props.error.id}
+          error={this.props.error}
           value={this.props.value}
           name='id'
           label='ID'
@@ -88,7 +88,7 @@ class Id extends Component {
             </div>
           }
         />
-        {this.props.error.id ? <FormHelperText className={this.props.classes.errorColor}>Gib eine positive ganzzahlige Zahl ein.</FormHelperText> : null}
+        {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Gib eine positive ganzzahlige Zahl ein.</FormHelperText> : null}
       </FormControl>
       <FormHelperText style={{marginLeft: '10px', marginTop: '5px', lineHeight: 'initial', marginBottom: '10px', width: '200px'}}>Beachte, dass die ID eindeutig sein muss. Sie muss sich also zu den anderen Tutorials unterscheiden.</FormHelperText>
       </div>

src/components/Tutorial/Builder/Step.js

@@ -85,15 +85,15 @@ class Step extends Component {
           </div>
           <div style={{width: '100%', marginLeft: '54px'}}>
             <StepType value={this.props.step.type} index={index} />
-            <Textfield value={this.props.step.headline} property={'headline'} label={'Überschrift'} index={index} error={this.props.error} errorText={`Gib eine Überschrift für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`} />
+            <Textfield value={this.props.step.headline} property={'headline'} label={'Überschrift'} index={index} error={this.props.error.steps[index].headline} errorText={`Gib eine Überschrift für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`} />
-            <Textfield value={this.props.step.text} property={'text'} label={this.props.step.type === 'task' ? 'Aufgabenstellung' : 'Instruktionen'} index={index} multiline error={this.props.error} errorText={`Gib Instruktionen für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`}/>
+            <Textfield value={this.props.step.text} property={'text'} label={this.props.step.type === 'task' ? 'Aufgabenstellung' : 'Instruktionen'} index={index} multiline error={this.props.error.steps[index].text} errorText={`Gib Instruktionen für die ${this.props.step.type === 'task' ? 'Aufgabe' : 'Anleitung'} ein.`}/>
             {index === 0 ?
               <div>
                 <Requirements value={this.props.step.requirements ? this.props.step.requirements : []} index={index}/>
-                <Hardware value={this.props.step.hardware ? this.props.step.hardware : []} index={index} error={this.props.error}/>
+                <Hardware value={this.props.step.hardware ? this.props.step.hardware : []} index={index} error={this.props.error.steps[index].hardware}/>
               </div>
             : null}
-            <BlocklyExample value={this.props.step.xml} index={index} task={this.props.step.type === 'task'} error={this.props.error}/>
+            <BlocklyExample value={this.props.step.xml} index={index} task={this.props.step.type === 'task'} error={this.props.error.steps[index].xml ? true : false}/>
           </div>
         </div>
       </div>

src/components/Tutorial/Builder/Textfield.js

@@ -20,6 +20,12 @@ const styles = theme => ({
 
 class Textfield extends Component {
 
+  componentDidMount(){
+    if(this.props.error){
+      this.props.deleteError(this.props.index, this.props.property);
+    }
+  }
+
   handleChange = (e) => {
     var value = e.target.value;
     if(this.props.property === 'title'){
@@ -46,7 +52,7 @@ class Textfield extends Component {
         <OutlinedInput
           style={{borderRadius: '25px'}}
           classes={{multiline: this.props.classes.multiline}}
-          error={this.props.index !== undefined ? this.props.error.steps[this.props.index][this.props.property] : this.props.error[this.props.property]}
+          error={this.props.error}
           value={this.props.value}
           label={this.props.label}
           id={this.props.property}
@@ -55,12 +61,10 @@ class Textfield extends Component {
           rowsMax={10}
           onChange={(e) => this.handleChange(e)}
         />
-        {this.props.index !== undefined ?
+        {this.props.error ?
-          this.props.error.steps[this.props.index][this.props.property] ? <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
-        : null
-        : this.props.error[this.props.property] ?
           this.props.property === 'title' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText>
-                                            : <FormHelperText className={this.props.classes.errorColor}>Gib einen JSON-String ein und bestätige diesen mit einem Klick auf den entsprechenden Button</FormHelperText>
+        : this.props.property === 'json' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen JSON-String ein und bestätige diesen mit einem Klick auf den entsprechenden Button</FormHelperText>
+        : <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
         : null}
       </FormControl>
     );
@@ -71,13 +75,6 @@ Textfield.propTypes = {
   tutorialTitle: PropTypes.func.isRequired,
   jsonString: PropTypes.func.isRequired,
   changeContent: PropTypes.func.isRequired,
-  error: PropTypes.object.isRequired,
-  change: PropTypes.number.isRequired
 };
 
-const mapStateToProps = state => ({
+export default connect(null, { tutorialTitle, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));
-  error: state.builder.error,
-  change: state.builder.change
-});
-
-export default connect(mapStateToProps, { tutorialTitle, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));