2017-05-19 07:43:29 +02:00
|
|
|
import Inferno from 'inferno';
|
2018-02-22 07:47:39 +01:00
|
|
|
import { Component } from 'inferno';
|
2017-11-15 21:59:58 +01:00
|
|
|
import PropTypes from 'prop-types';
|
2017-05-19 07:43:29 +02:00
|
|
|
import marked from 'marked';
|
|
|
|
|
2017-09-11 19:29:22 +02:00
|
|
|
// npm lazyload-inferno-component uses outdated inferno dependencies, so just using the script.
|
|
|
|
import LazyLoader from '../../../vendor/LGabAnnell/lazyload-inferno-component/lazyload-component';
|
|
|
|
|
2017-05-19 07:43:29 +02:00
|
|
|
import idManager from '../../managers/IDManager';
|
|
|
|
|
2017-07-26 06:11:33 +02:00
|
|
|
import { WordDisplay } from './WordDisplay';
|
2017-05-19 07:43:29 +02:00
|
|
|
|
2017-09-11 19:29:22 +02:00
|
|
|
const loadAd = (callback, { props, router }) => {
|
|
|
|
require.ensure([], (require) => {
|
|
|
|
const component = require("./Ad").Ad;
|
|
|
|
callback(component);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2017-05-19 07:43:29 +02:00
|
|
|
export class WordsList extends Component {
|
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
2017-11-15 21:59:58 +01:00
|
|
|
|
|
|
|
PropTypes.checkPropTypes({
|
|
|
|
adsEveryXWords: PropTypes.number,
|
|
|
|
words: PropTypes.array,
|
|
|
|
updateDisplay: PropTypes.func.isRequired,
|
|
|
|
}, props, 'prop', 'WordList');
|
2017-05-19 07:43:29 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2017-09-11 19:29:22 +02:00
|
|
|
const adsEveryXWords = this.props.adsEveryXWords || 10;
|
|
|
|
|
2017-05-19 07:43:29 +02:00
|
|
|
return (
|
|
|
|
<div className='box'>
|
|
|
|
|
2017-06-25 22:23:42 +02:00
|
|
|
{this.props.words
|
2017-09-11 19:29:22 +02:00
|
|
|
&& this.props.words.map((word, index) => {
|
2017-05-19 07:43:29 +02:00
|
|
|
return (
|
2017-12-16 18:14:04 +01:00
|
|
|
<div key={ `word_${word.id}` }>
|
|
|
|
{index % adsEveryXWords == 1
|
|
|
|
&& <LazyLoader key={ index } lazyLoad={ loadAd } />
|
2017-11-15 19:02:09 +01:00
|
|
|
}
|
|
|
|
|
2017-12-16 18:14:04 +01:00
|
|
|
<WordDisplay word={ word }
|
2017-11-15 19:02:09 +01:00
|
|
|
updateDisplay={ this.props.updateDisplay } />
|
|
|
|
</div>
|
2017-05-19 07:43:29 +02:00
|
|
|
);
|
|
|
|
})
|
2017-06-25 22:23:42 +02:00
|
|
|
}
|
2017-05-19 07:43:29 +02:00
|
|
|
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|