diff --git a/App.js b/App.js
index db876ef..aaef824 100644
--- a/App.js
+++ b/App.js
@@ -1,109 +1,13 @@
import React from 'react';
-import {
- createBottomTabNavigator,
- createMaterialTopTabNavigator,
- createStackNavigator,
- createAppContainer,
-} from 'react-navigation';
-import { Platform } from 'react-native';
import { createStore, compose } from 'redux';
-// import { composeWithDevTools } from 'redux-devtools-extension';
import { Provider } from 'react-redux';
-import { Ionicons } from '@expo/vector-icons';
import reducer from './reducers';
import middleware from './middleware';
-import AddDeck from './components/AddDeck';
-import DeckList from './components/DeckList';
-import DeckView from './components/DeckView';
-import AddCard from './components/AddCard';
-import Quiz from './components/Quiz';
-
-const Tabs = {
- DeckList: {
- screen: DeckList,
- navigationOptions: {
- tabBarLabel: 'Deck List',
- tabBarIcon: () => ,
- },
- },
- AddDeck: {
- screen: AddDeck,
- navigationOptions: {
- tabBarLabel: 'Add Deck',
- tabBarIcon: () =>
- ,
- },
- },
-};
-
-const tabOptions = {
- navigationOptions: {
- header: null,
- },
- tabBarOptions: {
- activeTintColor: 'black',
- labelStyle: { fontSize: 18 },
- style: {
- height: 56,
- backgroundColor: '#f6f5f5',
- shadowColor: 'rgba(0, 0, 0, 0.24)',
- shadowOffset: {
- width: 0,
- height: 3,
- },
- shadowRadius: 6,
- shadowOpacity: 1,
- },
- },
-};
-
-const tabNavigationPlatform = Platform.OS === 'ios'
- ? createBottomTabNavigator(Tabs, tabOptions)
- : createMaterialTopTabNavigator(Tabs, tabOptions);
-const TabNavigator = createAppContainer(tabNavigationPlatform);
-
-const Stack = createStackNavigator({
- Home: {
- screen: TabNavigator,
- },
- AddDeck: {
- screen: AddDeck,
- },
- DeckList: {
- screen: DeckList,
- navigationOptions: () => ({
- title: 'Deck List',
- }),
- },
- DeckView: {
- screen: DeckView,
- navigationOptions: () => ({
- title: 'Deck',
- }),
- },
- AddCard: {
- screen: AddCard,
- navigationOptions: () => ({
- title: 'Add Card',
- }),
- },
- Quiz: {
- screen: Quiz,
- navigationOptions: () => ({
- title: 'Quiz',
- }),
- },
-});
-
-const StackNavigator = createAppContainer(Stack);
-
-// eslint-disable-next-line no-debugger
-// debugger;
+import StackNavigator from './routes';
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-
const store = createStore(reducer, composeEnhancers(middleware));
const App = () => (
diff --git a/components/AddCard.js b/components/AddCard.js
index 403514b..d43c6fe 100644
--- a/components/AddCard.js
+++ b/components/AddCard.js
@@ -65,6 +65,12 @@ class AddCard extends Component {
});
}
+ handleChange = (value, label) => {
+ this.setState({
+ [label]: value,
+ });
+ }
+
render() {
const { question, answer } = this.state;
return (
@@ -76,13 +82,13 @@ class AddCard extends Component {
this.setState({ question: text })}
+ onChangeText={text => this.handleChange(text, 'question')}
value={question}
/>
this.setState({ answer: text })}
+ onChangeText={text => this.handleChange(text, 'answer')}
value={answer}
/>
diff --git a/components/DeckList.js b/components/DeckList.js
index 93698f6..31e1353 100644
--- a/components/DeckList.js
+++ b/components/DeckList.js
@@ -10,6 +10,7 @@ import {
import PropTypes from 'prop-types';
import { receiveDecks } from '../actions/deck';
import { getDecks } from '../utils/api';
+import DeckViewDetails from './DeckViewDetails';
const styles = StyleSheet.create({
deck: {
@@ -18,19 +19,6 @@ const styles = StyleSheet.create({
backgroundColor: 'red',
flexDirection: 'column',
},
- deckText: {
- fontSize: 40,
- color: 'white',
- fontFamily: 'Menlo-Bold',
- textAlign: 'center',
- marginTop: 50,
- },
- cardNumber: {
- color: 'white',
- fontSize: 15,
- textAlign: 'center',
- marginTop: 10,
- },
error: {
fontSize: 30,
textAlign: 'center',
@@ -87,12 +75,7 @@ class DeckList extends Component {
);
}}
>
-
- {d.title}
-
-
- {`${d.cards.length} cards`}
-
+
))
: No deck available.
diff --git a/components/DeckViewDetails.js b/components/DeckViewDetails.js
new file mode 100644
index 0000000..94fddb4
--- /dev/null
+++ b/components/DeckViewDetails.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+const styles = {
+ deckText: {
+ fontSize: 40,
+ color: 'white',
+ fontFamily: 'Menlo-Bold',
+ textAlign: 'center',
+ marginTop: 50,
+ },
+ cardNumber: {
+ color: 'white',
+ fontSize: 15,
+ textAlign: 'center',
+ marginTop: 10,
+ },
+};
+
+// eslint-disable-next-line react/prop-types
+const DeckViewDetails = ({ title, questions }) => (
+
+
+ {title}
+
+
+ {questions.length === 1
+ ? `${questions.length} Card`
+ : `${questions.length} Cards`
+ }
+
+
+);
+
+export default DeckViewDetails;
diff --git a/components/Quiz.js b/components/Quiz.js
index c3b24e0..b55032c 100644
--- a/components/Quiz.js
+++ b/components/Quiz.js
@@ -128,6 +128,7 @@ class Quiz extends Component {
.then(setLocalNotification);
}
+ // eslint-disable-next-line react/sort-comp
shuffleQuestions() {
const { navigation } = this.props;
const { cards } = navigation.state.params;
@@ -188,6 +189,12 @@ class Quiz extends Component {
this.resetNotification();
}
+ calculateScore = () => {
+ const { correctAnswer, questions } = this.state;
+ this.resetNotification();
+ return `${correctAnswer}/${questions.length}`;
+ }
+
render() {
const frontAnimatedStyle = {
transform: [
@@ -201,7 +208,7 @@ class Quiz extends Component {
],
};
- const { questions, currentQuestion, correctAnswer } = this.state;
+ const { questions, currentQuestion } = this.state;
return (
@@ -266,7 +273,7 @@ class Quiz extends Component {
Passing Score:
- {`${correctAnswer}/${questions.length}`}
+ {this.calculateScore()}
,
+ },
+ },
+ AddDeck: {
+ screen: AddDeck,
+ navigationOptions: {
+ tabBarLabel: 'Add Deck',
+ tabBarIcon: () =>
+ ,
+ },
+ },
+};
+
+const tabOptions = {
+ navigationOptions: {
+ header: null,
+ },
+ tabBarOptions: {
+ activeTintColor: 'black',
+ labelStyle: { fontSize: 18 },
+ style: {
+ height: 56,
+ backgroundColor: '#f6f5f5',
+ shadowColor: 'rgba(0, 0, 0, 0.24)',
+ shadowOffset: {
+ width: 0,
+ height: 3,
+ },
+ shadowRadius: 6,
+ shadowOpacity: 1,
+ },
+ },
+};
+
+const tabNavigationPlatform = Platform.OS === 'ios'
+ ? createBottomTabNavigator(Tabs, tabOptions)
+ : createMaterialTopTabNavigator(Tabs, tabOptions);
+const TabNavigator = createAppContainer(tabNavigationPlatform);
+
+const Stack = createStackNavigator({
+ Home: {
+ screen: TabNavigator,
+ },
+ AddDeck: {
+ screen: AddDeck,
+ },
+ DeckList: {
+ screen: DeckList,
+ navigationOptions: () => ({
+ title: 'Deck List',
+ }),
+ },
+ DeckView: {
+ screen: DeckView,
+ navigationOptions: () => ({
+ title: 'Deck',
+ }),
+ },
+ AddCard: {
+ screen: AddCard,
+ navigationOptions: () => ({
+ title: 'Add Card',
+ }),
+ },
+ Quiz: {
+ screen: Quiz,
+ navigationOptions: () => ({
+ title: 'Quiz',
+ }),
+ },
+});
+
+const StackNavigator = createAppContainer(Stack);
+export default StackNavigator;