Merge pull request #9 from Horhik/dev

Dev

readme.md

@@ -1,5 +1,7 @@
 # AnkiLan
-App which provide translating and adding words to anki
+App provide creating automatically fill fields with English words and their definitions, examples, translates and add it to Anki.
+
+App required already installed [Anki](https://apps.ankiweb.net/) on your phone.  
 
 - - -
  ![screenshot](./readme-files/screenshot1.png)

src/actions/anki-get-actions.js

@@ -68,12 +68,10 @@ const setModelList = res => {
 export const getModelList = () => async dispatch => {
   try {
     const [err, res] = await AnkiDroid.getModelList();
-    console.log('RESRES', res);
     if (err) {
       throw err;
     }
     await dispatch(setModelList(res));
-
   } catch (err) {
     console.log(err);
   }
@@ -105,23 +103,22 @@ const setExistingOfAnkiLanModel = existing => {
   };
 };
 export const checkAnkiLanModelForExisting = name => async dispatch => {
-  setTimeout( async () => {
+  setTimeout(async () => {
-  try {
+    try {
-    const [error, modelList] = await AnkiDroid.getModelList()
+      const [error, modelList] = await AnkiDroid.getModelList();
-    console.log('CECKCKC', name, modelList);
+      for (let model of modelList) {
-    for (let model of modelList) {
+        if (model.name === name) {
-      if (model.name === name) {
+          await dispatch(setExistingOfAnkiLanModel(true));
-        await dispatch(setExistingOfAnkiLanModel(true));
+          return true;
-        return true;
+        }
       }
+      const err = 'Model not found. Displaying message...';
+      throw err;
+    } catch (err) {
+      console.log(err);
+      await dispatch(setExistingOfAnkiLanModel(false));
     }
-    const err = 'Model not found. Displaying message...';
+  }, 2000);
-    throw err;
-  } catch (err) {
-    console.log(err);
-    await dispatch(setExistingOfAnkiLanModel(false));
-  }
-  }, 2000)
 };
 
 export const getModelId = (models, name) => {

src/actions/anki-ui-actions.js

@@ -0,0 +1,12 @@
+import {SELECT_POS_ID} from '../constants/anki-constants';
+
+export const setPosId = (id, value) => {
+  console.log('setPosId');
+  console.log(id);
+  console.log(value);
+  return {
+    type: SELECT_POS_ID,
+    payload: value,
+    id,
+  };
+};

src/actions/createAnkiLanModel.js

@@ -58,7 +58,7 @@ export const addNote = async words => {
   const ankiData = await getAnkiData();
   await console.log(ankiData);
   const template = await ankiData.fieldList;
-  const deckId = store.getState().anki.selectedDeck.id;
+  const deckId = store.getState().anki.selectedDeck.deck.id;
   const modelId = await ankiData.modelId;
   console.log(template, deckId, modelId);
   const settings = {

src/actions/form-actions.js

@@ -12,3 +12,8 @@ export const sendField = field => ({
   payload: field.text,
   role: field.role,
 });
+
+export const selectCertainFormValue = (
+  unicName = String,
+  value = String,
+) => ({});

src/components/Form/field-deditor.jsx

@@ -1,163 +0,0 @@
-import React, {useEffect, useRef, useState} from 'react';
-import TextField from 'react-native-material-textfield/src/components/field';
-import {StyleSheet} from 'react-native';
-import {Picker, Text, View} from 'native-base';
-import IconedButton from '../view/iconed-button.jsx';
-import {POS_PICKER} from '../../constants/component-types';
-
-const FieldEditor = props => {
-  const [data, setData] = useState(props.data);
-  const [values, setValues] = useState(props.data.values);
-  const [editing, setEditing] = useState(false);
-  const [selectedValue, setSelectedValue] = useState(
-    props.data.values[props.id] || props.data.values[0],
-  );
-  const [userText, setUserText] = useState(
-    props.data.values[props.id] || props.data.values[0],
-  );
-  const [valuesUpdated, setValuesUpdated] = useState(false);
-  const input = useRef();
-  useEffect(() => {
-    // console.log(userText)
-    //   console.log("SELECTED", selectedValue)
-    if (props.hasChanged) {
-      // console.log("HAS CHANGED")
-      props.hasChanged(selectedValue);
-    }
-    if (props.type === POS_PICKER) {
-      console.log(userText);
-    }
-  });
-  useEffect(() => {
-    if (props.data.values.length === values.length) {
-      setData(props.data);
-      setValues(props.data.values);
-    }
-  }, [props.data.values]);
-
-  const selectValue = selected => {
-    setSelectedValue(selected);
-    if (props.type === POS_PICKER) {
-      values.forEach((value, id) => {
-        if (value === selected) {
-          console.warn(id);
-          props.onSelect(id);
-        }
-      });
-    }
-  };
-  const typing = text => {
-    setUserText(text);
-  };
-  const select = value => {
-    setUserText(value);
-    selectValue(value);
-  };
-  const confirmTyped = () => {
-    let newValues = new Set(values);
-    const valuesArray = Array.from(newValues.add(userText));
-    setValues(valuesArray);
-    setData({...data, values: valuesArray});
-    setEditing(!editing);
-    if (valuesArray.length !== values.length) {
-      setValuesUpdated(true);
-    }
-  };
-
-  useEffect(() => {
-    if (valuesUpdated) {
-      setSelectedValue(values[values.length - 1]);
-      setUserText(values[values.length - 1]);
-      setValuesUpdated(false);
-    }
-    setValuesUpdated(false);
-  }, [valuesUpdated]);
-  const styles = StyleSheet.create({
-    wrapper: {},
-    inner: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      flexDirection: 'row',
-      alignItems: 'center',
-      alignContent: 'center',
-    },
-    row: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      width: 90,
-    },
-    button: {
-      width: 40,
-      height: 40,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    tfWrapper: {
-      width: editing ? '75%' : '84%',
-    },
-    pickerLabel: {
-      color: '#00000050',
-      fontSize: 12,
-      marginLeft: 2,
-    },
-    hr: {
-      height: 1,
-      width: '100%',
-      backgroundColor: '#00000070',
-    },
-  });
-
-  return (
-    <View style={styles.wrapper}>
-      <View style={styles.inner}>
-        <View style={styles.tfWrapper}>
-          {editing ? (
-            <TextField
-              lineType={'none'}
-              multiline={true}
-              label={props.data.label}
-              value={userText}
-              editable={true}
-              ref={input}
-              onChangeText={text => typing(text)}
-            />
-          ) : (
-            <View>
-              <Text style={styles.pickerLabel}>{props.data.label}</Text>
-              <Picker
-                selectedValue={selectedValue}
-                onValueChange={value => select(value)}>
-                {values.map((value, id) => {
-                  return <Picker.Item value={value} label={value} key={id} />;
-                })}
-              </Picker>
-            </View>
-          )}
-        </View>
-        {editing ? (
-          <View style={styles.row}>
-            <IconedButton
-              icon="caret-down"
-              onPress={() => {
-                setEditing(!editing);
-                setUserText(selectedValue);
-              }}
-            />
-            <IconedButton icon="check" onPress={confirmTyped} />
-          </View>
-        ) : (
-          <IconedButton
-            icon="pen"
-            onPress={() => {
-              setEditing(!editing);
-            }}
-          />
-        )}
-      </View>
-      <View style={styles.hr} />
-    </View>
-  );
-};
-export default FieldEditor;

src/components/Form/field-editor.jsx

@@ -6,7 +6,7 @@ import IconedButton from '../view/iconed-button.jsx';
 import {POS_PICKER} from '../../constants/component-types';
 import set from '@babel/runtime/helpers/esm/set';
 
-const FieldEditor = props => {
+const FieldEditor = (props) => {
   const label = props.data.label;
   const constantValues = props.pos | '';
   const [values, setValues] = useState(props.data.values);
@@ -24,19 +24,19 @@ const FieldEditor = props => {
   const [] = useState();
   const [] = useState();
 
-  const select = value => {
+  const select = (value) => {
     setSelectedValue(value);
     setFiniteValue(value);
     setEditingValue(value);
   };
 
-  const typing = text => {
+  const typing = (text) => {
     setEditingValue(text);
   };
 
   const setTyped = () => {
     try {
-      let valuesSet = new Set(values);
+      let valuesSet = new Set(props.data.values);
       valuesSet.add(editingValue);
       const valuesArray = Array.from(valuesSet).slice();
       setValues(valuesArray);
@@ -51,7 +51,7 @@ const FieldEditor = props => {
 
   useEffect(() => {
     if (props.type === POS_PICKER) {
-      values.forEach((value, id) => {
+      props.data.values.forEach((value, id) => {
         if (value === finiteValue) {
           props.hasChanged(id);
         }
@@ -62,7 +62,6 @@ const FieldEditor = props => {
   }, [finiteValue]);
   useEffect(() => {
     setValues(props.data.values);
-    setSelectedValue(props.data.values[0]);
     console.log('EXECUTIN');
   }, [constantValues]);
 
@@ -119,8 +118,8 @@ const FieldEditor = props => {
           <Text style={styles.pickerLabel}>{props.data.label}</Text>
           <Picker
             selectedValue={selectedValue}
-            onValueChange={value => select(value)}>
+            onValueChange={(value) => select(value)}>
-            {values.map((value, id) => {
+            {props.data.values.map((value, id) => {
               return <Picker.Item value={value} label={value} key={id} />;
             })}
           </Picker>
@@ -137,7 +136,7 @@ const FieldEditor = props => {
                     label={label}
                     value={editingValue}
                     editable={true}
-                    onChangeText={text => typing(text)}
+                    onChangeText={(text) => typing(text)}
                     autoFocus={true}
                   />
                   <View style={styles.hr} />
@@ -147,8 +146,8 @@ const FieldEditor = props => {
                   <Text style={styles.pickerLabel}>{props.data.label}</Text>
                   <Picker
                     selectedValue={selectedValue}
-                    onValueChange={value => select(value)}>
+                    onValueChange={(value) => select(value)}>
-                    {values.map((value, id) => {
+                    {props.data.values.map((value, id) => {
                       return (
                         <Picker.Item value={value} label={value} key={id} />
                       );

src/components/Form/field-list.jsx

@@ -18,7 +18,7 @@ import {
 import {sendField} from '../../actions/form-actions';
 import {addNote} from '../../actions/createAnkiLanModel';
 
-const FieldList = props => {
+const FieldList = (props) => {
   const [pronunciation, setPronunciation] = useState(
     props.response.pronunciation,
   );
@@ -46,10 +46,11 @@ const FieldList = props => {
     setSound(props.response.sound);
     setPronunciation(props.response.pronunciation);
     setExamples(props.response.examples);
+    console.log('DPEDDDDD', props.response.compounded);
   }, [props]);
   const [loadingState, setLoadingState] = useState(false);
   useEffect(() => {
-    console.log('STATE', examples, pronunciation, sound);
+    // console.log('STATE', examples, pronunciation, sound);
     if (examples && pronunciation && sound) {
       setLoadingState(true);
     } else {
@@ -64,15 +65,11 @@ const FieldList = props => {
     <ScrollView keyboardShouldPersistTaps={'handled'} style={{height: '100%'}}>
       {loadingState && props.loadingState ? (
         <View>
-          <PickerList labelNum={1} id={0} role={DEF_LIST1} />
+          <PickerList labelNum={1} id={props.pos1id} role={DEF_LIST1} />
           {/*<PickerList labelNum={2} id={1} role={DEF_LIST2} />*/}
-          <PickerList
+          <PickerList labelNum={2} id={props.pos2id} role={DEF_LIST2} />
-            labelNum={2}
-            id={props.response.compounded.length >= 2 ? 1 : 0}
-            role={DEF_LIST2}
-          />
           <FieldEditor
-            hasChanged={c =>
+            hasChanged={(c) =>
               props.sendField({
                 text: c,
                 role: EXAMPLES,
@@ -85,7 +82,7 @@ const FieldList = props => {
             }}
           />
           <FieldEditor
-            hasChanged={c =>
+            hasChanged={(c) =>
               props.sendField({
                 text: c,
                 role: SOUND,
@@ -95,7 +92,7 @@ const FieldList = props => {
             role={SOUND}
           />
           <FieldEditor
-            hasChanged={c =>
+            hasChanged={(c) =>
               props.sendField({
                 text: c,
                 role: PRONUNCIATION,
@@ -119,11 +116,13 @@ const FieldList = props => {
   );
 };
 export default connect(
-  state => ({
+  (state) => ({
     response: state.api.parsedDictionary,
     word: state.api.availableApi.word,
     loadingState: state.api.apiIsLoaded,
     fields: state.anki.currentFields,
+    pos1id: state.anki.pos1id,
+    pos2id: state.anki.pos2id,
   }),
   {
     sendField,

src/components/Form/picker-list.jsx

@@ -5,30 +5,23 @@ import PosPicker from './pos-picker';
 import FieldEditor from './field-editor';
 import {setDef} from '../../actions/anki-set-actions';
 import {sendField} from '../../actions/form-actions';
-
+import {setPosId} from '../../actions/anki-ui-actions';
 /*
  ****************** props:*****************
  * startId props.data[0] / [1] /[8] ...
  * labelNum // Translate 1 / Translate 2 ...
  * */
-const PickerList = props => {
+const PickerList = (props) => {
-  const [data, setData] = useState(props.data[props.id]);
   const [tr, setTr] = useState(props.data[props.id].definitions[0]);
   const [def, setDef] = useState(props.data[props.id].definitions[0]);
   const [pos, setPos] = useState(props.data[props.id].pos);
-  const [globID, setId] = useState(props.id);
   useEffect(() => {
-    setData(props.data[props.id]);
+    // props.setPosId(props.id, props.id);
-    setTimeout(() => {
+    setPos(props.data[props.id].pos);
-      selectDef(0);
+    setDef(props.data[props.id].definitions[0]);
-    }, 0);
+    setTr(props.data[props.id].translates[0]);
+    console.log('emmit', props.id);
   }, [props]);
-  const selectDef = id => {
-    setId(id);
-    setPos(props.data[id].pos);
-    setDef(props.data[id].definitions[0]);
-    setTr(props.data[id].translates[0]);
-  };
 
   useEffect(() => {
     props.sendField({
@@ -39,17 +32,9 @@ const PickerList = props => {
       },
       role: props.role,
     });
-    props.sendField('HDFSL:FJL:SKDJF: SLDKJF:LSDJF:LSDKFJ SDF', {
-      text: {
-        pos: pos,
-        tr: tr,
-        definition: def,
-      },
-      role: props.role,
-    });
   }, [tr, def, pos]);
 
-  const updateData = c => {
+  const updateData = (c) => {
     console.log('HDFLSDKFJ SDF', {
       text: {
         pos: pos,
@@ -65,40 +50,43 @@ const PickerList = props => {
       <PosPicker
         labelNum={props.labelNum}
         defaultId={props.id}
-        onSelect={id => selectDef(id | props.id)}
+        onSelect={(id) => {
+          props.setPosId(props.labelNum - 1, id);
+        }}
       />
       <FieldEditor
-        hasChanged={c => {
+        hasChanged={(c) => {
           setTr(c);
           updateData(c);
         }}
         pos={pos}
         data={{
           label: `Translate ${props.labelNum}`,
-          values: props.data[globID].translates,
+          values: props.data[props.id].translates,
         }}
       />
       <FieldEditor
-        hasChanged={c => {
+        hasChanged={(c) => {
           setDef(c);
           updateData(c);
         }}
         pos={pos}
         data={{
           label: `Definition ${props.labelNum}`,
-          values: props.data[globID].definitions,
+          values: props.data[props.id].definitions,
         }}
       />
     </View>
   );
 };
 export default connect(
-  state => ({
+  (state) => ({
     data: state.api.parsedDictionary.compounded,
     word: state.api.availableApi.word,
   }),
   {
     setDef,
     sendField,
+    setPosId,
   },
 )(PickerList);

src/components/Form/pos-picker.jsx

@@ -9,6 +9,7 @@ const PosPicker = props => {
   const [poses, setPoses] = useState([]);
   useEffect(() => {
     if (props.parts) {
+      console.log('PARTASSDFSD', props.defaultId)
       let posArray = props.parts.map((part, id) => part.pos);
       setPoses(posArray);
       setReady(true);

src/components/add-anklan-model.jsx

@@ -23,7 +23,7 @@ const StartScreen = props => {
       props.getSavedData();
       props.checkAnkiLanModelForExisting(props.modelName, props.modelList);
     } else {
-      alert('Troubles');
+      console.log('Troubles with permissions');
       props.requestAnkiPermission();
     }
   }, []);

src/constants/anki-constants.js

@@ -32,6 +32,7 @@ export const ANKILAN_DATA = 'ANKILAN_DATA';
 
 //form actions
 export const SEND_FIELD = 'SEND_FIELD';
+export const SELECT_POS_ID = 'SELECT_POS_ID';
 //field names
 
 export const SOUND = 'SOUND';

src/reducers/anki-reducer.js

@@ -6,6 +6,7 @@ import {
   GET_MODEL_LIST,
   PRONUNCIATION,
   REQUEST_PERMISSIONS,
+  SELECT_POS_ID,
   SEND_FIELD,
   SET_ANKI_DATA,
   SET_ANKI_NOTE_CREATOR,
@@ -31,6 +32,8 @@ const initialState = {
   ankiLanModelName: 'develop_final_maybe_maybe_maybe',
   noteCreator: {},
   noteTemplate: [],
+  pos1id: 0,
+  pos2id: 0,
   currentFields: {
     word: '',
     compounded: [
@@ -68,6 +71,12 @@ const ankiReducer = (state = initialState, action) => {
         ...state,
         savedData: action.payload,
       };
+    case SELECT_POS_ID: {
+      console.log('click', action.id);
+      return action.id == 1
+        ? {...state, pos2id: action.payload}
+        : {...state, pos1id: action.payload};
+    }
     case SEND_FIELD: {
       const fields = state.currentFields;
       switch (action.role) {
@@ -120,6 +129,7 @@ const ankiReducer = (state = initialState, action) => {
         }
       }
     }
+
     default:
       return state;
   }