Commit 0087ea45 authored by Live Jortveit Sagebakken's avatar Live Jortveit Sagebakken
Browse files

(#3) Added filter for issues based on labels

parent d61c0c68
import React, { Component, useEffect, useState } from "react";
import IssueView from "./IssueView";
class Issue extends React.Component<any, any> {
constructor(props: any) {
......@@ -17,21 +18,25 @@ class Issue extends React.Component<any, any> {
})
.then((result) => result.json())
.then((issue) => this.setState({ issues: issue }));
console.log(this.state);
}
render() {
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>
);
render() {
// Tenker å legge inn if-setning her (hvis det går) slik at alle issues blir vist når "alle" er valgt, og hvis ikke, så filtreres de med filter-funksjonen under her.
return (
<div>
{this.state.issues
.filter((issue: {labels: string}) =>
issue.labels[0].toLowerCase() === this.props.value.toLowerCase()) // Ikke bra måte å hente label med indeks, måtte bare teste, skal fikse senere!
.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>
);
}
}
......
import React, { Component } from "react";
import Issue from "./Issue";
class IssueView extends React.Component<{}> {
class IssueView extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {value: 'alle'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event: any) {
this.setState({value: event.target.value});
alert("Filter on: " + event.target.value);
}
render() {
return (
<>
<h3>Issues</h3>
<label>Filtrer:
<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>
<div id="issueBox">
{/* Må ha dette hvis Issue skal inni en IssueBox i App: {this.props.children} */}
<Issue></Issue>
<Issue value={this.state.value}></Issue>
</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