69 lines
2.0 KiB
JavaScript
69 lines
2.0 KiB
JavaScript
import React, {useState, useEffect} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {View, Icon, Button, Text} from 'native-base';
|
|
import {TextField} from 'react-native-material-textfield';
|
|
import FieldEditor from './field-editor';
|
|
import TextInput from './text-input';
|
|
import {ScrollView} from 'react-native';
|
|
import PickerList from './picker-list';
|
|
import {setFields} from '../../actions/anki-set-actions';
|
|
import {
|
|
DEF_LIST1,
|
|
DEF_LIST2,
|
|
EXAMPLES,
|
|
PRONUNCIATION,
|
|
SOUND,
|
|
} from '../../constants/anki-constants';
|
|
|
|
const FieldList = props => {
|
|
const [pronunciation, setPronunciation] = useState();
|
|
const [sound, setSound] = useState();
|
|
const [examples, setExamples] = useState(props.response.examples);
|
|
const [completedFields, setCompletedFields] = useState({
|
|
word: props.word,
|
|
compounded: [{pos: '', tr: '', definition: ''}, {}],
|
|
examples: '',
|
|
pronunciation: '',
|
|
sound: '',
|
|
});
|
|
useEffect(() => {
|
|
setSound(props.response.sound);
|
|
setPronunciation(props.response.pronunciation);
|
|
setExamples(props.response.examples);
|
|
}, [props]);
|
|
useEffect(() => {
|
|
console.group('STATE', examples, pronunciation, sound);
|
|
});
|
|
const submit = () => {
|
|
setFields(completedFields);
|
|
};
|
|
return (
|
|
<ScrollView style={{height: '100%'}}>
|
|
<PickerList labelNum={1} id={0} role={DEF_LIST1} />
|
|
<PickerList labelNum={2} id={1} role={DEF_LIST2} />
|
|
<FieldEditor
|
|
role={EXAMPLES}
|
|
data={{
|
|
label: 'Usage example',
|
|
values: examples || ['can not find the example'],
|
|
}}
|
|
/>
|
|
<TextInput value={sound} label={'Sound'} role={SOUND} />
|
|
<TextInput
|
|
value={pronunciation}
|
|
label={'Transcription'}
|
|
role={PRONUNCIATION}
|
|
/>
|
|
<Button style={{marginTop: 10}} onPress={submit}>
|
|
<Text>Submit</Text>
|
|
<Icon name={'send'} />
|
|
</Button>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
export default connect(state => ({
|
|
response: state.api.parsedDictionary,
|
|
word: state.api.word,
|
|
}))(FieldList);
|