Skip to content
Permalink
Browse files

Part 2 finished

  • Loading branch information
mats-codes committed Sep 15, 2019
1 parent 4cb5460 commit 450161ec15b1a7249dd41c9dc020ac5109995223
@@ -9,12 +9,40 @@ class AppContainer extends React.Component {
super(props);
this.state = {
showOnlyHighSeverity: false,
filterString: undefined,
filterString: '',
newlyCreatedItems: [],
};

this.handleSeverityChange = this.handleSeverityChange.bind(this);
this.handleNewFilterString = this.handleNewFilterString.bind(this);
this.handleNewTask = this.handleNewTask.bind(this);
}

handleSeverityChange(val) {
this.setState({
showOnlyHighSeverity: val.target.checked
});
}

handleNewFilterString(val) {
this.setState({
filterString: val.target.value
});
}

handleNewTask(val) {
this.setState({
newlyCreatedItems: this.state.newlyCreatedItems.concat([val])
});
}

render() {
const allTasks = this.props.tasks.concat(this.state.newlyCreatedItems);
const filteredTasks = allTasks.filter(
task =>
task.title.indexOf(this.state.filterString) !== -1 &&
(task.severity === 'high' || !this.state.showOnlyHighSeverity)
);
return (
<div>
<AppBar position="static">
@@ -30,17 +58,21 @@ class AppContainer extends React.Component {
<Paper className={this.props.classes.paper}>
<SearchBar
showOnlyHighSeverity={this.state.showOnlyHighSeverity}
severityChangeHandler={this.handleSeverityChange}
filterString={this.state.filterString}
filterStringChangeHandler={this.handleNewFilterString}
/>
</Paper>
<Paper className={this.props.classes.paper}>
<TaskTable tasks={this.props.tasks}/>
<TaskTable tasks={filteredTasks}/>
</Paper>
</Grid>

<Grid item xs={6}>
<Paper className={this.props.classes.paper}>
<TaskCreationForm />
<TaskCreationForm
newTaskHandler={this.handleNewTask}
/>
</Paper>
</Grid>
</Grid>
@@ -14,9 +14,9 @@ class HeroSelector extends React.Component {
inputProps={{id: 'favHero'}}
onChange={this.props.changeHandler}
>
<MenuItem value="ck">Coding Kid</MenuItem>
<MenuItem value="ccw">Clean Code Women</MenuItem>
<MenuItem value="bh">Bug Hunter</MenuItem>
<MenuItem value="Coding Kid">Coding Kid</MenuItem>
<MenuItem value="Clean Code Women">Clean Code Women</MenuItem>
<MenuItem value="Bug Hunter">Bug Hunter</MenuItem>
</Select>
</div>
)
@@ -14,7 +14,7 @@ class SeveritySelctor extends React.Component {
name="severity"
row
onChange={this.props.changeHandler}
value={this.props.severity}
defaultValue={this.props.severity}
>
<FormControlLabel
label="High"
@@ -10,9 +10,15 @@ class TaskCreationForm extends React.Component {
this.state = {
name: undefined,
description: undefined,
favHero: 'ck',
favHero: 'Coding Kid',
severity: undefined,
};

this.handleNameChange = this.handleNameChange.bind(this);
this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
this.handleSeverityChange = this.handleSeverityChange.bind(this);
this.handleFavHeroChange = this.handleFavHeroChange.bind(this);
this.addTask = this.addTask.bind(this);
}


@@ -21,23 +27,37 @@ class TaskCreationForm extends React.Component {
}

addTask() {
console.log("I'm superheroically clicked.");
const newTask = {
assignee: this.state.favHero,
title: this.state.name,
description: this.state.description,
severity: this.state.severity,
}
this.props.newTaskHandler(newTask);
}

handleNameChange(e) {
console.log(e.target.value);
this.setState({
name: e.target.value
});
}

handleDescriptionChange(e) {
console.log(e.target.value)
this.setState({
description: e.target.value
});
}

handleSeverityChange(e) {
console.log(e.target.value);
this.setState({
severity: e.target.value
});
}

handleFavHeroChange(e) {
console.log(e.target.value);
this.setState({
favHero: e.target.value
});
}

render() {
@@ -7,21 +7,25 @@ const tasks = [
assignee: 'Coding Kid',
title: 'Save my Cat',
description: 'BlaBlaBla',
severity: 'high',
},
{
assignee: 'Clean Code Women',
title: 'Fix my dirty code',
description: 'BlaBlaBla',
severity: 'high',
},
{
assignee: 'Bug Hunter',
title: 'Kill that nifty bug',
description: 'BlaBlaBla',
severity: 'medium',
},
{
assignee: 'Bug Hunter',
title: 'Kill that other nifty bug as well!',
description: 'BlaBlaBla',
severity: 'low',
},
];

@@ -11,13 +11,15 @@ class SearchBar extends React.Component {
label="Taskname"
variant="outlined"
defaultValue={this.props.filterString}
onChange={this.props.filterStringChangeHandler}
/>
<br/>
<FormControlLabel
control={
<Checkbox
value="onlyHighSev"
value="onlyHighSev"
checked={this.props.showOnlyHighSeverity}
onChange={this.props.severityChangeHandler}
/>
}
label="Only High Severity"

0 comments on commit 450161e

Please sign in to comment.
You can’t perform that action at this time.