refactor Form component view

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
-  bracketSpacing: false,
-  jsxBracketSameLine: true,
-  singleQuote: true,
-  trailingComma: 'all',
-};
+    bracketSpacing: false,
+    jsxBracketSameLine: true,
+    singleQuote: true,
+    trailingComma: "all"
+}

package.json

@@ -27,7 +27,7 @@
     "@babel/runtime": "^7.6.2",
     "@react-native-community/eslint-config": "^0.0.5",
     "babel-jest": "^24.9.0",
-    "eslint": "^6.5.1",
+    "eslint": "^0.11.0-alpha.0",
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.56.0",
     "react-test-renderer": "16.9.0",

rn-start.sh

@@ -1 +1 @@
-REACT_DEBUGGER="rndebugger-open --open --port 8081" npm start
+REACT_DEBUGGER="rndebugger-open --open --port 8081" yarn start

src/actions/anki-get-actions.js

@@ -7,6 +7,7 @@ import {
   GET_MODEL_LIST,
   REQUEST_PERMISSIONS,
   SET_EXISTING_OF_ANKI_LAN_MODEL,
+  SET_FIELD_LIST,
 } from '../constants/anki-constants';
 import {createAnkiLanModel} from './createAnkiLanModel';
 
@@ -76,12 +77,22 @@ export const getModelList = () => async dispatch => {
   }
 };
 
-export const getFieldList = async (
-  id,
-  getFieldListFunction = AnkiDroid.getFieldList,
-) => {
-  const [err, res] = await getFieldListFunction(id);
-  return err ? {type: ERROR, err} : {type: GET_FIELD_LIST, payload: res};
+export const setFieldList = fieldList => ({
+  type: SET_FIELD_LIST,
+  payload: fieldList,
+});
+
+export const getFieldList = name => async dispatch => {
+  try {
+    const [err, res] = await AnkiDroid.getFieldList(name);
+    if (err) {
+      throw err;
+    }
+    await dispatch(setFieldList(res));
+    return res;
+  } catch (err) {
+    console.log(err);
+  }
 };
 
 /*Checking*/

src/actions/createAnkiLanModel.js

@@ -1,6 +1,6 @@
 import {AnkiDroid} from 'react-native-ankidroid/dist/ankidroid';
 import {setAnkiNoteCreator, setCreatorTemplate} from './anki-set-actions';
-import {checkAnkiLanModelForExisting, getModelList} from './anki-get-actions';
+import {checkAnkiLanModelForExisting, getFieldList, getModelList} from './anki-get-actions';
 
 export const createAnkiLanModel = model => async dispatch => {
   try {
@@ -170,6 +170,7 @@ export const createAnkiLanModel = model => async dispatch => {
     addNote(selectedDeck, valueFields, modelFields);
     checkAnkiLanModelForExisting(model.name, model.list);
     await dispatch(getModelList());
+    await dispatch(getFieldList(model.name));
   } catch (err) {
     console.log(err);
   }

src/components/add-anklan-model.jsx

@@ -1,21 +1,42 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {Container, Text} from 'native-base';
-import {ScrollView} from 'react-native'
+import {ScrollView} from 'react-native';
 import Permissions from './permissions';
 import {connect, Provider} from 'react-redux';
 import DeckPicker from './view/deck-picker';
 import AddWordForm from './anki-form';
 import AnkiTemplate from './view/add-main-template';
 import {Grid, Row} from 'native-base';
+import {checkAnkiLanModelForExisting} from '../actions/anki-get-actions';
 
 const StartScreen = props => {
-    return (
-        <ScrollView>
-            {props.ankiAvailable? <AddWordForm/>: <Permissions /> }
-        </ScrollView>
-    )
+  useEffect(() => {
+    props.checkAnkiLanModelForExisting(props.modelName, props.modelList);
+  });
+  return (
+    <ScrollView>
+      {props.ankiAvailable ? (
+        props.ankiLanModelExists ? (
+          <AddWordForm />
+        ) : (
+          <AnkiTemplate />
+        )
+      ) : (
+        <Permissions />
+      )}
+    </ScrollView>
+  );
 };
 
-export default connect(state => ({
+export default connect(
+  state => ({
     ankiAvailable: state.anki.appHasAccess,
-}))(StartScreen);
+    ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists,
+    modelName: state.anki.ankiLanModelName,
+    modelList: state.anki.modelList,
+    creator: state.anki.noteCreator,
+  }),
+  {
+    checkAnkiLanModelForExisting,
+  },
+)(StartScreen);

src/components/anki-form.jsx

@@ -1,33 +1,29 @@
-import React , {useEffect}from 'react'
-import {connect} from 'react-redux'
+import React, {useEffect} from 'react';
+import {connect} from 'react-redux';
 import DeckPicker from './view/deck-picker';
-import{Form, Container} from 'native-base';
+import {Form, Container} from 'native-base';
 import AnkiTemplate from './view/add-main-template';
 import {ScrollView} from 'react-native';
 import {checkAnkiLanModelForExisting} from '../actions/anki-get-actions';
 
 const AnkiForm = props => {
-   useEffect(() => {
-       props.checkAnkiLanModelForExisting(props.modelName, props.modelList)
-   })
-    return (
-        <Container style={{padding: 20}}>
-            <DeckPicker/>
-            {props.ankiLanModelExists ?
-                <Form>
-                </Form>
-                :
-                <AnkiTemplate/>
-                    }
-        </Container>
-    )
-}
+  return (
+    <Container style={{padding: 20}}>
+      <Form>
+        <DeckPicker />
+      </Form>
+    </Container>
+  );
+};
 
-export default connect(state => ({
+export default connect(
+  state => ({
     ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists,
     modelName: state.anki.ankiLanModelName,
     modelList: state.anki.modelList,
-    creator: state.anki.noteCreator
-}), {
-    checkAnkiLanModelForExisting
-})(AnkiForm)
+    creator: state.anki.noteCreator,
+  }),
+  {
+    checkAnkiLanModelForExisting,
+  },
+)(AnkiForm);

src/components/permissions.js

@@ -13,7 +13,7 @@ const Permissions = props => {
         alignItems: 'center',
         justifyContent: 'space-between',
       }}>
-      <Button onPress={() => requestAnkiPermission()}>
+      <Button onPress={() => props.requestAnkiPermission()}>
         <Text>Request access</Text>
       </Button>
     </Grid>

src/constants/anki-constants.js

@@ -11,6 +11,7 @@ export const GET_MODEL_LIST = 'GET_MODEL_LIST';
 export const GET_FIELD_LIST = 'GET_FIELD_LIST';
 //Anki set actions
 export const SET_DECK = 'SET_DECK';
+export const SET_FIELD_LIST = 'SET_FIELD_LIST';
 export const SET_WORD_DEFINITION = 'SET_DEFINITION';
 export const SET_WORD_SOUND = 'SET_WORD_SOUND';
 export const SET_WORD_TRANSLATE = 'SET_WORD_TRANSLATE';

src/reducers/anki-reducer.js

@@ -20,7 +20,7 @@ const initialState = {
   mainFieldIsAvailable: false,
   fieldList: [],
   ankiLanModelIsAlreadyExists: false,
-  ankiLanModelName: 'AnkiLan2',
+  ankiLanModelName: 'AnkiLan3',
   noteCreator: {},
   noteTemplate: [],
 };