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,19 +1,38 @@
-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:*****************
-* startId props.data[0] / [1] /[8] ...
-* labelNum // Translate 1 / Translate 2 ...
-* */
+ ****************** props:*****************
+ * startId props.data[0] / [1] /[8] ...
+ * labelNum // Translate 1 / Translate 2 ...
+ * */
 const PickerList = props => {
-    return(
-        <View>
-
-        </View>
-    )
-}
+  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

@@ -10,57 +10,57 @@ import FieldEditor from './Form/field-editor';
 import FieldList from './Form/field-list';
 
 const AnkiForm = props => {
-	const [target, setTarget] = useState('');
-	const [fields, setFields] = useState({});
-	const [submitted, setSubmitted] = useState(true);
-	useEffect(() => {
-		// props.wordInfo('Urge');
-		//   props.wordInfo('Maze');
-		//   props.wordInfo('Ramification');
-		//   props.wordInfo('Dare');
-		//   props.wordInfo('Entrepreneurship');
-		//   props.wordInfo('meagre');
-		//   props.wordInfo('meager');
-	}, []);
-	const getWord = word => {
-		setTarget(word);
-	};
-	const submit = () => {
-		props.wordInfo(target);
-		setSubmitted(true);
-	};
+  const [target, setTarget] = useState('');
+  const [fields, setFields] = useState({});
+  const [submitted, setSubmitted] = useState(false);
+  useEffect(() => {
+    // props.wordInfo('Urge');
+    //   props.wordInfo('Maze');
+    //   props.wordInfo('Ramification');
+    //   props.wordInfo('Dare');
+    //   props.wordInfo('Entrepreneurship');
+    //   props.wordInfo('meagre');
+    //   props.wordInfo('meager');
+  }, []);
+  const getWord = word => {
+    setTarget(word);
+  };
+  const submit = () => {
+    props.wordInfo(target);
+    setSubmitted(true);
+  };
 
-	return (
-		<Container style={{padding: 20}}>
-			<Form>
-				<DeckPicker />
-				<InputWord word={getWord} onSubmit={submit} />
-				{submitted ? (
-					// <FieldEditor
-					// 	data={{
-					// 		type: 'part of speech',
-					// 		values: ['1', '2', '3','5',],
-					// 	}}
-					// />
-                    <FieldList/>
-				) : (
-					<SubmitButton onSubmit={submit} />
-				)}
-			</Form>
-		</Container>
-	);
+  return (
+    <Container style={{padding: 20}}>
+      <Form>
+        <DeckPicker />
+        <InputWord word={getWord} onSubmit={submit} />
+        {submitted ? (
+          // <FieldEditor
+          // 	data={{
+          // 		type: 'part of speech',
+          // 		values: ['1', '2', '3','5',],
+          // 	}}
+          // />
+          <FieldList />
+        ) : (
+          <SubmitButton onSubmit={submit} />
+        )}
+      </Form>
+    </Container>
+  );
 };
 
 export default connect(
-	state => ({
-		ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists,
-		modelName: state.anki.ankiLanModelName,
-		modelList: state.anki.modelList,
-		creator: state.anki.noteCreator,
-		data: state
-	}),
-	{
-		checkAnkiLanModelForExisting,
-		wordInfo,
-	},
+  state => ({
+    ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists,
+    modelName: state.anki.ankiLanModelName,
+    modelList: state.anki.modelList,
+    creator: state.anki.noteCreator,
+    data: state,
+  }),
+  {
+    checkAnkiLanModelForExisting,
+    wordInfo,
+  },
 )(AnkiForm);

src/constants/component-types.js

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