Develop the application

Author: yushan

.gitignore

@@ -0,0 +1,13 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

App.js

@@ -0,0 +1,118 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStackNavigator } from '@react-navigation/stack';
+import Constants from 'expo-constants';
+import { store, getDecks, setLocalNotification } from './utils/helpers';
+import DeckList from './components/DeckList';
+import NewDeck from './components/NewDeck';
+import Deck from './components/Deck';
+import Quiz from './components/Quiz';
+import Result from './components/Result';
+import AddCard from './components/AddCard';
+
+function MyStatusBar({ backgroundColor, ...props }) {
+  return (
+    <View style={{ backgroundColor, height: Constants.statusBarHeight }}>
+      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
+    </View>
+  )
+}
+
+const Tab = createBottomTabNavigator();
+
+function Tabs(props) {
+  const { data, fetchData } = props;
+  return (
+    <Tab.Navigator
+      tabBarOptions={{
+        activeTintColor: 'white',
+        style: {
+          height: 56,
+          backgroundColor: '#fe5a37',
+          shadowColor: 'rgba(0, 0, 0, 0.24)',
+          shadowOffset: {
+            width: 0,
+            height: 3
+          },
+          shadowRadius: 6,
+          shadowOpacity: 1,
+        },
+        tabStyle: {
+          justifyContent: 'center'
+        },
+        labelStyle: {
+          fontSize: 17,
+        }
+      }}>
+      <Tab.Screen
+        name="Decks"
+        options={{ headerShown: false }}>
+        {props => <DeckList {...props} data={data} />}
+      </Tab.Screen>
+      <Tab.Screen
+        name="New Deck"
+        options={{ headerShown: false }}>
+          {props => <NewDeck {...props} fetchData={fetchData} />}
+        </Tab.Screen>
+    </Tab.Navigator>
+  )
+}
+
+const Stack = createStackNavigator();
+
+export default class App extends Component {
+  state = {
+    flashCards: {}
+  }
+
+  componentDidMount() {
+    setLocalNotification();
+    store()
+      .then(() => this.fetchData());
+  }
+
+  fetchData = () => {
+    return getDecks()
+      .then((flashCards) => {
+        this.setState(() => ({
+        flashCards
+      }))});
+  }
+
+  render() {
+    const { flashCards } = this.state;
+    return (
+      <NavigationContainer>
+        <View style={{ flex: 1 }}>
+          <MyStatusBar backgroundColor='#fe5a37' barStyle='light-content' />
+          <Stack.Navigator>
+            <Stack.Screen
+              name="Decks">
+                {props => <Tabs {...props} data={flashCards} fetchData={this.fetchData} />}
+            </Stack.Screen>
+            <Stack.Screen
+              name="Deck"
+              component={Deck}
+              options={({ route }) => ({
+                title: route.params.title,
+              })} />
+            <Stack.Screen
+              name="Quiz"
+              component={Quiz}
+              initialParams={{ correctCount: 0 }} />
+            <Stack.Screen
+              name="Result"
+              component={Result} />
+            <Stack.Screen
+              name="AddCard">
+              {props => <AddCard {...props} fetchData={this.fetchData} />}
+            </Stack.Screen>
+          </Stack.Navigator>
+        </View>
+      </NavigationContainer>
+    )
+  }
+}

README.md

