2016-09-21 22:40:25 +02:00
|
|
|
import './index.html';
|
2016-09-22 02:18:54 +02:00
|
|
|
import './sass/main.scss';
|
2016-09-21 22:40:25 +02:00
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import ReactDOM from 'react-dom';
|
|
|
|
|
2016-09-22 02:18:54 +02:00
|
|
|
import {Header} from './components/Header';
|
2016-09-21 22:40:25 +02:00
|
|
|
import {NewWordForm} from './components/NewWordForm';
|
2016-09-22 16:25:49 +02:00
|
|
|
import {Button} from './components/Button';
|
2016-09-22 02:18:54 +02:00
|
|
|
import {Dictionary} from './components/Dictionary';
|
2016-09-22 22:05:49 +02:00
|
|
|
import {Word} from './components/Word';
|
|
|
|
|
|
|
|
import {dynamicSort} from './js/helpers';
|
2016-09-21 22:40:25 +02:00
|
|
|
|
|
|
|
class Lexiconga extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2016-09-22 02:18:54 +02:00
|
|
|
|
2016-09-22 22:05:49 +02:00
|
|
|
this.showConsoleMessages = this.props.showConsoleMessages || false;
|
|
|
|
|
2016-09-22 02:18:54 +02:00
|
|
|
this.state = {
|
|
|
|
scroll: {
|
|
|
|
x: 0,
|
|
|
|
y: 0
|
2016-09-22 15:42:07 +02:00
|
|
|
},
|
|
|
|
|
2016-09-22 22:05:49 +02:00
|
|
|
details: {
|
2016-09-22 15:42:07 +02:00
|
|
|
name: "New",
|
|
|
|
description: "A new dictionary.",
|
|
|
|
createdBy: 'Someone',
|
|
|
|
nextWordId: 1,
|
|
|
|
externalID: 0
|
2016-09-22 22:05:49 +02:00
|
|
|
},
|
|
|
|
words: [],
|
|
|
|
settings: {
|
|
|
|
allowDuplicates: false,
|
|
|
|
caseSensitive: false,
|
|
|
|
partsOfSpeech: "Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction",
|
|
|
|
sortByEquivalent: false,
|
|
|
|
isComplete: false,
|
|
|
|
isPublic: false
|
|
|
|
},
|
2016-09-22 15:42:07 +02:00
|
|
|
};
|
2016-09-22 02:18:54 +02:00
|
|
|
|
2016-09-22 15:42:07 +02:00
|
|
|
this.defaultDictionaryJSON = JSON.stringify(this.state.dictionaryDetails); //Saves a stringifyed default dictionary.
|
2016-09-22 02:18:54 +02:00
|
|
|
this.previousDictionary = {};
|
2016-09-21 22:40:25 +02:00
|
|
|
}
|
|
|
|
|
2016-09-22 16:25:49 +02:00
|
|
|
changeDictionaryName() {
|
|
|
|
// To change elements within the dictionary object, you can set it to
|
|
|
|
// a variable, manipulate the variable, then use setState() to set
|
|
|
|
// the object equal to the changed variable.
|
|
|
|
let updateDictionary = this.state.currentDictionary;
|
|
|
|
updateDictionary.name = 'something else'
|
|
|
|
this.setState({
|
|
|
|
currentDictionary: updateDictionary
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2016-09-22 22:05:49 +02:00
|
|
|
addWord(wordObject) {
|
|
|
|
let newWord = {
|
|
|
|
name: wordObject.name || 'errorWord',
|
|
|
|
pronunciation: wordObject.pronunciation || '',
|
|
|
|
partOfSpeech: wordObject.partOfSpeech || '',
|
|
|
|
simpleDefinition: wordObject.simpleDefinition || '',
|
|
|
|
longDefinition: wordObject.longDefinition || '',
|
|
|
|
wordId: this.state.details.nextWordId
|
|
|
|
}
|
|
|
|
|
|
|
|
let sortMethod;
|
|
|
|
if (this.state.settings.sortByEquivalent) {
|
|
|
|
sortMethod = ['simpleDefinition', 'partOfSpeech'];
|
|
|
|
} else {
|
|
|
|
sortMethod = ['name', 'partOfSpeech'];
|
|
|
|
}
|
|
|
|
|
|
|
|
let updatedWords = this.state.words.concat([newWord]);
|
|
|
|
updatedWords.sort(dynamicSort(sortMethod));
|
|
|
|
|
|
|
|
let updatedDetails = this.state.details;
|
|
|
|
updatedDetails.nextwordid += 1;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
words: updatedWords,
|
|
|
|
details: updatedDetails
|
|
|
|
}, () => {
|
|
|
|
if (this.showConsoleMessages) {
|
|
|
|
console.log('New word ' + newWord.name + ' added successfully');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
updateWord(index, wordObject) {
|
|
|
|
let updatedWords = this.state.words;
|
|
|
|
updatedWords[index].name = wordObject.name;
|
|
|
|
updatedWords[index].pronunciation = wordObject.pronunciation;
|
|
|
|
updatedWords[index].partOfSpeech = wordObject.partOfSpeech;
|
|
|
|
updatedWords[index].simpledefinition = wordObject.simpledefinition;
|
|
|
|
updatedWords[index].longDefinition = wordObject.longDefinition;
|
|
|
|
this.setState({words: updatedWords});
|
|
|
|
}
|
|
|
|
|
|
|
|
showWords() {
|
|
|
|
let words = this.state.words.map((word, index) => {
|
|
|
|
return <Word key={'dictionaryEntry' + index.toString()} isEditing={true}
|
|
|
|
name={word.name}
|
|
|
|
pronunciation={word.pronunciation}
|
|
|
|
partOfSpeech={word.partOfSpeech}
|
|
|
|
simpleDefinition={word.simpleDefinition}
|
|
|
|
longDefinition={word.longDefinition}
|
|
|
|
wordId={word.wordId}
|
|
|
|
index={index}
|
|
|
|
updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />;
|
|
|
|
});
|
|
|
|
|
|
|
|
return <div>{words}</div>;
|
|
|
|
}
|
|
|
|
|
2016-09-21 22:40:25 +02:00
|
|
|
render() {
|
|
|
|
return (
|
2016-09-22 02:18:54 +02:00
|
|
|
<div>
|
|
|
|
<Header />
|
2016-09-22 22:05:49 +02:00
|
|
|
<NewWordForm addWord={(wordObject) => this.addWord(wordObject)} parent={this} />
|
2016-09-22 16:25:49 +02:00
|
|
|
<Button
|
|
|
|
action={() => this.changeDictionaryName()}
|
|
|
|
label='change name' />
|
2016-09-22 22:05:49 +02:00
|
|
|
|
|
|
|
<div id="incompleteNotice">
|
|
|
|
Dictionary is complete: {this.state.settings.isComplete.toString()}
|
|
|
|
</div>
|
|
|
|
<Dictionary parent={this}>
|
|
|
|
{this.showWords()}
|
|
|
|
</Dictionary>
|
2016-09-22 02:18:54 +02:00
|
|
|
</div>
|
2016-09-21 22:40:25 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-22 22:05:49 +02:00
|
|
|
ReactDOM.render(<Lexiconga showConsoleMessages={true} />, document.getElementById('site'));
|