import React, { Component } from 'react'
import Header from '../header/Header'
import Subheader from '../subheader/Subheader'
import { Link } from 'react-router-dom'
import FilterBox from '../filterbox/FilterBox'
import getTranslation from '../../i18n/'
import Footer from '../footer/Footer'
import KnowledgeBox from './KnowledgeBox'
import { buildFilterbox } from '../filterbox/filterhelper'
/**
* The knowledge repository page which lists the contents of it and gives filter options
*/
class KnowledgeRepository extends Component {
constructor(props) {
super(props);
this.state = {
itemsPerPage: 10
}
}
/**
* Toggle the filters to filter the list of contents
* @param {} filter
* @param {} id
*/
toggleFilter(filter, id) {
let temp = this.props.filter.filters;
let removed = false;
temp[filter].filter.map((singleton, index) => {
if(singleton === id) {
temp[filter].filter.splice(index, 1);
removed = true;
}
})
if(temp[filter].single) {
temp[filter].filter = [];
}
if(!removed) {
if(id !== 0) {
temp[filter].filter.push(id);
}
}
this.props.updateFilter(temp)
}
/**
* Filter the list of contents based on the tags
* @param {} tags
*/
keywordFilter(tags) {
this.props.tagSearch(tags);
}
render() {
let currentPage = this.props.page ? this.props.page : 0;
let pages = [];
let contents = this.props.contents;
if(currentPage*this.state.itemsPerPage > contents.length) {
currentPage = 0;
}
if(contents.length > 0) {
contents.map(content => {
content.desc = content.synopsis.split('\n').map((item, key) => {
return <span key={key}>{item}<br/></span>
})
})
let paged = [];
for(let i = 0; i < this.state.itemsPerPage; i++) {
let indexToPush = (currentPage*this.state.itemsPerPage) + i;
if(contents[indexToPush] !== undefined) {
paged.push(contents[indexToPush])
}
}
contents = paged;
let numberOfPages = this.props.contents.length / this.state.itemsPerPage;
numberOfPages = Math.ceil(numberOfPages);
for(let i = 1; i<=numberOfPages;i++) {
pages.push(i);
}
}
let filters = buildFilterbox(this.props.filter.filters, this.props)
return(
<div>
<Header />
<div className="container container-small">
<Subheader title="subheader.knowledge_repository" />
<FilterBox keywordFilter={(tags) => this.keywordFilter(tags)} tags={this.props.tags} toggleFilter={(filter,id) => this.toggleFilter(filter, id)} title={getTranslation("filterbox.title")} filters={filters} filteroptions={this.props.filter.filters} />
{((this.props.contents.length === 0) && (!this.props.fetching.dataFetching.isFetching)) &&
<h2 className="no-result" dangerouslySetInnerHTML={{__html: getTranslation("contentview.no_content_existing")}}></h2>
}
{((this.props.contents.length !== 0) && (!this.props.fetching.dataFetching.isFetching)) &&
<div className="pagination-box">
<h2 className="no-result">{this.props.contents.length} {getTranslation("results.found")}</h2>
<div className="pagination">
<ul>
<li>{getTranslation("pages")}:</li>
{(currentPage !== 0) &&
<li><Link to={"/experts/knowledge-repository/page/"+(currentPage)}><</Link></li>
}
{pages.map(page =>
<li className={(page === currentPage+1 ? 'active' : 'not-active')}><Link to={"/experts/knowledge-repository/page/"+(page)}>{page}</Link></li>
)}
{(currentPage !== pages.length-1) &&
<li><Link to={"/experts/knowledge-repository/page/"+(currentPage+2)}>></Link></li>
}
</ul>
</div>
</div>
}
{((this.props.fetching.dataFetching.isFetching) && (this.props.contents.length === 0)) &&
<div className="default-element default-element-dark profile-teaser">
<div className="loader"></div>
</div>
}
{contents.map(content =>
<KnowledgeBox key={content.id} content={content} languages={this.props.languages} />
)}
<Footer activeLanguage={this.props.language.locale} pages={this.props.pages} />
</div>
</div>
)
}
}
export default KnowledgeRepository