57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import {Link} from 'react-router-dom';
|
||
|
|
|
||
|
|
class TopicsList extends React.Component {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.state = {
|
||
|
|
currentFilter: "",
|
||
|
|
filteredTopics: [],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.setState({
|
||
|
|
filteredTopics: this.props.allTopics
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
filterTopics(event) {
|
||
|
|
// find the topics that contain that string
|
||
|
|
// return filtered topics.
|
||
|
|
// this.
|
||
|
|
const input = event.target.value.toLowerCase();
|
||
|
|
this.setState({
|
||
|
|
filteredTopics: this.props.allTopics.filter(topic => topic.name.toLowerCase().indexOf(input) !== -1)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<main className="topics-list">
|
||
|
|
<section className="filter-box">
|
||
|
|
<label className="label" htmlFor="search-topics">
|
||
|
|
<i className="fa fa-filter"> </i>
|
||
|
|
Filter Topics :
|
||
|
|
<input type="text" id="search-topics" ref="filter-element" onChange={event => this.filterTopics(event)}/>
|
||
|
|
</label>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{this.state.filteredTopics.map(topic => {
|
||
|
|
return (
|
||
|
|
|
||
|
|
<section className="topic-item" key={topic.name}>
|
||
|
|
<Link to={"/topic/" + topic.name}>
|
||
|
|
<h3>{topic.name} ({topic.items} videos)</h3>
|
||
|
|
</Link>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
</main>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export default TopicsList;
|