2017-04-19 23:11:37 +02:00
|
|
|
import Inferno from 'inferno';
|
2017-12-09 23:07:28 +01:00
|
|
|
import Component from 'inferno-component';
|
2017-11-15 21:59:58 +01:00
|
|
|
import PropTypes from 'prop-types';
|
2017-04-19 23:11:37 +02:00
|
|
|
|
2017-07-26 06:11:33 +02:00
|
|
|
import { LeftColumn } from './structure/LeftColumn';
|
|
|
|
import { RightColumn } from './structure/RightColumn';
|
2018-02-22 07:14:39 +01:00
|
|
|
import { Pagination } from './structure/Pagination';
|
2017-04-19 23:11:37 +02:00
|
|
|
|
2017-07-26 06:11:33 +02:00
|
|
|
import { WordForm } from './management/WordForm';
|
|
|
|
import { DictionaryDetails } from './display/DictionaryDetails';
|
|
|
|
import { WordsList } from './display/WordsList';
|
2017-04-19 23:11:37 +02:00
|
|
|
|
2017-12-09 23:07:28 +01:00
|
|
|
export class MainDisplay extends Component {
|
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
PropTypes.checkPropTypes({
|
|
|
|
dictionaryInfo: PropTypes.object.isRequired,
|
|
|
|
wordsToDisplay: PropTypes.array.isRequired,
|
2017-12-22 20:35:50 +01:00
|
|
|
wordsAreFiltered: PropTypes.bool,
|
2018-02-22 07:14:39 +01:00
|
|
|
currentPage: PropTypes.number,
|
|
|
|
itemsPerPage: PropTypes.number,
|
|
|
|
stats: PropTypes.object.isRequired,
|
|
|
|
setPage: PropTypes.func.isRequired,
|
2017-12-09 23:07:28 +01:00
|
|
|
updateDisplay: PropTypes.func.isRequired,
|
|
|
|
updater: PropTypes.object.isRequired,
|
|
|
|
}, props, 'prop', 'MainDisplay');
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
isMobile: false,
|
2017-12-10 22:11:29 +01:00
|
|
|
wordFormIsOpen: true,
|
2017-12-09 23:07:28 +01:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
openWordForm () {
|
|
|
|
this.setState({ wordFormIsOpen: true });
|
|
|
|
}
|
|
|
|
|
|
|
|
closeWordForm () {
|
|
|
|
this.setState({ wordFormIsOpen: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
checkIsMobile () {
|
|
|
|
this.setState({ isMobile: window.innerWidth < 769 });
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
window.addEventListener('resize', this.checkIsMobile.bind(this));
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount () {
|
|
|
|
window.removeEventListener('resize');
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2017-12-22 20:35:50 +01:00
|
|
|
const {
|
|
|
|
dictionaryInfo,
|
|
|
|
wordsToDisplay,
|
|
|
|
wordsAreFiltered,
|
2018-02-22 07:14:39 +01:00
|
|
|
currentPage,
|
|
|
|
itemsPerPage,
|
|
|
|
stats,
|
|
|
|
setPage,
|
2017-12-22 20:35:50 +01:00
|
|
|
updateDisplay,
|
|
|
|
updater,
|
|
|
|
} = this.props;
|
2017-12-09 23:07:28 +01:00
|
|
|
const { isMobile, wordFormIsOpen } = this.state;
|
2017-12-12 18:46:41 +01:00
|
|
|
const wordFormIsDisabled = dictionaryInfo.settings.isComplete;
|
2017-12-09 23:07:28 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<section className='section'>
|
|
|
|
<div className='container'>
|
|
|
|
<div className='columns'>
|
|
|
|
|
|
|
|
<LeftColumn
|
2017-12-12 18:46:41 +01:00
|
|
|
isDisabled={ wordFormIsDisabled }
|
2017-12-12 18:16:15 +01:00
|
|
|
isMobile={ isMobile }
|
|
|
|
displayForm={ wordFormIsOpen }
|
2017-12-09 23:07:28 +01:00
|
|
|
openWordForm={ this.openWordForm.bind(this) }
|
|
|
|
closeWordForm={ this.closeWordForm.bind(this) }
|
|
|
|
>
|
|
|
|
<WordForm
|
|
|
|
updateDisplay={ updateDisplay }
|
|
|
|
/>
|
|
|
|
</LeftColumn>
|
|
|
|
|
2017-12-12 18:46:41 +01:00
|
|
|
<RightColumn formIsDisplayed={ !wordFormIsDisabled && wordFormIsOpen }>
|
2017-12-09 23:07:28 +01:00
|
|
|
<DictionaryDetails
|
|
|
|
updater={ updater }
|
|
|
|
name={ dictionaryInfo.name }
|
|
|
|
specification={ dictionaryInfo.specification }
|
|
|
|
description={ dictionaryInfo.description }
|
|
|
|
partsOfSpeech={ dictionaryInfo.partsOfSpeech }
|
|
|
|
details={ dictionaryInfo.details }
|
2017-12-12 18:16:15 +01:00
|
|
|
settings={ dictionaryInfo.settings }
|
2017-12-16 18:14:34 +01:00
|
|
|
stats={ dictionaryInfo.stats }
|
2017-12-09 23:07:28 +01:00
|
|
|
alphabeticalOrder={ dictionaryInfo.alphabeticalOrder }
|
2017-12-12 19:01:00 +01:00
|
|
|
updateDisplay={ updateDisplay }
|
2017-12-09 23:07:28 +01:00
|
|
|
/>
|
|
|
|
|
2017-12-22 20:35:50 +01:00
|
|
|
{wordsAreFiltered
|
|
|
|
&& (
|
|
|
|
<div className='notification'>
|
|
|
|
Words are filtered—displaying {wordsToDisplay.length} word{wordsToDisplay.length !== 1 && 's'}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
2017-12-09 23:07:28 +01:00
|
|
|
<WordsList
|
|
|
|
words={ wordsToDisplay }
|
|
|
|
adsEveryXWords={ 10 }
|
|
|
|
updateDisplay={ updateDisplay } />
|
2018-02-22 07:14:39 +01:00
|
|
|
|
|
|
|
<Pagination
|
|
|
|
currentPage={currentPage}
|
|
|
|
itemsPerPage={itemsPerPage}
|
2018-02-22 07:16:41 +01:00
|
|
|
stats={stats}
|
2018-02-22 07:14:39 +01:00
|
|
|
setPage={ setPage } />
|
2017-12-09 23:07:28 +01:00
|
|
|
</RightColumn>
|
|
|
|
|
|
|
|
</div>
|
2017-04-19 23:11:37 +02:00
|
|
|
</div>
|
2017-12-09 23:07:28 +01:00
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
2017-04-19 23:11:37 +02:00
|
|
|
}
|