FEATURE: Loading (mocked) decks

Loading mocked decks via redux. Reducer, action and service scripts created.

actions/index.js

@@ -0,0 +1,8 @@
+export const LOAD_DECKS = "LOAD_DECKS";
+
+export function loadDecks(decks){
+    return {
+        action: LOAD_DECKS,
+        decks
+    }
+}

components/flashcards/DeckList.js

@@ -1,24 +1,56 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import {
+    ActivityIndicator,
     StyleSheet,
     Text,
+    ScrollView,
+    TouchableOpacity,
     View
 } from 'react-native';
+
+import DeckItem from '../ui/DeckItem';
+
+import { loadDecks } from '../../services';
+
 import { COLOR_B_4 } from '../../utils/colors';
 
-export default class DeckList extends Component {
+class DeckList extends Component {
 
     static navigationOptions = {
         tabBarLabel: 'Decks'
+    }
 
+    state = {
+        decks: null
+    }
+
+    componentDidMount() {
+        const decks = loadDecks();
+        this.setState({
+            decks
+        })
     }
 
     render() {
-        return (
-            <View style={styles.container}>
-                <Text>Decklist</Text>
-            </View>
-        );
+
+        if (this.state.decks === null) {
+            return (
+                <View style={{ flex: 1, alignContent: 'center', justifyContent: 'center' }}>
+                    <ActivityIndicator size={50} />
+                </View>
+            );
+        } else {
+            return (
+                <ScrollView style={styles.container}>
+                    {this.state.decks.map((deck) => (
+                        <TouchableOpacity key={deck.id}>
+                            <DeckItem deck={deck} />
+                        </TouchableOpacity>
+                    ))}
+                </ScrollView>
+            )
+        }
     }
 
 }
@@ -27,4 +59,6 @@ const styles = StyleSheet.create({
     container: {
         flex: 1
     }
-})
+})
+
+export default connect()(DeckList);

reducers/index.js

@@ -0,0 +1,20 @@
+import { LOAD_DECKS } from '../actions';
+
+function decks(state, action) {
+    const { type } = action;
+
+    switch(type){
+        case LOAD_DECKS:{
+            const decks = action.decks;
+
+            return {
+                decks
+            };
+        }
+        default:{
+            return state;
+        }
+    }
+}
+
+export default decks;

services/index.js

@@ -0,0 +1,12 @@
+export function loadDecks() {
+    return [
+        { id: 1, name: 'Javascript 101', description: 'Basic questions about loops, data types and functions', cards: [], difficulty: 18, won: 10, lost: 3 },
+        { id: 2, name: 'Cryptocurrency', description: 'Main algorithms, PoS, PoW, Bitcoin...', cards: [], difficulty: 58, won: 9, lost: 7 },
+        { id: 3, name: 'Java threads', description: 'Concurrency framework, locks and APIs', cards: [], difficulty: 80, won: 18, lost: 12 },
+        { id: 4, name: 'Unity 5 basics', description: 'Basic components and actions', cards: [], difficulty: 1, won: 6, lost: 1 },
+        { id: 5, name: 'Pro React Native', description: 'Advanced and custom components', cards: [], difficulty: 70, won: 10, lost: 5 },
+        { id: 6, name: 'RESTful', description: 'Verbs, scenarios and status codes', cards: [], difficulty: 60, won: 18, lost: 12 },
+        { id: 7, name: 'Elixir', description: 'Basic structure, loops, running scripts', cards: [], difficulty: 1, won: 6, lost: 1 },
+        { id: 8, name: 'Python 3', description: 'Concepts, changes and new apis', cards: [], difficulty: 22, won: 10, lost: 5 },
+    ];
+}