@@ -0,0 +1,71 @@
+# Mobile Flashcards
+
+This is the final project in the Udacity React Nanodegree.
+
+In the “Mobile Flashcards” Project, build a mobile application (Android or iOS - or both) that allows users to study collections of flashcards. The app will allow users to create different categories of flashcards called "decks", add flashcards to those decks, then take quizzes on those decks.
+
+## TL;DR
+
+To get started developing right away:
+
+- install all project dependencies with `yarn install` or `npm install`.
+
+## Available Scripts
+
+If Yarn was installed when the project was initialized, then dependencies will have been installed via Yarn, and you should probably use it to run these commands as well. Unlike dependency installation, command running syntax is identical for Yarn and NPM at the time of this writing.
+
+### `npm start`
+
+Runs your app in development mode.
+
+Open it in the [Expo app](https://expo.io) on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal.
+
+Sometimes you may need to reset or clear the React Native packager's cache. To do so, you can pass the `--reset-cache` flag to the start script:
+
+```
+npm start -- --reset-cache
+# or
+yarn start -- --reset-cache
+```
+
+#### `npm test`
+
+Runs the [jest](https://github.com/facebook/jest) test runner on your tests.
+
+#### `npm run ios`
+
+Like `npm start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed.
+
+#### `npm run android`
+
+Like `npm start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup). We also recommend installing Genymotion as your Android emulator. Once you've finished setting up the native build environment, there are two options for making the right copy of `adb` available to Create React Native App:
+
+##### Using Android Studio's `adb`
+
+1. Make sure that you can run adb from your terminal.
+2. Open Genymotion and navigate to `Settings -> ADB`. Select “Use custom Android SDK tools” and update with your [Android SDK directory](https://stackoverflow.com/questions/25176594/android-sdk-location).
+
+##### Using Genymotion's `adb`
+
+1. Find Genymotion’s copy of adb. On macOS for example, this is normally `/Applications/Genymotion.app/Contents/MacOS/tools/`.
+2. Add the Genymotion tools directory to your path (instructions for [Mac](http://osxdaily.com/2014/08/14/add-new-path-to-path-command-line/), [Linux](http://www.computerhope.com/issues/ch001647.htm), and [Windows](https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/)).
+3. Make sure that you can run adb from your terminal.
+
+#### `npm run eject`
+
+This will start the process of "ejecting" from Create React Native App's build scripts. You'll be asked a couple of questions about how you'd like to build your project.
+
+**Warning:** Running eject is a permanent action (aside from whatever version control system you use). An ejected app will require you to have an [Xcode and/or Android Studio environment](https://facebook.github.io/react-native/docs/getting-started.html) set up.
+
+
+
+
+## Note
+
+- This project develop in https://snack.expo.io
+- Project URL - https://snack.expo.io/@yushanwebdev/9c3d01
+- Checked in Android Device and iOS Emulator in Snack.
+
+
+
+

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "reactnd-mobile-flashcards",
+    "slug": "snack-a72e4c13-dc22-4518-9d2b-27148db07534",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

assets/adaptive-icon.png

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

assets/favicon.png

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import { View, Text, TextInput, StyleSheet } from 'react-native';
+import { addCardToDeck } from '../utils/helpers';
+import Button from './Button';
+
+export default class AddCard extends Component {
+    state = {
+      question: '',
+      answer: '',
+    }
+
+    onSubmit = () => {
+      const { title } = this.props.route.params;
+      const { fetchData, navigation } = this.props;
+
+      addCardToDeck(title, this.state)
+        .then(() => {
+          fetchData();
+        });
+
+      navigation.navigate('Decks');
+    }
+
+    render() {
+        return(
+            <View style={styles.container}>
+                <TextInput   
+                    style={styles.input}
+                    placeholder="Question"  
+                    onChangeText={(question) => this.setState({question})}  
+                />
+                <TextInput   
+                    style={styles.input}
+                    placeholder="Answer"  
+                    onChangeText={(answer) => this.setState({answer})}  
+                />
+                <Button 
+                  style={{ backgroundColor: '#000' }}
+                  onPress={this.onSubmit}>
+                    <Text style={{ color: '#fff', fontSize: 17 }}>Submit</Text>
+                </Button>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20
+    },
+    input: {
+        width: '100%',
+        borderColor: '#000',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderRadius: 10,
+        paddingTop: 5,
+        paddingBottom: 5,
+        paddingLeft: 10,
+        paddingRight: 10,
+        marginBottom: 45,
+    }
+})

assets/icon.png

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+export default function Button({ children, onPress, style = {} }) {
+    return(
+        <TouchableOpacity style={[styles.button, style]} onPress={onPress}>
+            {children}
+        </TouchableOpacity>
+    )
+}
+
+const styles = StyleSheet.create({
+    button: {
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: '#000',
+        paddingTop: 15,
+        paddingBottom: 15,
+        paddingLeft: 35,
+        paddingRight: 35,
+        borderRadius: 10,
+        marginBottom: 20,
+        alignItems: 'center'
+    }
+})

assets/splash.png

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Button from './Button';
+import DeckInfo from './DeckInfo';
+
+export default function Deck(props) {
+    const { route: { params: { title, count } }, navigation } = props;
+
+    const goToQuiz = () => {
+        navigation.navigate('Quiz', {
+            title,
+            count,
+            quizNo: 0
+        });
+    }
+
+    const addCard = () => {
+      navigation.navigate('AddCard', {
+        title
+      });
+    }
+
+    return (
+        <View style={styles.container}>
+            <DeckInfo
+                title={title}
+                count={count}
+                style={{ alignItems: 'center', marginBottom: 45 }} />
+            <View>
+                <Button
+                  onPress={addCard}>
+                    <Text>Add Card</Text>
+                </Button>
+                {count ? <Button
+                    style={{ backgroundColor: '#000' }}
+                    onPress={goToQuiz}>
+                    <Text style={{ color: "#fff" }}>Start Quiz</Text>
+                </Button> : null}
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: 1,
+    },
+});