Add stable fields view

some issues:
		if add new part of speech error will be.
		Reason? Fields under Part Of speech field depends by
		this

android/app/build.gradle

@@ -143,12 +143,6 @@ android {
         }
     }
     signingConfigs {
-        debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
-            keyAlias 'androiddebugkey'
-            keyPassword 'android'
-        }
 				 release {
             if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                 storeFile file(MYAPP_RELEASE_STORE_FILE)
@@ -156,6 +150,13 @@ android {
                 keyAlias MYAPP_RELEASE_KEY_ALIAS
                 keyPassword MYAPP_RELEASE_KEY_PASSWORD
             }
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+				
         }
     }
     buildTypes {
@@ -166,9 +167,9 @@ android {
             // Caution! In production, you need to generate your own keystore file.
             // see https://facebook.github.io/react-native/docs/signed-apk-android.
             // signingConfig signingConfigs.debug
-            signingConfig signingConfigs.release
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            signingConfig signingConfigs.release
         }
     }
     // applicationVariants are e.g. debug, release

src/actions/anki-set-actions.js

@@ -47,7 +47,8 @@ const modelFields = [
     tr2.pos || '',
     tr2.tr || '',
     tr2.definition || '',
-    `${tr1.example || ''} \n ${tr2.example || ''}`,
+    // `${tr1.example || ''} \n ${tr2.example || ''}`,
+    dict.example,
     dict.pronunciation,
     `[sound:${dict.sound}]`,
   ];

src/actions/dictionary/get-translate.js

