Move routes to a separate file

Improve Input handling in AddCard Decompose component into smaller component
aimenbatool · Jun 7, 2019 · 41438ef · 41438ef
1 parent 01d0643
commit 41438ef
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 120 deletions.
diff --git 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: () => <Ionicons name="ios-list" size={32} color="black" />,
-    },
-  },
-  AddDeck: {
-    screen: AddDeck,
-    navigationOptions: {
-      tabBarLabel: 'Add Deck',
-      tabBarIcon: () => <Ionicons name="ios-add" size={32} color="black" />
-      ,
-    },
-  },
-};
-
-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
@@ -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 {
           <TextInput
             style={styles.card}
             placeholder="Enter your question..."
-            onChangeText={text => this.setState({ question: text })}
+            onChangeText={text => this.handleChange(text, 'question')}
             value={question}
           />
           <TextInput
             style={styles.card}
             placeholder="Enter your question..."
-            onChangeText={text => this.setState({ answer: text })}
+            onChangeText={text => this.handleChange(text, 'answer')}
             value={answer}
           />
           <TouchableOpacity style={styles.submit} onPress={this.handleSubmit}>

diff --git 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 {
                 );
               }}
             >
-              <Text style={styles.deckText}>
-                {d.title}
-              </Text>
-              <Text style={styles.cardNumber}>
-                {`${d.cards.length} cards`}
-              </Text>
+              <DeckViewDetails title={d.title} questions={d.cards} />
             </TouchableOpacity>
           ))
           : <Text style={styles.error}> No deck available. </Text>

diff --git a/components/DeckViewDetails.js 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 }) => (
+  <View>
+    <Text style={styles.deckText}>
+      {title}
+    </Text>
+    <Text style={styles.cardNumber}>
+      {questions.length === 1
+        ? `${questions.length} Card`
+        : `${questions.length} Cards`
+      }
+    </Text>
+  </View>
+);
+
+export default DeckViewDetails;
diff --git 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 (
       <View style={styles.container}>
@@ -266,7 +273,7 @@ class Quiz extends Component {
                   <View>
                     <Text style={styles.passingScoreText}>
                         Passing Score:
-                      {`${correctAnswer}/${questions.length}`}
+                      {this.calculateScore()}
                     </Text>
                     <View style={styles.scoreBoardBtn}>
                       <TouchableOpacity

diff --git a/routes.js b/routes.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  createBottomTabNavigator,
+  createMaterialTopTabNavigator,
+  createStackNavigator,
+  createAppContainer,
+} from 'react-navigation';
+import { Ionicons } from '@expo/vector-icons';
+import { Platform } from 'react-native';
+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: () => <Ionicons name="ios-list" size={32} color="black" />,
+    },
+  },
+  AddDeck: {
+    screen: AddDeck,
+    navigationOptions: {
+      tabBarLabel: 'Add Deck',
+      tabBarIcon: () => <Ionicons name="ios-add" size={32} color="black" />
+      ,
+    },
+  },
+};
+
+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;