From 1c6147c86dac42f877afc2ff8027610f92f53580 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diogo=20Silv=C3=A9rio?= <dblsilverio@gmail.com>
Date: Sat, 20 Jan 2018 21:52:05 -0200
Subject: [PATCH] FEATURE: Loading (mocked) decks

Loading mocked decks via redux. Reducer, action and service scripts created.
---
 actions/index.js                  |  8 ++++++
 components/flashcards/DeckList.js | 48 ++++++++++++++++++++++++++-----
 reducers/index.js                 | 20 +++++++++++++
 services/index.js                 | 12 ++++++++
 4 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 actions/index.js
 create mode 100644 reducers/index.js
 create mode 100644 services/index.js

diff --git a/actions/index.js b/actions/index.js
new file mode 100644
index 0000000..2cc1dcb
--- /dev/null
+++ b/actions/index.js
@@ -0,0 +1,8 @@
+export const LOAD_DECKS = "LOAD_DECKS";
+
+export function loadDecks(decks){
+    return {
+        action: LOAD_DECKS,
+        decks
+    }
+}
\ No newline at end of file
diff --git a/components/flashcards/DeckList.js b/components/flashcards/DeckList.js
index 3b091ea..0c56883 100644
--- a/components/flashcards/DeckList.js
+++ b/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
     }
-})
\ No newline at end of file
+})
+
+export default connect()(DeckList);
\ No newline at end of file
diff --git a/reducers/index.js b/reducers/index.js
new file mode 100644
index 0000000..d7dee6c
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/services/index.js b/services/index.js
new file mode 100644
index 0000000..b9fd105
--- /dev/null
+++ b/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 },
+    ];
+}
\ No newline at end of file