@@ -20,8 +20,8 @@ export const compoundWithYDictionary = async (definitionList, word) => {
     const words = definitionList.words;
     let compounded = [];
 
-    console.log('YANDEX ', translations);
+    // console.log('YANDEX ', translations);
-    console.log('WORDS', definitionList);
+    // console.log('WORDS', definitionList);
     let PoSes = new Set();
     translations.forEach(tr => PoSes.add(tr.pos));
     words.forEach(df => PoSes.add(df.pos));

src/actions/form-actions.js

@@ -1,7 +1,16 @@
 import {getCreator, getTemplate} from './filesystem';
 import {addNote} from './createAnkiLanModel';
+import {SEND_FIELD} from '../constants/anki-constants';
 
 export const submit = () => ({});
 export const sendWord = async fields => {
   addNote(fields.payload);
 };
+
+export const sendField = field => ({
+  type: SEND_FIELD,
+  payload: field.text,
+  role: field.role,
+});
+
+

src/components/Form/field-editor.jsx

@@ -7,35 +7,50 @@ 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 [data, setData] = useState(props.data);
+  const [values, setValues] = useState(props.data.values);
   const [editing, setEditing] = useState(false);
-  const label = props.data.label;
   const [selectedValue, setSelectedValue] = useState(props.data.values[0]);
-  const [userTyped, setUserTyped] = useState('');
+  const [userText, setUserText] = useState('');
   const input = useRef();
+  const [finalText, setFinalText] = useState(props.data.values[0]);
   useEffect(() => {
     setData(props.data);
-    console.log(props.data)
+    setValues(props.data.values)
-  }, []);
+  }, [props]);
 
   const selectValue = selected => {
     setSelectedValue(selected);
-    if(props.type === POS_PICKER){
+    if (props.type === POS_PICKER) {
-      data.values.forEach((value, id) => {
+      values.forEach((value, id) => {
-        if(value === selected)
+        if (value === selected) props.onSelect(id);
-        props.onSelect(id)
+      });
-      })
     }
   };
   const typing = text => {
-    console.log(text);
+    setUserText(text);
-    setUserTyped(text);
+  };
+  const select = value => {
+    setFinalText(value);
+    setUserText(value);
+    selectValue(value);
   };
   const confirmTyped = () => {
-    const values = data.values;
+    let newValues = new Set(values);
-    setData({...data, values: [...values, userTyped]});
+    newValues.add(userText);
+    setValues(Array.from(newValues));
+    setData({...data, values: [...values, userText]});
+    console.log(values);
   };
 
+  useEffect(() => {
+    if (props.data.values !== values) {
+      setSelectedValue(values[values.length - 1]);
+    }
+  }, [values]);
+
+  useEffect(() => {
+  });
   const styles = StyleSheet.create({
     wrapper: {},
     inner: {
@@ -82,8 +97,7 @@ const FieldEditor = props => {
               lineType={'none'}
               multiline={true}
               label={props.data.label}
-
+              value={userText}
-              value={selectedValue}
               editable={true}
               ref={input}
               onChangeText={text => typing(text)}
@@ -93,8 +107,8 @@ const FieldEditor = props => {
               <Text style={styles.pickerLabel}>{props.data.label}</Text>
               <Picker
                 selectedValue={selectedValue}
-                onValueChange={value => selectValue(value)}>
+                onValueChange={value => select(value)}>
-                {props.data.values.map((value, id) => {
+                {values.map((value, id) => {
                   return <Picker.Item value={value} label={value} key={id} />;
                 })}
               </Picker>

src/components/Form/field-list.jsx

@@ -1,38 +1,68 @@
-import React, {useState, useEffect} from 'react'
+import React, {useState, useEffect} from 'react';
 import {connect} from 'react-redux';
-import {View, Input} from 'native-base'
+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 [pronunciation, setPronunciation] = useState();
-    const [sound, setSound] = useState()
+  const [sound, setSound] = useState();
-    const [examples, setExamples] = useState([])
+  const [examples, setExamples] = useState(props.response.examples);
-    useEffect(() => {
+  const [completedFields, setCompletedFields] = useState({
-        setSound(props.response.sound)
+    word: props.word,
-        setPronunciation(props.response.pronunciation)
+    compounded: [{pos: '', tr: '', definition: ''}, {}],
-        setExamples(props.response.examples)
+    examples: '',
-    },[props.response])
+    pronunciation: '',
-    useEffect(() => {
+    sound: '',
-            console.log(sound, pronunciation)
+  });
-        }
+  useEffect(() => {
-    )
+    setSound(props.response.sound);
-    return (
+    setPronunciation(props.response.pronunciation);
-        <View>
+    setExamples(props.response.examples);
-            <PickerList labelNum={1}/>
+  }, [props]);
-            <PickerList labelNum={2}/>
+  useEffect(() => {
-            <FieldEditor data={{
+    console.group('STATE', examples, pronunciation, sound);
-                label: 'Usage example',
+  });
-                values: examples || ['can not find the example']
+  const submit = () => {
-            }}/>
+    setFields(completedFields);
-            <TextInput value={sound}  label={'Sound'}/>
+  };
-            <TextInput value={pronunciation}  label={'Transcription'}/>
+  return (
-        </View>
+    <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
+  response: state.api.parsedDictionary,
-}))(FieldList)
+  word: state.api.word,
+}))(FieldList);

src/components/Form/picker-list.jsx

@@ -10,17 +10,32 @@ import FieldEditor from './field-editor';
  * labelNum // Translate 1 / Translate 2 ...
  * */
 const PickerList = props => {
-  const [data, setData] = useState({translates: [], definitions: []});
+  const [data, setData] = useState(props.data[props.id]);
   useEffect(() => {
-    console.log('PROPPPPS', props);
+    setData(props.data[props.id]);
+      console.log(`
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      `,props.data[props.id]);
+  }, [props]);
+  useEffect(() => {
+      console.log('data', props.data[props.id]);
   });
-  const setId = id => {
-    console.log(id);
-  };
   const selectDef = id => {
-    console.log(props.data[id])
+    setData(props.data[id]);
-    setData(props.data[id])
+  };
-  }
   return (
     <View>
       <PosPicker
@@ -28,8 +43,12 @@ const PickerList = props => {
         onSelect={id => selectDef(id)}
         // getId={id => setId(id)}
       />
-      <FieldEditor data={{label:`Translate ${props.labelNum}`, values: data.translates}}/>
+      <FieldEditor
-      <FieldEditor data={{label: `Definition ${props.labelNum}`, values: data.definitions}}/>
+        data={{label: `Translate ${props.labelNum}`, values: data.translates}}
+      />
+      <FieldEditor
+        data={{label: `Definition ${props.labelNum}`, values: data.definitions}}
+      />
     </View>
   );
 };

src/components/Form/pos-picker.jsx

@@ -8,10 +8,8 @@ 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);
     }

src/components/Form/text-input.jsx

@@ -2,6 +2,8 @@ import React, {useState, useEffect, useRef} from 'react';
 import {connect} from 'react-redux';
 import {TextField} from 'react-native-material-textfield';
 import {View} from 'native-base';
+import {sendField} from '../../actions/form-actions';
+
 const TextInput = props => {
   const input = useRef();
   const [text, setText] = useState(props.value);
@@ -9,13 +11,17 @@ const TextInput = props => {
     setText(props.value);
     input.current.setValue(props.value);
   }, [props, props.value]);
+  const typing = text => {
+      setText(text)
+      props.sendField({text, role: props.role})
+  }
   return (
-    <View>
+    <View >
       <TextField
         value={props.value}
         label={props.label}
         editable={true}
-        onChangeText={text => setText(text)}
+        onChangeText={text => typing(text) }
         ref={input}
         lineType={'none'}
       />
@@ -29,4 +35,6 @@ const TextInput = props => {
     </View>
   );
 };
-export default connect()(TextInput);
+export default connect(null, {
+    sendField
+})(TextInput);

src/components/anki-form.jsx

@@ -5,6 +5,7 @@ import {Form, Container, Item} from 'native-base';
 import {checkAnkiLanModelForExisting} from '../actions/anki-get-actions';
 import InputWord from './view/translatable-word';
 import SubmitButton from './Form/submit-button';
+import {ScrollView} from 'react-native'
 import {wordInfo} from '../actions/api/dictionary';
 import FieldEditor from './Form/field-editor';
 import FieldList from './Form/field-list';
@@ -31,23 +32,17 @@ const AnkiForm = props => {
   };
 
   return (
-    <Container style={{padding: 20}}>
+    <ScrollView style={{padding: 20}}>
       <Form>
         <DeckPicker />
         <InputWord word={getWord} onSubmit={submit} />
-        {submitted ? (
+        {(submitted && props.available) ? (
-          // <FieldEditor
-          // 	data={{
-          // 		type: 'part of speech',
-          // 		values: ['1', '2', '3','5',],
-          // 	}}
-          // />
           <FieldList />
         ) : (
           <SubmitButton onSubmit={submit} />
         )}
       </Form>
-    </Container>
+    </ScrollView>
   );
 };
 
@@ -58,6 +53,7 @@ export default connect(
     modelList: state.anki.modelList,
     creator: state.anki.noteCreator,
     data: state,
+      available: state.api.apiIsLoaded,
   }),
   {
     checkAnkiLanModelForExisting,

src/constants/anki-constants.js

@@ -28,3 +28,14 @@ export const SET_EXISTING_OF_ANKI_LAN_MODEL = 'SET_EXISTING_OF_ANKI_LAN_MODEL';
 export const ANKILAN_NOTE_CREATOR = '@ANKILAN_NOTE_CREATOR';
 export const ANKILAN_NOTE_TEMPLATE = '@ANKILAN_NOTE_TEMPLATE';
 export const ANKILAN_DATA = 'ANKILAN_DATA';
+
+//form actions
+export const SEND_FIELD = 'SEND_FIELD';
+//field names
+
+export const SOUND = 'SOUND';
+export const EXAMPLES = 'EXAMPLES';
+export const PRONUNCIATION = 'PRONUNCIATION';
+export const DEF_LIST1 = 'DEF_LIST1';
+export const DEF_LIST2 = 'DEF_LIST2';
+export const WORD = 'WORD'

src/reducers/anki-reducer.js

@@ -1,12 +1,19 @@
 import {
+  DEF_LIST1,
+  DEF_LIST2,
+  EXAMPLES,
   GET_DECK_LIST,
   GET_MODEL_LIST,
+  PRONUNCIATION,
   REQUEST_PERMISSIONS,
+  SEND_FIELD,
   SET_ANKI_DATA,
   SET_ANKI_NOTE_CREATOR,
   SET_CREATOR_TEMPLATE,
   SET_DECK,
   SET_EXISTING_OF_ANKI_LAN_MODEL,
+  SOUND,
+  WORD,
 } from '../constants/anki-constants';
 
 const initialState = {
@@ -24,6 +31,16 @@ const initialState = {
   ankiLanModelName: 'develop_final',
   noteCreator: {},
   noteTemplate: [],
+  currentFields: {
+    word: '',
+    compounded: [
+      {pos: '', tr: '', definition: ''},
+      {pos: '', tr: '', definition: ''},
+    ],
+    example: '',
+    pronunciation: '',
+    sound: '',
+  },
   savedData: {},
 };
 
@@ -51,6 +68,56 @@ const ankiReducer = (state = initialState, action) => {
         ...state,
         savedData: action.payload,
       };
+    case SEND_FIELD: {
+      const fields = state.currentFields;
+      switch (action.role) {
+        case EXAMPLES: {
+          return {
+            ...state,
+            currentFields: {...state.currentFields, example: action.payload},
+          };
+        }
+        case SOUND: {
+          return {
+            ...state,
+            currentFields: {...state.currentFields, sound: action.payload},
+          };
+        }
+        case PRONUNCIATION: {
+          return {
+            ...state,
+            currentFields: {
+              ...state.currentFields,
+              pronunciation: action.payload,
+            },
+          };
+        }
+        case DEF_LIST1: {
+          return {
+            ...state,
+            currentFields: {
+              ...state.currentFields,
+              compounded: [action.payload, state.compounded[1]],
+            },
+          };
+        }
+        case DEF_LIST2: {
+          return {
+            ...state,
+            currentFields: {
+              ...state.currentFields,
+              compounded: [, state.compounded[0], action.payload],
+            },
+          };
+        }
+        case WORD: {
+          return {
+            ...state,
+            currentFields: {...state.currentFields, word: action.payload},
+          };
+        }
+      }
+    }
     default:
       return state;
   }

src/reducers/api-reducer.js

@@ -16,6 +16,7 @@ const initialState = {
   parsedDictionary: {},
   availableFields: [],
   allFields: [],
+  apiIsLoaded: false,
 };
 
 const apiReducer = (state = initialState, action) => {
@@ -35,6 +36,7 @@ const apiReducer = (state = initialState, action) => {
       return {
         ...state,
         parsedDictionary: action.payload,
+          apiIsLoaded: true,
       };
     case SET_FIELDS:
       return {