Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Fix code style 

Remove misguided comma-first style, add floating commas, and improve
spacing and parentheses for single-param inline arrow functions.
This commit is contained in:
Robbie Antenesse 2017-07-25 22:11:33 -06:00
parent d4043e2d79
commit a443fe4c3f
16 changed files with 401 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/MainDisplay.jsx
View File

@ -1,13 +1,13 @@
import Inferno from 'inferno'; import Inferno from 'inferno';
import {LeftColumn} from './structure/LeftColumn'; import { LeftColumn } from './structure/LeftColumn';
import {RightColumn} from './structure/RightColumn'; import { RightColumn } from './structure/RightColumn';
import {WordForm} from './management/WordForm'; import { WordForm } from './management/WordForm';
import {DictionaryDetails} from './display/DictionaryDetails'; import { DictionaryDetails } from './display/DictionaryDetails';
import {WordsList} from './display/WordsList'; import { WordsList } from './display/WordsList';
export const MainDisplay = ({dictionaryInfo, wordsToDisplay, updateDisplay, lastRender}) => { export const MainDisplay = ({ dictionaryInfo, wordsToDisplay, updateDisplay, lastRender }) => {
return ( return (
<section className='section'> <section className='section'>
<div className='container'> <div className='container'>
@ -15,28 +15,28 @@ export const MainDisplay = ({dictionaryInfo, wordsToDisplay, updateDisplay, last
<LeftColumn> <LeftColumn>
<WordForm <WordForm
updateDisplay={() => updateDisplay()} updateDisplay={ () => updateDisplay() }
partsOfSpeech={dictionaryInfo.partsOfSpeech} partsOfSpeech={ dictionaryInfo.partsOfSpeech }
/> />
</LeftColumn> </LeftColumn>
<RightColumn> <RightColumn>
<DictionaryDetails <DictionaryDetails
name={dictionaryInfo.name} name={ dictionaryInfo.name }
specification={dictionaryInfo.specification} specification={ dictionaryInfo.specification }
description={dictionaryInfo.description} description={ dictionaryInfo.description }
details={{ details={{
custom: [ custom: [
{ {
name: 'Test Tab' name: 'Test Tab',
} }
] ]
}} }}
/> />
<WordsList <WordsList
lastRender={lastRender} lastRender={ lastRender }
words={wordsToDisplay} /> words={ wordsToDisplay } />
</RightColumn> </RightColumn>
</div> </div>

46
src/components/display/DictionaryDetails.jsx
View File

@ -3,10 +3,10 @@ import Component from 'inferno-component';
import marked from 'marked'; import marked from 'marked';
const DISPLAY = { const DISPLAY = {
NONE: false NONE: false,
, DESCRIPTION: 1 DESCRIPTION: 1,
, DETAILS: 2 DETAILS: 2,
, STATS: 3 STATS: 3,
} }
export class DictionaryDetails extends Component { export class DictionaryDetails extends Component {
@ -14,15 +14,15 @@ export class DictionaryDetails extends Component {
super(props); super(props);
this.state = { this.state = {
currentDisplay: DISPLAY.NONE currentDisplay: DISPLAY.NONE,
} }
this._descriptionHTML = marked(props.description); this._descriptionHTML = marked(props.description);
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
const currentDescription = this.props.description const currentDescription = this.props.description,
, nextDescription = nextProps.description; nextDescription = nextProps.description;
if (currentDescription !== nextDescription) { if (currentDescription !== nextDescription) {
this._descriptionHTML = marked(nextProps.description); this._descriptionHTML = marked(nextProps.description);
@ -33,7 +33,7 @@ export class DictionaryDetails extends Component {
display = (this.state.currentDisplay !== display) ? display : DISPLAY.NONE; display = (this.state.currentDisplay !== display) ? display : DISPLAY.NONE;
this.setState({ this.setState({
currentDisplay: display currentDisplay: display,
}); });
} }
@ -61,9 +61,9 @@ export class DictionaryDetails extends Component {
if (this.props.details.hasOwnProperty('custom')) { if (this.props.details.hasOwnProperty('custom')) {
let customTabsJSX = this.props.details.custom.map((tab) => { let customTabsJSX = this.props.details.custom.map((tab) => {
return ( return (
<li key={'customTab' + Date.now().toString()}> <li key={ 'customTab' + Date.now().toString() }>
<a> <a>
{tab.name} { tab.name }
</a> </a>
</li> </li>
); );
@ -75,7 +75,7 @@ export class DictionaryDetails extends Component {
Additional Additional
</p> </p>
<ul className="menu-list"> <ul className="menu-list">
{customTabsJSX} { customTabsJSX }
</ul> </ul>
</div> </div>
); );
@ -91,7 +91,7 @@ export class DictionaryDetails extends Component {
<li><a>Grammar</a></li> <li><a>Grammar</a></li>
</ul> </ul>
{additionalMenu} { additionalMenu }
</aside> </aside>
); );
@ -106,8 +106,8 @@ export class DictionaryDetails extends Component {
displayJSX = ( displayJSX = (
<div className='columns'> <div className='columns'>
{menu} { menu }
{content} { content }
</div> </div>
); );
break; break;
@ -125,7 +125,7 @@ export class DictionaryDetails extends Component {
return ( return (
<div className='box'> <div className='box'>
{displayJSX} { displayJSX }
</div> </div>
) )
} }
@ -139,7 +139,7 @@ export class DictionaryDetails extends Component {
<div className='level-left'> <div className='level-left'>
<div className='level-item'> <div className='level-item'>
<h2 className='title is-2'> <h2 className='title is-2'>
{this.props.name} {this.props.specification} { this.props.name } { this.props.specification }
</h2> </h2>
</div> </div>
</div> </div>
@ -159,25 +159,25 @@ export class DictionaryDetails extends Component {
<div className='tabs is-toggle'> <div className='tabs is-toggle'>
<ul> <ul>
<li className={(this.state.currentDisplay === DISPLAY.DESCRIPTION) ? 'is-active' : null}> <li className={ (this.state.currentDisplay === DISPLAY.DESCRIPTION) ? 'is-active' : null }>
<a onClick={this.toggleDisplay.bind(this, DISPLAY.DESCRIPTION)}> <a onClick={ this.toggleDisplay.bind(this, DISPLAY.DESCRIPTION) }>
<span>Description</span> <span>Description</span>
</a> </a>
</li> </li>
<li className={(this.state.currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null}> <li className={ (this.state.currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null }>
<a onClick={this.toggleDisplay.bind(this, DISPLAY.DETAILS)}> <a onClick={ this.toggleDisplay.bind(this, DISPLAY.DETAILS) }>
<span>Details</span> <span>Details</span>
</a> </a>
</li> </li>
<li className={(this.state.currentDisplay === DISPLAY.STATS) ? 'is-active' : null}> <li className={ (this.state.currentDisplay === DISPLAY.STATS) ? 'is-active' : null }>
<a onClick={this.toggleDisplay.bind(this, DISPLAY.STATS)}> <a onClick={ this.toggleDisplay.bind(this, DISPLAY.STATS) }>
<span>Stats</span> <span>Stats</span>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
{this.displayInfo()} { this.displayInfo() }
</div> </div>
); );

12
src/components/display/WordDisplay.jsx
View File

@ -3,16 +3,16 @@ import Component from 'inferno-component';
import marked from 'marked'; import marked from 'marked';
import idManager from '../../managers/IDManager'; import idManager from '../../managers/IDManager';
import {Word} from '../../managers/Word'; import { Word } from '../../managers/Word';
import {WordForm} from '../management/WordForm'; import { WordForm } from '../management/WordForm';
export class WordDisplay extends Component { export class WordDisplay extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = { this.state = {
isEditing: false isEditing: false,
} }
} }
@ -22,7 +22,7 @@ export class WordDisplay extends Component {
<header className='card-header'> <header className='card-header'>
<h3 className='card-header-title'> <h3 className='card-header-title'>
{this.props.word.name} { this.props.word.name }
</h3> </h3>
</header> </header>
@ -47,14 +47,14 @@ export class WordDisplay extends Component {
{(this.props.word.definition) {(this.props.word.definition)
&& ( && (
<p> <p>
{this.props.word.definition} { this.props.word.definition }
</p> </p>
)} )}
{(this.props.word.details) {(this.props.word.details)
&& ( && (
<p> <p>
{this.props.word.details} { this.props.word.details }
</p> </p>
)} )}
</div> </div>

6
src/components/display/WordsList.jsx
View File

@ -4,7 +4,7 @@ import marked from 'marked';
import idManager from '../../managers/IDManager'; import idManager from '../../managers/IDManager';
import {WordDisplay} from './WordDisplay'; import { WordDisplay } from './WordDisplay';
export class WordsList extends Component { export class WordsList extends Component {
constructor (props) { constructor (props) {
@ -18,8 +18,8 @@ export class WordsList extends Component {
{this.props.words {this.props.words
&& this.props.words.map(word => { && this.props.words.map(word => {
return ( return (
<WordDisplay key={`word_${word.id}`} <WordDisplay key={ `word_${word.id}` }
word={word} /> word={ word } />
); );
}) })
} }

54
src/components/management/IPAField.jsx
View File

@ -6,7 +6,7 @@ const digraphs = require('../../../vendor/KeyboardFire/phondue/digraphs.json');
import Helper from '../../Helper'; import Helper from '../../Helper';
import {IPATable} from './IPATable'; import { IPATable } from './IPATable';
export class IPAField extends Component { export class IPAField extends Component {
/* /*
@ -17,9 +17,9 @@ export class IPAField extends Component {
super(props); super(props);
this.state = { this.state = {
value: props.value || '' value: props.value || '',
, doShowHelp: false doShowHelp: false,
, doShowTable: false doShowTable: false,
} }
this.field = null; this.field = null;
@ -27,7 +27,7 @@ export class IPAField extends Component {
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
this.setState({ this.setState({
value: nextProps.value value: nextProps.value,
}); });
} }
@ -36,19 +36,21 @@ export class IPAField extends Component {
return ( return (
<div className='modal is-active'> <div className='modal is-active'>
<div className='modal-background' <div className='modal-background'
onClick={() => this.setState({ doShowHelp: false })} /> onClick={ () => this.setState({ doShowHelp: false }) } />
<div className='modal-card'> <div className='modal-card'>
<header className='modal-card-head'> <header className='modal-card-head'>
<h3 className='modal-card-title'> <h3 className='modal-card-title'>
IPA Shortcuts IPA Shortcuts
</h3> </h3>
<button className='delete' <button className='delete'
onClick={() => this.setState({ doShowHelp: false })} /> onClick={ () => this.setState({ doShowHelp: false }) } />
</header> </header>
<section className='modal-card-body'> <section className='modal-card-body'>
<div className='content' <div className='content'
dangerouslySetInnerHTML={{__html: phondueUsage}} /> dangerouslySetInnerHTML={{
__html: phondueUsage,
}} />
</section> </section>
</div> </div>
@ -61,9 +63,9 @@ export class IPAField extends Component {
if (this.state.doShowTable) { if (this.state.doShowTable) {
return ( return (
<IPATable <IPATable
value={this.state.value} value={ this.state.value }
close={() => this.setState({ doShowTable: false })} close={ () => this.setState({ doShowTable: false }) }
update={newValue => this.setState({ value: newValue }, this.field.focus())} /> update={ (newValue) => this.setState({ value: newValue }, this.field.focus()) } />
); );
} }
} }
@ -74,28 +76,28 @@ export class IPAField extends Component {
<div> <div>
<div className='help'> <div className='help'>
<a className='button is-small' <a className='button is-small'
onClick={() => this.setState({ doShowHelp: true })}> onClick={ () => this.setState({ doShowHelp: true }) }>
Field Help Field Help
</a> </a>
&nbsp; &nbsp;
<a className='button is-small' <a className='button is-small'
onClick={() => this.setState({ doShowTable: true })}> onClick={ () => this.setState({ doShowTable: true }) }>
Show IPA Table Show IPA Table
</a> </a>
</div> </div>
{this.showHelp()} {this.showTable()} { this.showHelp() } { this.showTable() }
</div> </div>
); );
} }
} }
onInput (event) { onInput (event) {
let val = event.target.value let val = event.target.value,
, pos = this.field.selectionStart || val.length; pos = this.field.selectionStart || val.length;
if (event.key) { if (event.key) {
const key = event.key const key = event.key,
, digraph = digraphs[val.substr(pos - 1, 1) + key]; digraph = digraphs[val.substr(pos - 1, 1) + key];
if (digraph) { if (digraph) {
event.preventDefault(); event.preventDefault();
@ -116,14 +118,16 @@ export class IPAField extends Component {
<div className='field'> <div className='field'>
<label className='label'>Pronunciation</label> <label className='label'>Pronunciation</label>
<p className='control'> <p className='control'>
<input className='input' type='text' disabled={!!this.props.isDisplayOnly} placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]' <input className='input' type='text'
ref={input => this.field = input} placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]'
value={this.state.value} disabled={ !!this.props.isDisplayOnly }
onInput={event => this.onInput(event)} ref={ (input) => this.field = input }
onKeyDown={event => this.onInput(event)} value={ this.state.value }
onChange={() => this.props.onChange(this.state.value)} /> onInput={ (event) => this.onInput(event) }
onKeyDown={ (event) => this.onInput(event) }
onChange={ () => this.props.onChange(this.state.value) } />
</p> </p>
{this.showButtons()} { this.showButtons() }
</div> </div>
); );
} }

366
src/components/management/IPATable.jsx
View File

File diff suppressed because it is too large Load Diff

18
src/components/management/SearchBox/index.jsx
View File

@ -56,7 +56,7 @@ export class SearchBox extends Component {
<p className='control'> <p className='control'>
<span className='select'> <span className='select'>
<select value={ this.state.searchingIn } <select value={ this.state.searchingIn }
onChange={event => { onChange={(event) => {
this.setState({ searchingIn: event.target.value }); this.setState({ searchingIn: event.target.value });
}}> }}>
<option value='name'>Word</option> <option value='name'>Word</option>
@ -67,11 +67,11 @@ export class SearchBox extends Component {
</p> </p>
<p className='control is-expanded'> <p className='control is-expanded'>
<input className='input' type='text' placeholder='Search Term' <input className='input' type='text' placeholder='Search Term'
ref={input => { ref={(input) => {
this.searchBox = input; this.searchBox = input;
}} }}
value={ this.state.searchTerm } value={ this.state.searchTerm }
onChange={event => { onChange={(event) => {
console.log(event); console.log(event);
this.setState({ searchTerm: event.target.value }); this.setState({ searchTerm: event.target.value });
}} /> }} />
@ -115,7 +115,7 @@ export class SearchBox extends Component {
<input type='radio' name='searchmethod' <input type='radio' name='searchmethod'
value={ METHOD.contains } value={ METHOD.contains }
checked={ this.state.searchMethod === METHOD.contains } checked={ this.state.searchMethod === METHOD.contains }
onClick={event => { onClick={(event) => {
if (event.currentTarget.checked) { if (event.currentTarget.checked) {
this.setState({ this.setState({
searchMethod: event.currentTarget.value, searchMethod: event.currentTarget.value,
@ -131,7 +131,7 @@ export class SearchBox extends Component {
<input type='radio' name='searchmethod' <input type='radio' name='searchmethod'
value={ METHOD.startsWith } value={ METHOD.startsWith }
checked={ this.state.searchMethod === METHOD.startsWith } checked={ this.state.searchMethod === METHOD.startsWith }
onClick={event => { onClick={(event) => {
if (event.currentTarget.checked) { if (event.currentTarget.checked) {
this.setState({ this.setState({
searchMethod: event.currentTarget.value, searchMethod: event.currentTarget.value,
@ -147,7 +147,7 @@ export class SearchBox extends Component {
<input type='radio' name='searchmethod' <input type='radio' name='searchmethod'
value={ METHOD.endsWith } value={ METHOD.endsWith }
checked={ this.state.searchMethod === METHOD.endsWith } checked={ this.state.searchMethod === METHOD.endsWith }
onClick={event => { onClick={(event) => {
if (event.currentTarget.checked) { if (event.currentTarget.checked) {
this.setState({ this.setState({
searchMethod: event.currentTarget.value, searchMethod: event.currentTarget.value,
@ -163,7 +163,7 @@ export class SearchBox extends Component {
<input type='radio' name='searchmethod' <input type='radio' name='searchmethod'
value={ METHOD.isExactly } value={ METHOD.isExactly }
checked={ this.state.searchMethod === METHOD.isExactly } checked={ this.state.searchMethod === METHOD.isExactly }
onClick={event => { onClick={(event) => {
if (event.currentTarget.checked) { if (event.currentTarget.checked) {
this.setState({ this.setState({
searchMethod: event.currentTarget.value, searchMethod: event.currentTarget.value,
@ -234,13 +234,13 @@ export class SearchBox extends Component {
showHeader () { showHeader () {
this.setState({ this.setState({
showHeader: true showHeader: true,
}); });
} }
hideHeader () { hideHeader () {
this.setState({ this.setState({
showHeader: false showHeader: false,
}); });
} }

80
src/components/management/WordForm.jsx
View File

@ -1,32 +1,32 @@
import Inferno from 'inferno'; import Inferno from 'inferno';
import Component from 'inferno-component'; import Component from 'inferno-component';
import {IPAField} from './IPAField'; import { IPAField } from './IPAField';
import {Word} from '../../managers/Word'; import { Word } from '../../managers/Word';
export class WordForm extends Component { export class WordForm extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = { this.state = {
wordName: this.props.name || '' wordName: this.props.name || '',
, wordPronunciation: this.props.pronunciation || '' wordPronunciation: this.props.pronunciation || '',
, wordPartOfSpeech: this.props.partOfSpeech || '' wordPartOfSpeech: this.props.partOfSpeech || '',
, wordDefinition: this.props.definition || '' wordDefinition: this.props.definition || '',
, wordDetails: this.props.details || '' wordDetails: this.props.details || '',
, nameIsValid: true nameIsValid: true,
, pronunciationIsValid: true pronunciationIsValid: true,
, partOfSpeechIsValid: true partOfSpeechIsValid: true,
, definitionIsValid: true definitionIsValid: true,
, detailsIsValid: true detailsIsValid: true,
} }
} }
isValidWord () { isValidWord () {
let nameIsValid = true let nameIsValid = true,
, definitionIsValid = true definitionIsValid = true,
, detailsIsValid = true; detailsIsValid = true;
if (this.state.wordName === '') { if (this.state.wordName === '') {
nameIsValid = false; nameIsValid = false;
@ -43,9 +43,9 @@ export class WordForm extends Component {
} }
this.setState({ this.setState({
nameIsValid nameIsValid,
, definitionIsValid definitionIsValid,
, detailsIsValid detailsIsValid,
}); });
return nameIsValid == true && definitionIsValid == true && detailsIsValid == true; return nameIsValid == true && definitionIsValid == true && detailsIsValid == true;
@ -53,11 +53,11 @@ export class WordForm extends Component {
submitWord () { submitWord () {
const word = new Word({ const word = new Word({
name: this.state.wordName name: this.state.wordName,
, pronunciation: this.state.wordPronunciation pronunciation: this.state.wordPronunciation,
, partOfSpeech: this.state.wordPartOfSpeech partOfSpeech: this.state.wordPartOfSpeech,
, definition: this.state.wordDefinition definition: this.state.wordDefinition,
, details: this.state.wordDetails details: this.state.wordDetails,
}); });
@ -80,11 +80,11 @@ export class WordForm extends Component {
clearForm () { clearForm () {
this.setState({ this.setState({
wordName: '' wordName: '',
, wordPronunciation: '' wordPronunciation: '',
, wordPartOfSpeech: '' wordPartOfSpeech: '',
, wordDefinition: '' wordDefinition: '',
, wordDetails: '' wordDetails: '',
}); });
} }
@ -94,9 +94,9 @@ export class WordForm extends Component {
<div className='field'> <div className='field'>
<label className='label'>Word</label> <label className='label'>Word</label>
<p className='control'> <p className='control'>
<input className={`input${(!this.state.nameIsValid) ? ' is-danger' : ''}`} <input className={ `input${(!this.state.nameIsValid) ? ' is-danger' : ''}` }
type='text' placeholder='Required' type='text' placeholder='Required'
value={this.state.wordName} value={ this.state.wordName }
onChange={(event) => { onChange={(event) => {
this.setState({ wordName: event.target.value }); this.setState({ wordName: event.target.value });
}} /> }} />
@ -107,21 +107,23 @@ export class WordForm extends Component {
</p> </p>
</div> </div>
<IPAField value={this.state.wordPronunciation} <IPAField value={ this.state.wordPronunciation }
onChange={newValue => this.setState({ wordPronunciation: newValue })} /> onChange={ (newValue) => this.setState({ wordPronunciation: newValue }) } />
<div className='field'> <div className='field'>
<label className='label'>Part of Speech</label> <label className='label'>Part of Speech</label>
<p className='control'> <p className='control'>
<span className='select'> <span className='select'>
<select value={this.state.wordPartOfSpeech} <select value={ this.state.wordPartOfSpeech }
onChange={event => { onChange={(event) => {
this.setState({ wordPartOfSpeech: event.target.value }); this.setState({ wordPartOfSpeech: event.target.value });
}}> }}>
<option value=''></option> <option value=''></option>
{this.props.partsOfSpeech.map((partOfSpeech) => { {this.props.partsOfSpeech.map((partOfSpeech) => {
return ( return (
<option value={partOfSpeech}>{partOfSpeech}</option> <option value={ partOfSpeech }>
{ partOfSpeech }
</option>
); );
})} })}
</select> </select>
@ -132,9 +134,9 @@ export class WordForm extends Component {
<div className='field'> <div className='field'>
<label className='label'>Definition</label> <label className='label'>Definition</label>
<p className='control'> <p className='control'>
<input className={`input${(!this.state.definitionIsValid) ? ' is-danger' : ''}`} <input className={ `input${(!this.state.definitionIsValid) ? ' is-danger' : ''}` }
type='text' placeholder='Equivalent word(s)' type='text' placeholder='Equivalent word(s)'
value={this.state.wordDefinition} value={ this.state.wordDefinition }
onChange={(event) => { onChange={(event) => {
this.setState({ wordDefinition: event.target.value }) this.setState({ wordDefinition: event.target.value })
}} /> }} />
@ -150,9 +152,9 @@ export class WordForm extends Component {
<div className='field'> <div className='field'>
<label className='label'>Details</label> <label className='label'>Details</label>
<p className='control'> <p className='control'>
<textarea className={`textarea${(!this.state.detailsIsValid) ? ' is-danger' : ''}`} <textarea className={ `textarea${(!this.state.detailsIsValid) ? ' is-danger' : ''}` }
placeholder='Explanation of word (Markdown enabled)' placeholder='Explanation of word (Markdown enabled)'
value={this.state.wordDetails} value={ this.state.wordDetails }
onChange={(event) => { onChange={(event) => {
this.setState({ wordDetails: event.target.value }); this.setState({ wordDetails: event.target.value });
}} /> }} />

6
src/components/structure/Header.jsx
View File

@ -1,7 +1,7 @@
import Inferno from 'inferno'; import Inferno from 'inferno';
import Component from 'inferno-component'; import Component from 'inferno-component';
import {SearchBox} from '../management/SearchBox'; import { SearchBox } from '../management/SearchBox';
export class Header extends Component { export class Header extends Component {
constructor (props) { constructor (props) {
@ -25,12 +25,12 @@ export class Header extends Component {
<div className='nav-item'> <div className='nav-item'>
<SearchBox <SearchBox
partsOfSpeech={ this.props.partsOfSpeech } partsOfSpeech={ this.props.partsOfSpeech }
search={ searchConfig => this.props.search(searchConfig) } /> search={ (searchConfig) => this.props.search(searchConfig) } />
</div> </div>
</div> </div>
<span className={`nav-toggle${this.state.displayNavMenu ? ' is-active' : ''}`} <span className={`nav-toggle${this.state.displayNavMenu ? ' is-active' : ''}`}
onClick={() => this.setState({ displayNavMenu: !this.state.displayNavMenu })}> onClick={ () => this.setState({ displayNavMenu: !this.state.displayNavMenu }) }>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>

2
src/components/structure/LeftColumn.jsx
View File

@ -9,7 +9,7 @@ export class LeftColumn extends Component {
render () { render () {
return ( return (
<div className='column is-one-third'> <div className='column is-one-third'>
{this.props.children} { this.props.children }
</div> </div>
); );
} }

2
src/components/structure/RightColumn.jsx
View File

@ -9,7 +9,7 @@ export class RightColumn extends Component {
render () { render () {
return ( return (
<div className='column is-two-thirds'> <div className='column is-two-thirds'>
{this.props.children} { this.props.children }
</div> </div>
); );
} }

12
src/index.jsx
View File

@ -10,9 +10,9 @@ if (process.env.NODE_ENV !== 'production') {
require('inferno-devtools'); require('inferno-devtools');
} }
import {Header} from './components/structure/Header'; import { Header } from './components/structure/Header';
import {MainDisplay} from './components/MainDisplay'; import { MainDisplay } from './components/MainDisplay';
import {Footer} from './components/structure/Footer'; import { Footer } from './components/structure/Footer';
class App extends Component { class App extends Component {
constructor (props) { constructor (props) {
@ -29,7 +29,7 @@ class App extends Component {
} }
get dictionaryInfo () { get dictionaryInfo () {
const {name, specification, description, partsOfSpeech} = this.state; const { name, specification, description, partsOfSpeech } = this.state;
const info = { const info = {
name, name,
specification, specification,
@ -50,7 +50,7 @@ class App extends Component {
// const {searchIn, searchTerm, filteredPartsOfSpeech} = this.state.searchConfig; // const {searchIn, searchTerm, filteredPartsOfSpeech} = this.state.searchConfig;
// TODO: Sort out searching to remove this temporary solution. // TODO: Sort out searching to remove this temporary solution.
dictionary.wordsPromise.then(words => { dictionary.wordsPromise.then((words) => {
this.setState({ this.setState({
displayedWords: words, displayedWords: words,
}) })
@ -68,7 +68,7 @@ class App extends Component {
<div> <div>
<Header <Header
partsOfSpeech={ this.state.partsOfSpeech } partsOfSpeech={ this.state.partsOfSpeech }
search={ searchConfig => this.search(searchConfig) } /> search={ (searchConfig) => this.search(searchConfig) } />
<MainDisplay <MainDisplay
dictionaryInfo={ this.dictionaryInfo } dictionaryInfo={ this.dictionaryInfo }

12
src/managers/DictionaryData.js
View File

@ -4,10 +4,10 @@ import wordDb from './WordDatabase';
import idManager from './IDManager'; import idManager from './IDManager';
const defaultDictionary = { const defaultDictionary = {
name: 'New' name: 'New',
, specification: 'Dictionary' specification: 'Dictionary',
, description: 'A new dictionary.' description: 'A new dictionary.',
, partsOfSpeech: ['Noun', 'Adjective', 'Verb'] partsOfSpeech: ['Noun', 'Adjective', 'Verb'],
} }
class DictionaryData { class DictionaryData {
@ -80,8 +80,8 @@ class DictionaryData {
if (Array.isArray(partOfSpeech)) { if (Array.isArray(partOfSpeech)) {
words = words.anyOf(partOfSpeech); words = words.anyOf(partOfSpeech);
} else { } else {
assert(typeof partOfSpeech === 'string' assert(typeof partOfSpeech === 'string',
, 'You must use either a string or an array when searching for words with a particular part of speech'); 'You must use either a string or an array when searching for words with a particular part of speech');
words = words.equals(partOfSpeech); words = words.equals(partOfSpeech);
} }

6
src/managers/Word.js
View File

@ -3,7 +3,7 @@ import store from 'store';
import wordDb from './WordDatabase'; import wordDb from './WordDatabase';
export class Word { export class Word {
constructor ({name = '', pronunciation = '', partOfSpeech = '', definition = '', details = ''}) { constructor ({ name = '', pronunciation = '', partOfSpeech = '', definition = '', details = '' }) {
this.name = name; this.name = name;
this.pronunciation = pronunciation; this.pronunciation = pronunciation;
this.partOfSpeech = partOfSpeech; this.partOfSpeech = partOfSpeech;
@ -17,7 +17,7 @@ export class Word {
this.modifiedTime = null; this.modifiedTime = null;
return wordDb.words.add(this) return wordDb.words.add(this)
.then(id => { .then((id) => {
this.id = id; this.id = id;
console.log('Word added successfully'); console.log('Word added successfully');
}) })
@ -31,7 +31,7 @@ export class Word {
this.modifiedTime = timestampInSeconds; this.modifiedTime = timestampInSeconds;
return wordDb.words.put(this, wordId) return wordDb.words.put(this, wordId)
.then(id => { .then((id) => {
console.log('Word modified successfully'); console.log('Word modified successfully');
}) })
.catch(error => { .catch(error => {

2
src/managers/WordDatabase.js
View File

@ -4,7 +4,7 @@ import {Word} from './Word';
const db = new Dexie('Lexiconga'); const db = new Dexie('Lexiconga');
db.version(1).stores({ db.version(1).stores({
words: '++id, name, partOfSpeech, createdTime, modifiedTime' words: '++id, name, partOfSpeech, createdTime, modifiedTime',
}); });
if (['emptydb', 'donotsave'].includes(process.env.NODE_ENV)) { if (['emptydb', 'donotsave'].includes(process.env.NODE_ENV)) {

140
webpack.config.js
View File

@ -13,97 +13,101 @@ const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'src'); const APP_DIR = path.resolve(__dirname, 'src');
const webpackConfig = { const webpackConfig = {
entry: APP_DIR + '/index.jsx' entry: APP_DIR + '/index.jsx',
, output: {
path: BUILD_DIR output: {
, filename: 'lexiconga.js' path: BUILD_DIR,
} filename: 'lexiconga.js',
, module: { },
module: {
rules: [ rules: [
{ {
test: (/\.scss$/) test: (/\.scss$/),
, exclude: (/node_modules/) exclude: (/node_modules/),
, use: [ use: [
'style-loader' 'style-loader',
, 'css-loader' 'css-loader',
, { {
loader: 'sass-loader' loader: 'sass-loader',
, options: { options: {
file: './src/sass/styles.scss', file: './src/sass/styles.scss',
outFile: './public/styles.css', outFile: './public/styles.css',
outputStyle: 'compressed' outputStyle: 'compressed',
} },
} },
] ],
} },
, { {
test: (/\.html$/) test: (/\.html$/),
, exclude: (/node_modules/) exclude: (/node_modules/),
, use: [ use: [
'html-loader' 'html-loader',
] ],
} },
, { {
test: (/\.txt$/) test: (/\.txt$/),
, exclude: (/node_modules/) exclude: (/node_modules/),
, use: [ use: [
'raw-loader' 'raw-loader'
] ],
} },
, { {
test: (/\.jsx?$/) test: (/\.jsx?$/),
, exclude: (/node_modules/) exclude: (/node_modules/),
, use: [ use: [
{ {
loader: 'babel-loader' loader: 'babel-loader',
, options: { options: {
presets: [ presets: [
'es2016' 'es2016',
] ],
, plugins: [ plugins: [
'inferno' 'inferno',
] ],
} },
} }
] ],
} },
, { {
test: (/\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/) test: (/\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/),
, use: [ use: [
{ {
loader: 'url-loader' loader: 'url-loader',
, options: { options: {
limit: 100000 limit: 100000,
, mimetype: 'application/font-woff' mimetype: 'application/font-woff',
, name: './assets/fonts/[name].[ext]' name: './assets/fonts/[name].[ext]',
} }
} }
] ]
} }
] ]
} },
, resolve: {
resolve: {
extensions: [ extensions: [
'.js' '.js',
, '.jsx' '.jsx',
] ]
} },
, plugins: [
plugins: [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
'NODE_ENV': JSON.stringify(BUILDMODE) 'NODE_ENV': JSON.stringify(BUILDMODE),
} },
}) }),
] ],
}; };
if (BUILDMODE === 'production') { if (BUILDMODE === 'production') {
webpackConfig.plugins.push( webpackConfig.plugins.push(
new webpack.optimize.UglifyJsPlugin({ new webpack.optimize.UglifyJsPlugin({
mangle: true mangle: true,
, compress: { compress: {
warnings: false warnings: false,
} },
}) })
); );