Commit ce8e55dd authored by Keith Charlene Tan Esmena's avatar Keith Charlene Tan Esmena
Browse files

Save choice for filtering issues (#5)

parent 7cd46aa9
......@@ -20,35 +20,35 @@ class Issue extends React.Component<any, any> {
.then((issue) => this.setState({ issues: issue }));
}
render() {
render() {
const status = this.props.value;
if(status === "Alle"){
if (status === "All") {
return (
<div>
{this.state.issues
.map((issue: {title: string, id:number}, index: React.Key) =>(
<div key={index} className="panel panel-default">
<div className="panel-heading">{issue.title}</div>
<div className="panel-body">{issue.id}</div>
</div>
))
}
</div>
);
}
else {
<div>
{this.state.issues.map(
(issue: { title: string; id: number }, index: React.Key) => (
<div key={index} className="panel panel-default">
<div className="panel-heading">{issue.title}</div>
<div className="panel-body">{issue.id}</div>
</div>
)
)}
</div>
);
} else {
return (
<div>
{this.state.issues
.filter((issue: {labels: string}) =>
issue.labels.includes(this.props.value))
.map((fIssue: {title: string, id:number}, index: React.Key) =>(
.filter((issue: { labels: string }) =>
issue.labels.includes(this.props.value)
)
.map((fIssue: { title: string; id: number }, index: React.Key) => (
<div key={index} className="panel panel-default">
<div className="panel-heading">{fIssue.title}</div>
<div className="panel-body">{fIssue.id}</div>
</div>
))
}
))}
</div>
);
}
......
......@@ -2,32 +2,41 @@ import React, { Component } from "react";
import Issue from "./Issue";
class IssueView extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {value: 'Alle'};
this.handleChange = this.handleChange.bind(this);
let savedFilter = "All";
if (localStorage.getItem("issueFilter")) {
savedFilter = String(localStorage.getItem("issueFilter"));
}
this.state = {
issueFilter: savedFilter,
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event: any) {
this.setState({value: event.target.value});
handleChange(event: any) {
this.setState({ value: event.target.value });
localStorage.setItem("issueFilter", event.target.value);
}
render() {
console.log("start: " + this.state.issueFilter);
let savedFilter = String(localStorage.getItem("issueFilter"));
return (
<>
<h3>Issues</h3>
<label>Filtrer issues:
<select value = {this.state.value} onChange = {this.handleChange}>
<option value="Alle">Alle</option>
<option value="To do">To do</option>
<option value="Doing">Doing</option>
<option value="Done">Done</option>
</select>
</label>
<label>Filter issues: </label>
<select value={savedFilter} onChange={this.handleChange} id="issues">
<option value="All">All</option>
<option value="To do">To do</option>
<option value="Doing">Doing</option>
<option value="Done">Done</option>
</select>
<div id="issueBox">
{/* Må ha dette hvis Issue skal inni en IssueBox i App: {this.props.children} */}
<Issue value={this.state.value} />
<Issue value={savedFilter} />
</div>
</>
);
......
Supports Markdown
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