Got words displaying and sorting correctly! Editing words works, working on editing individual word fields.
This commit is contained in:
parent
9ecfa40ec7
commit
821330073a
|
|
@ -1,53 +1,56 @@
|
|||
import React from 'react';
|
||||
|
||||
import {Word} from './Word';
|
||||
import {Button} from './Button';
|
||||
|
||||
export class Dictionary extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
this.state = {
|
||||
// name: this.props.reference.name,
|
||||
// description: this.props.reference.description,
|
||||
// createdBy: this.props.reference.createdBy,
|
||||
// nextWordId: this.props.reference.nextWordId,
|
||||
// externalID: this.props.reference.externalID,
|
||||
// allowDuplicates: this.props.reference.settings.allowDuplicates,
|
||||
// caseSensitive: this.props.reference.settings.caseSensitive,
|
||||
// partsOfSpeech: this.props.reference.settings.partOfSpeech,
|
||||
// sortByEquivalent: this.props.reference.settings.sortByEquivalent,
|
||||
// isComplete: this.props.reference.settings.isComplete,
|
||||
// isPublic: this.props.reference.settings.isPublic
|
||||
dictionary: this.props.parent.state.details,
|
||||
settings: this.props.parent.state.settings
|
||||
showWords() {
|
||||
let words = this.props.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}
|
||||
passWordAndUpdate={(index, wordObject) => this.passWordAndUpdate(index, wordObject)} />;
|
||||
});
|
||||
|
||||
if (this.showConsoleMessages) {
|
||||
console.log('Showing these words:');
|
||||
console.log(words);
|
||||
}
|
||||
|
||||
return <div>{words}</div>;
|
||||
}
|
||||
|
||||
passWordAndUpdate(index, wordObject) {
|
||||
console.log('Passing edited up: ' + wordObject.name);
|
||||
this.props.updateWord(index, wordObject);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1 id="dictionaryName">
|
||||
{this.state.dictionary.name}
|
||||
{this.props.details.name}
|
||||
</h1>
|
||||
|
||||
<h4 id="dictionaryBy">
|
||||
{this.state.dictionary.createdBy}
|
||||
{this.props.details.createdBy}
|
||||
</h4>
|
||||
<div id="incompleteNotice">
|
||||
Dictionary is complete: {this.state.settings.isComplete.toString()}
|
||||
Dictionary is complete: {this.props.settings.isComplete.toString()}
|
||||
</div>
|
||||
|
||||
<div id="theDictionary">
|
||||
{this.props.children}
|
||||
{this.showWords()}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
action={() => {
|
||||
let tempSettings = this.state.settings;
|
||||
tempSettings.isComplete = !tempSettings.isComplete;
|
||||
this.setState({settings: tempSettings})
|
||||
}}
|
||||
label='Toggle State' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,6 @@ export class Input extends React.Component {
|
|||
}
|
||||
|
||||
Input.defaultProps = {
|
||||
name: 'Field',
|
||||
name: '',
|
||||
doValidate: true
|
||||
};
|
||||
|
|
@ -1,18 +1,24 @@
|
|||
import React from 'react';
|
||||
|
||||
import {Input} from './Input';
|
||||
import {TextArea} from './TextArea';
|
||||
import {Button} from './Button';
|
||||
|
||||
const saveIcon = <i>💾</i>;
|
||||
const editIcon = <i>🖉</i>;
|
||||
|
||||
export class Word extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: this.props.name,
|
||||
pronunciation: this.props.pronunciation,
|
||||
partOfSpeech: ((this.props.partOfSpeech.length > 0) ? this.props.partOfSpeech : " "),
|
||||
simpleDefinition: this.props.simpleDefinition,
|
||||
longDefinition: this.props.longDefinition
|
||||
}
|
||||
editWord: false,
|
||||
editName: false,
|
||||
editPronunciation: false,
|
||||
editPartOfSpeech: false,
|
||||
editSimpleDefinition: false,
|
||||
editLongDefinition: false
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -26,65 +32,210 @@ export class Word extends React.Component {
|
|||
}
|
||||
*/
|
||||
|
||||
showName() {
|
||||
let editButton;
|
||||
if (this.state.editName) {
|
||||
if (this.state.editWord) {
|
||||
editButton = (
|
||||
<Button
|
||||
action={() => {
|
||||
let value = this.nameField.state.value;
|
||||
this.setState({editName: false}, () => {
|
||||
this.updateWord({name: value});
|
||||
});
|
||||
}}
|
||||
label={saveIcon} />
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.name} ref={(inputComponent) => this.nameField = inputComponent} />
|
||||
{editButton}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.state.editWord) {
|
||||
<Button
|
||||
action={() => {
|
||||
this.setState({editName: true});
|
||||
}}
|
||||
label={editIcon} />
|
||||
}
|
||||
return (
|
||||
<div className='name'>
|
||||
{this.props.name}
|
||||
{editButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
showPronunciation() {
|
||||
if (this.state.pronunciation !== '') {
|
||||
return <div className='pronunciation'>{this.state.pronunciation}</div>;
|
||||
if (this.state.editPronunciation) {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.pronunciation} ref={(inputComponent) => this.pronunciationField = inputComponent} />
|
||||
<Button
|
||||
action={() => {
|
||||
let value = this.pronunciationField.state.value;
|
||||
this.setState({editPronunciation: false}, () => {
|
||||
this.updateWord({pronunciation: value});
|
||||
});
|
||||
}}
|
||||
label={saveIcon} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.props.pronunciation !== '') {
|
||||
return (
|
||||
<div className='pronunciation'>
|
||||
{this.props.pronunciation}
|
||||
<Button
|
||||
action={() => {
|
||||
this.setState({editPronunciation: true});
|
||||
}}
|
||||
label={editIcon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showPartOfSpeech() {
|
||||
if (this.state.partOfSpeech !== '') {
|
||||
return <div className='part-of-speech'>{this.state.partOfSpeech}</div>;
|
||||
if (this.state.editPartOfSpeech) {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.partOfSpeech} ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
|
||||
<Button
|
||||
action={() => {
|
||||
let value = this.partOfSpeechField.state.value;
|
||||
this.setState({editPartOfSpeech: false}, () => {
|
||||
this.updateWord({partOfSpeech: value});
|
||||
});
|
||||
}}
|
||||
label={saveIcon} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.props.partOfSpeech !== '') {
|
||||
return (
|
||||
<div className='part-of-speech'>
|
||||
{this.props.partOfSpeech}
|
||||
<Button
|
||||
action={() => {
|
||||
this.setState({editPartOfSpeech: true});
|
||||
}}
|
||||
label={editIcon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showSimpleDefinition() {
|
||||
if (this.state.simpleDefinition !== '') {
|
||||
return <div className='simple-definition'>{this.state.simpleDefinition}</div>;
|
||||
if (this.state.editSimpleDefinition) {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.simpleDefinition} ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
|
||||
<Button
|
||||
action={() => {
|
||||
let value = this.simpleDefinitionField.state.value;
|
||||
this.setState({editSimpleDefinition: false}, () => {
|
||||
this.updateWord({simpleDefinition: value});
|
||||
});
|
||||
}}
|
||||
label={saveIcon} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.props.simpleDefinition !== '') {
|
||||
return (
|
||||
<div className='simple-definition'>
|
||||
{this.props.simpleDefinition}
|
||||
<Button
|
||||
action={() => {
|
||||
this.setState({editSimpleDefinition: true});
|
||||
}}
|
||||
label={editIcon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showLongDefinition() {
|
||||
if (this.state.longDefinition !== '') {
|
||||
return <div className='long-definition'>{this.state.longDefinition}</div>;
|
||||
if (this.state.editLongDefinition) {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.longDefinition} ref={(inputComponent) => this.longDefinitionField = inputComponent} />
|
||||
<Button
|
||||
action={() => {
|
||||
let value = this.longDefinitionField.state.value;
|
||||
this.setState({editLongDefinition: false}, () => {
|
||||
this.updateWord({longDefinition: value});
|
||||
});
|
||||
}}
|
||||
label={saveIcon} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.props.longDefinition !== '') {
|
||||
return (
|
||||
<div className='long-definition'>
|
||||
{this.props.longDefinition}
|
||||
<Button
|
||||
action={() => {
|
||||
this.setState({editLongDefinition: true});
|
||||
}}
|
||||
label={editIcon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showManagementArea() {
|
||||
if (this.props.isEditing) {
|
||||
return (
|
||||
<Button
|
||||
action={() => this.updateWord()}
|
||||
label='Save Edits' />
|
||||
);
|
||||
if (this.state.editWord) {
|
||||
return (
|
||||
<Button
|
||||
action={() => {
|
||||
this.setState({editWord: false});
|
||||
}}
|
||||
label='Stop Editing' />
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button
|
||||
action={() => this.setState({editWord: true})}
|
||||
label='Edit Word' />
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateWord() {
|
||||
this.setState({
|
||||
name: 'this.state.name',
|
||||
pronunciation: 'this.state.pronunciation',
|
||||
partOfSpeech: 'this.state.partOfSpeech',
|
||||
simpleDefinition: 'this.state.simpleDefinition',
|
||||
longDefinition: 'this.state.longDefinition'
|
||||
}, () => {
|
||||
this.props.updateWord(this.props.index, {
|
||||
name: this.state.name,
|
||||
pronunciation: this.state.pronunciation,
|
||||
partOfSpeech: this.state.partOfSpeech,
|
||||
simpleDefinition: this.state.simpleDefinition,
|
||||
longDefinition: this.state.longDefinition
|
||||
});
|
||||
updateWord(wordObject) {
|
||||
this.props.passWordAndUpdate(this.props.index, {
|
||||
name: wordObject.name || this.props.name,
|
||||
pronunciation: wordObject.pronunciation || this.props.pronunciation,
|
||||
partOfSpeech: wordObject.partOfSpeech || this.props.partOfSpeech,
|
||||
simpleDefinition: wordObject.simpleDefinition || this.props.simpleDefinition,
|
||||
longDefinition: wordObject.longDefinition || this.props.longDefinition
|
||||
});
|
||||
}
|
||||
|
||||
editProperty(property) {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id={'entry' + this.props.index} className='word'>
|
||||
|
||||
<a name={'entry' + this.props.wordId}></a>
|
||||
<div className='name'>
|
||||
{this.state.name}
|
||||
</div>
|
||||
|
||||
{this.showName()}
|
||||
|
||||
{this.showPronunciation()}
|
||||
|
||||
{this.showPartOfSpeech()}
|
||||
|
|
@ -92,9 +243,11 @@ export class Word extends React.Component {
|
|||
<br />
|
||||
|
||||
{this.showSimpleDefinition()}
|
||||
|
||||
{this.showLongDefinition()}
|
||||
|
||||
{this.showManagementArea()}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {Header} from './components/Header';
|
|||
import {NewWordForm} from './components/NewWordForm';
|
||||
import {Button} from './components/Button';
|
||||
import {Dictionary} from './components/Dictionary';
|
||||
import {Word} from './components/Word';
|
||||
|
||||
import {dynamicSort} from './js/helpers';
|
||||
|
||||
|
|
@ -39,7 +38,7 @@ class Lexiconga extends React.Component {
|
|||
sortByEquivalent: false,
|
||||
isComplete: false,
|
||||
isPublic: false
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.defaultDictionaryJSON = JSON.stringify(this.state.dictionaryDetails); //Saves a stringifyed default dictionary.
|
||||
|
|
@ -57,6 +56,17 @@ class Lexiconga extends React.Component {
|
|||
})
|
||||
}
|
||||
|
||||
sortWords(array) {
|
||||
let sortMethod;
|
||||
if (this.state.settings.sortByEquivalent) {
|
||||
sortMethod = ['simpleDefinition', 'partOfSpeech'];
|
||||
} else {
|
||||
sortMethod = ['name', 'partOfSpeech'];
|
||||
}
|
||||
|
||||
return array.sort(dynamicSort(sortMethod));
|
||||
}
|
||||
|
||||
addWord(wordObject) {
|
||||
let newWord = {
|
||||
name: wordObject.name || 'errorWord',
|
||||
|
|
@ -67,15 +77,8 @@ class Lexiconga extends React.Component {
|
|||
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));
|
||||
updatedWords = this.sortWords(updatedWords);
|
||||
|
||||
let updatedDetails = this.state.details;
|
||||
updatedDetails.nextwordid += 1;
|
||||
|
|
@ -91,13 +94,22 @@ class Lexiconga extends React.Component {
|
|||
}
|
||||
|
||||
updateWord(index, wordObject) {
|
||||
if (this.showConsoleMessages) console.log('Updating ' + this.state.words[index].name + ' to ' + wordObject.name);
|
||||
|
||||
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});
|
||||
|
||||
updatedWords = this.sortWords(updatedWords);
|
||||
|
||||
this.setState({words: updatedWords}, () => {
|
||||
if (this.showConsoleMessages) {
|
||||
console.log('Updated successfully');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showWords() {
|
||||
|
|
@ -113,6 +125,11 @@ class Lexiconga extends React.Component {
|
|||
updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />;
|
||||
});
|
||||
|
||||
if (this.showConsoleMessages) {
|
||||
console.log('Showing these words:');
|
||||
console.log(words);
|
||||
}
|
||||
|
||||
return <div>{words}</div>;
|
||||
}
|
||||
|
||||
|
|
@ -128,9 +145,11 @@ class Lexiconga extends React.Component {
|
|||
<div id="incompleteNotice">
|
||||
Dictionary is complete: {this.state.settings.isComplete.toString()}
|
||||
</div>
|
||||
<Dictionary parent={this}>
|
||||
{this.showWords()}
|
||||
</Dictionary>
|
||||
<Dictionary
|
||||
details={this.state.details}
|
||||
words={this.state.words}
|
||||
settings={this.state.settings}
|
||||
updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue