create model template

App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Provider} from 'react-redux';
-import StartScreen from './src/components/main-component';
+import StartScreen from './src/components/add-anklan-model';
 import store from './src/store';
 const App = props => {
   return (

src/actions/anki-get-actions.js

@@ -6,8 +6,9 @@ import {
   GET_FIELD_LIST,
   GET_MODEL_LIST,
   REQUEST_PERMISSIONS,
+  SET_EXISTING_OF_ANKI_LAN_MODEL,
 } from '../constants/anki-constants';
-import {getPermissionName} from 'react-native-ankidroid/dist/utilities';
+import {createAnkiLanModel} from './createAnkiLanModel';
 
 /*Permissions*/
 
@@ -74,4 +75,25 @@ export const getFieldList = async (
   return err ? {type: ERROR, err} : {type: GET_FIELD_LIST, payload: res};
 };
 
-export const dd = () => {};
+/*Checking*/
+const setExistingOfAnkiLanModel = existing => {
+  return {
+    type: SET_EXISTING_OF_ANKI_LAN_MODEL,
+    payload: existing,
+  };
+};
+export const checkAnkiLanModelForExisting = id => async dispatch => {
+  try {
+    const [err, res] = await AnkiDroid.getFieldList('', id);
+    if (err) {
+      throw err;
+    }
+    console.log(res);
+    await dispatch(setExistingOfAnkiLanModel(true));
+    return res;
+  } catch (err) {
+    await dispatch(setExistingOfAnkiLanModel(false));
+    await createAnkiLanModel(id);
+    console.log('errrororo', err);
+  }
+};

src/actions/createAnkiLanModel.js

@@ -0,0 +1,101 @@
+import {AnkiDroid} from 'react-native-ankidroid/dist/ankidroid';
+
+export const createAnkiLanModel = model => async dispatch => {
+  try {
+    const modelFields = [
+      'Word or sentence',
+      'Part of speech 1',
+      'Translate 1',
+      'Definition 1',
+      'Part of speech 2',
+      'Translate 2',
+      'Definition 2',
+      'Example',
+      'Transcription',
+      'Sound',
+    ];
+
+    const css = `<style> 
+ .card { 
+        display: flex;
+        justify-content:center;
+         text-align: center;
+        }
+        body {text-align: center;}
+        ul{
+        padding:0;
+        }
+        .span: {
+        display: flex;
+        justify-content: space-around;
+        
+}</style>`;
+
+    const answerFormat = `
+  {{FrontSide}}
+
+<hr id=answer>
+
+<ol>
+<li>
+ <div style='font-family: Arial; font-size: 20px;'>{{Translate 1}}</div>
+ <div style='font-family: Arial; font-size: 20px;'>{{Definition 1}}</div>
+</li>
+
+<li>
+<div style='font-family: Arial; font-size: 20px;'>{{Translate 2}}</div>
+<div style='font-family: Arial; font-size: 20px;'>{{Definition 2}}</div>
+</li>
+</ol>
+<p style="">{Example}}</p>\`;
+<span style="">{{Sound}}</span>
+  `;
+    const questionFormat = `
+        <span style="font-size: 40px; 07f">{{Word or sentence}}</span>
+        <br>
+        <div style='font-family: Arial; font-size: 20px;color: blue'>{{Transcription}}</div>
+        <br>
+        <ol>
+            <li>
+                <div style='font-family: Arial; font-size: 20px;'>{{Part of speech 1}}</div>
+            </li>
+            <li>
+                <div style='font-family: Arial; font-size: 20px;'>{{Part of speech 2}}</div>
+            </li>
+        </ol>
+        <span style="">{{Sound}}</span>`;
+    const modelProperties = {
+      name: model.name,
+      reference: 'com.ankilan.models',
+      fields: modelFields,
+      tags: [],
+      cardNames: ['Rus->En', 'En->Rus'],
+      questionFormat,
+      answerFormat,
+      css,
+    };
+    const settings = {
+      modelId: model.id,
+      modelProperties,
+      deckId: '1582019808117',
+    };
+    const currentDeck = new AnkiDroid(settings);
+    currentDeck.addNote(
+      [
+        'Word or sentence',
+        'Part of speech 1',
+        'Translate 1',
+        'Definition 1',
+        'Part of speech 2',
+        'Translate 2',
+        'Definition 2',
+        'Example',
+        'Transcription',
+        'Sound',
+      ],
+      modelFields,
+    );
+  } catch (err) {
+    console.log(err);
+  }
+};

src/components/add-anklan-model.jsx

@@ -5,12 +5,13 @@ import Permissions from './permissions';
 import {connect, Provider} from 'react-redux';
 import DeckPicker from './view/deck-picker';
 import AddWordForm from './add-word-form';
+import AnkiTemplate from './view/add-main-template';
+import {Grid, Row} from 'native-base';
 
 const StartScreen = props => {
     return (
         <ScrollView>
-            {!props.ankiAvailable? <Permissions /> : null}
-                <AddWordForm/>
+            {props.ankiAvailable? <AddWordForm/>: <Permissions /> }
         </ScrollView>
     )
 };

src/components/add-word-form.jsx

@@ -1,14 +1,24 @@
 import React from 'react'
 import {connect} from 'react-redux'
 import DeckPicker from './view/deck-picker';
-import{Form} from 'native-base';
+import{Form, Container} from 'native-base';
+import AnkiTemplate from './view/add-main-template';
+import {ScrollView} from 'react-native';
 
 const AddWordForm = props => {
     return (
-       <Form>
-           <DeckPicker/>
-       </Form>
+        <Container style={{padding: 20}}>
+            {props.ankiLanModelExists ?
+                <Form>
+                    <DeckPicker/>
+                </Form>
+                :
+                <AnkiTemplate/>
+            }
+        </Container>
     )
 }
 
-export default connect()(AddWordForm)
+export default connect(state => ({
+    ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists
+}))(AddWordForm)

src/components/permissions.js

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from 'react';
-import {Text, Button} from 'native-base';
+import {Text, Button, Grid} from 'native-base';
 import {connect} from 'react-redux';
 import {requestAnkiPermission} from '../actions/anki-get-actions';
 const Permissions = props => {
@@ -7,9 +7,16 @@ const Permissions = props => {
     props.requestAnkiPermission();
   }, []);
   return (
-    <Button onPress={() => requestAnkiPermission()}>
-      <Text>Request access</Text>
-    </Button>
+    <Grid
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
+      <Button onPress={() => requestAnkiPermission()}>
+        <Text>Request access</Text>
+      </Button>
+    </Grid>
   );
 };
 export default connect(

src/components/view/add-main-template.jsx

@@ -0,0 +1,30 @@
+import React, {useEffect} from 'react'
+import {Text, Button,Grid, Container} from 'native-base';
+import {checkAnkiLanModelForExisting} from '../../actions/anki-get-actions';
+import {connect} from 'react-redux'
+import {createAnkiLanModel} from '../../actions/createAnkiLanModel';
+
+const AnkiTemplate = props => {
+    useEffect(() => {
+        props.checkAnkiLanModelForExisting(props.id)
+    }, [])
+    return(
+        <Grid style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Text>You have no AnkiLan card template</Text>
+            <Button onPress={() => props.createAnkiLanModel({
+                id: props.modelId,
+                name: props.modelName,
+            })}><Text>Create</Text></Button>
+
+        </Grid>
+    )
+
+}
+
+export default connect(state => ({
+   modelId: state.anki.ankiLanModelID,
+    modelName: state.anki.ankiLanModelName
+}), {
+    createAnkiLanModel,
+    checkAnkiLanModelForExisting
+})(AnkiTemplate)

src/components/view/deck-picker.jsx

@@ -5,16 +5,15 @@ import { getDeckList} from '../../actions/anki-get-actions';
 import {selectDeck} from '../../actions/anki-set-actions';
 
 const DeckPicker = props => {
-    const [deckList, setDeckList] = useState([{name: "no decks", id:"666"}])
-    const [selectedDeck, setSelectedDeck] = useState('1')
+    const [deckList, setDeckList] = useState([{name: "no decks", id: 0}]);
     useEffect(() => {
         props.getDeckList()
         setDeckList(props.decks)
     }, [])
     return (
-        <Picker note mode={'dropdown'} onValueChange={id => setSelectedDeck(id)} selectedValue={selectedDeck} >
-            {deckList.map(deck => (
-                <Picker.Item label={deck.name} key={deck.id}/>
+        <Picker   onValueChange={id => props.selectDeck(id)} selectedValue={props.selectedDeck} >
+            {deckList.map((deck, index) => (
+                <Picker.Item label={deck.name} key={deck.id} value={index}/>
             ))}
         </Picker>
     )
@@ -25,5 +24,5 @@ export default connect(state => ({
     selectedDeck: state.anki.selectedDeck
 }),{
     getDeckList,
-    setDeck: selectDeck
+    selectDeck
 })(DeckPicker)

src/constants/anki-constants.js

@@ -16,3 +16,5 @@ export const SET_WORD_SOUND = 'SET_WORD_SOUND';
 export const SET_WORD_TRANSLATE = 'SET_WORD_TRANSLATE';
 //Anki ui actions
 export const SHOW_FIELDS = 'SHOW_FIELDS';
+// Anki check actions
+export const SET_EXISTING_OF_ANKI_LAN_MODEL = 'SET_EXISTING_OF_ANKI_LAN_MODEL';

src/reducers/anki-reducer.js

@@ -2,15 +2,19 @@ import {
   GET_DECK_LIST,
   REQUEST_PERMISSIONS,
   SET_DECK,
+  SET_EXISTING_OF_ANKI_LAN_MODEL,
 } from '../constants/anki-constants';
 
 const initialState = {
   isApiAvailable: false,
   appHasAccess: false,
   deckList: [],
-  selectedDeck: '0',
+  selectedDeck: '1',
   mainFieldIsAvailable: false,
   fieldList: [],
+  ankiLanModelIsAlreadyExists: false,
+  ankiLanModelID: '7410448765670',
+  ankiLanModelName: 'AnkiLan',
 };
 
 const ankiReducer = (state = initialState, action) => {
@@ -22,6 +26,8 @@ const ankiReducer = (state = initialState, action) => {
       return {...state, deckList: action.payload};
     case SET_DECK:
       return {...state, selectedDeck: action.payload};
+    case SET_EXISTING_OF_ANKI_LAN_MODEL:
+      return {...state, ankiLanModelIsAlreadyExists: action.payload};
     default:
       return state;
   }