Create response editor

src/components/Form/field-editor.jsx

@@ -5,9 +5,10 @@ import {StyleSheet, TextInput} from 'react-native';
 import {View, Text, Button, Picker} from 'native-base';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import IconedButton from '../view/iconed-button.jsx';
+import {POS_PICKER} from '../../constants/component-types';
 const FieldEditor = props => {
   const [data, setData] = useState({});
-  const [editing, setEditing] = useState(true);
+  const [editing, setEditing] = useState(false);
   const label = props.data.label;
   const [selectedValue, setSelectedValue] = useState(props.data.values[0]);
   const [userTyped, setUserTyped] = useState('');
@@ -17,8 +18,14 @@ const FieldEditor = props => {
     console.log(props.data)
   }, []);
 
-  const selectValue = value => {
-    setSelectedValue(value);
+  const selectValue = selected => {
+    setSelectedValue(selected);
+    if(props.type === POS_PICKER){
+      data.values.forEach((value, id) => {
+        if(value === selected)
+        props.onSelect(id)
+      })
+    }
   };
   const typing = text => {
     console.log(text);
@@ -74,7 +81,8 @@ const FieldEditor = props => {
             <TextField
               lineType={'none'}
               multiline={true}
-              label={data.type}
+              label={props.data.label}
+
               value={selectedValue}
               editable={true}
               ref={input}
@@ -82,7 +90,7 @@ const FieldEditor = props => {
             />
           ) : (
             <View>
-              <Text style={styles.pickerLabel}>{'label'}</Text>
+              <Text style={styles.pickerLabel}>{props.data.label}</Text>
               <Picker
                 selectedValue={selectedValue}
                 onValueChange={value => selectValue(value)}>

src/components/Form/field-list.jsx

@@ -17,18 +17,18 @@ const FieldList = props => {
     },[props.response])
     useEffect(() => {
             console.log(sound, pronunciation)
-        console.log("EXFSDFS", examples)
         }
     )
     return (
         <View>
-            <PickerList/>
-            <TextInput value={sound}  label={'Sound'}/>
-            <TextInput value={pronunciation}  label={'Transcription'}/>
+            <PickerList labelNum={1}/>
+            <PickerList labelNum={2}/>
             <FieldEditor data={{
                 label: 'Usage example',
                 values: examples || ['can not find the example']
             }}/>
+            <TextInput value={sound}  label={'Sound'}/>
+            <TextInput value={pronunciation}  label={'Transcription'}/>
         </View>
     )
 }

src/components/Form/picker-list.jsx

@@ -1,6 +1,8 @@
-import React,{useState, useEffect, useRef} from 'react'
+import React, {useState, useEffect, useRef} from 'react';
 import {View} from 'native-base';
-import {connect} from 'react-redux'
+import {connect} from 'react-redux';
+import PosPicker from './pos-picker';
+import FieldEditor from './field-editor';
 
 /*
  ****************** props:*****************
@@ -8,12 +10,29 @@ import {connect} from 'react-redux'
  * labelNum // Translate 1 / Translate 2 ...
  * */
 const PickerList = props => {
+  const [data, setData] = useState({translates: [], definitions: []});
+  useEffect(() => {
+    console.log('PROPPPPS', props);
+  });
+  const setId = id => {
+    console.log(id);
+  };
+  const selectDef = id => {
+    console.log(props.data[id])
+    setData(props.data[id])
+  }
   return (
     <View>
-
+      <PosPicker
+        labelNum={props.labelNum}
+        onSelect={id => selectDef(id)}
+        // getId={id => setId(id)}
+      />
+      <FieldEditor data={{label:`Translate ${props.labelNum}`, values: data.translates}}/>
+      <FieldEditor data={{label: `Definition ${props.labelNum}`, values: data.definitions}}/>
     </View>
-    )
-}
+  );
+};
 export default connect(state => ({
-    data: state.api.parsedDictionary.compounded
-}))(PickerList)
+  data: state.api.parsedDictionary.compounded,
+}))(PickerList);

src/components/Form/pos-picker.jsx

@@ -0,0 +1,38 @@
+import React, {useState, useEffect} from 'react';
+import {connect} from 'react-redux';
+import {View} from 'native-base';
+import FieldEditor from './field-editor';
+import {POS_PICKER} from '../../constants/component-types';
+
+const PosPicker = props => {
+  const [ready, setReady] = useState(false);
+  const [poses, setPoses] = useState([]);
+  useEffect(() => {
+    console.log('PRT', props.parts);
+    if (props.parts) {
+      let posArray = props.parts.map((part, id) => part.pos);
+      console.log('ARRRRAY', posArray);
+      setPoses(posArray);
+      setReady(true);
+    }
+  }, [props]);
+  return (
+    <View>
+      {ready ? (
+        <FieldEditor
+          data={{
+            label: `Part of speech ${props.labelNum} `,
+            values: poses,
+          }}
+          type={POS_PICKER}
+          onSelect={(value) => props.onSelect(value)}
+        />
+      ) : (
+        <View />
+      )}
+    </View>
+  );
+};
+export default connect(state => ({
+  parts: state.api.parsedDictionary.compounded,
+}))(PosPicker);

src/components/Form/text-input.jsx

@@ -6,8 +6,6 @@ const TextInput = props => {
   const input = useRef();
   const [text, setText] = useState(props.value);
   useEffect(() => {
-    console.log('changing');
-    console.log(props.value);
     setText(props.value);
     input.current.setValue(props.value);
   }, [props, props.value]);

src/components/anki-form.jsx

@@ -12,7 +12,7 @@ import FieldList from './Form/field-list';
 const AnkiForm = props => {
   const [target, setTarget] = useState('');
   const [fields, setFields] = useState({});
-	const [submitted, setSubmitted] = useState(true);
+  const [submitted, setSubmitted] = useState(false);
   useEffect(() => {
     // props.wordInfo('Urge');
     //   props.wordInfo('Maze');
@@ -57,7 +57,7 @@ export default connect(
     modelName: state.anki.ankiLanModelName,
     modelList: state.anki.modelList,
     creator: state.anki.noteCreator,
-		data: state
+    data: state,
   }),
   {
     checkAnkiLanModelForExisting,

src/constants/component-types.js

@@ -0,0 +1 @@
+export const POS_PICKER = 'POS_PICKER'