style: Restyle app

trentschnee · Apr 14, 2020 · 808bb1b · 808bb1b
1 parent 31282fc
commit 808bb1b
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 57 deletions.
diff --git a/components/AddCard.js b/components/AddCard.js
@@ -44,16 +44,16 @@ class AddCard extends Component {
       const {cardQuestion,cardAnswer} = this.state;
       return (
         <View style={styles.container}>
-          <View >
+          <View style={styles.card} >
             <Text>What is your question?</Text>
-            <TextInput
+            <TextInput style={styles.input}
             onChangeText={this.changeQuestionHandler}
           value={cardQuestion}
           placeholder={'Your Question'}
         />
 
             <Text>What is your answer??</Text>
-            <TextInput
+            <TextInput style={styles.input}
             onChangeText={this.changeAnswerHandler}
           value={cardAnswer}
           placeholder={'Your Answer'}
@@ -79,21 +79,36 @@ const styles = StyleSheet.create({
   submitBtnText:{
     color:white,
   },
+  card:{
+    flex:1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor:blue,
+    alignSelf:"stretch",
+    shadowColor: 'rgba(0,0,0,0.34)',
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    }
+  },
+  input: {
+    borderWidth: 1,
+    flexDirection: "row",
+    padding: 10,
+    width: 300,
+    textAlign: "center",
+    borderRadius: 3,
+    marginVertical: 10
+  },
   addBtn:{
+
+    alignItems: "center",
     backgroundColor:green,
     padding:16,
     margin:10,
     borderRadius:3
   },
-  button: {
-    alignItems: "center",
-    backgroundColor: "#DDDDDD",
-    padding: 10
-  },
-  countContainer: {
-    alignItems: "center",
-    padding: 10
-  }
+
 });
 
 export default connect()(AddCard);
diff --git a/components/DeckCard.js b/components/DeckCard.js
@@ -11,13 +11,13 @@ function DeckCard(props) {
 }
 
 const styles = StyleSheet.create({
-
+    text:{
+alignItems:"center"
+    },
       title: {
         fontSize: 24,
     },
-    subTitle: {
-        fontSize: 16,
-    },
+
 });
 function mapStateToProps(decks, { title }) {
     // {title} is the param passed from parent component. We just need to match that within the decks list

diff --git a/components/DeckList.js b/components/DeckList.js
@@ -59,7 +59,6 @@ const styles = StyleSheet.create({
 
 });
 function mapStateToProps(decks) {
-  console.log(JSON.stringify(decks), "<-thisisit")
   const deckTitles = Object.keys(decks);
   return {
     deckTitles

diff --git a/components/Quiz.js b/components/Quiz.js
@@ -29,56 +29,77 @@ class Quiz extends Component {
       this.setState({ correctA: this.state.correctA + 1 })
       : this.setState({ incA: this.state.incA + 1 })
     // increment the question number
-    this.setState({ qNumber: this.state.qNumber + 1 })
+    this.setState({ qNumber: this.state.qNumber + 1,showQ:false })
 
     // logic for last question
   }
+  handleBackToDeck = ()=>{
+    const {navigation,route} = this.props;
+    const { title } = route.params;
+    navigation.navigate("Deck", { title });
+  }
+  handleRestartQ = ()=>{
+    const {navigation,route,deck} = this.props;
+    const { title } = route.params;
+    this.setState({   qNumber: 0,
+      showQ: false,
+      correctA: 0,
+      incA: 0})
+  }
   render() {
     const { route, numberOfQuestions, questions, navigation, deck } = this.props;
     const { title } = route.params;
     const { showQ, qNumber } = this.state;
     const number = qNumber + 1;
-    if(numberOfQuestions===0){
-return(<View>
-  <Text>Sorry, you cannot take a quiz because there are no cards in the deck.</Text>
-</View>)
+    if (numberOfQuestions === 0) {
+      return (<View style={styles.container}>
+        <View style={styles.card}>
+          <Text>Sorry, you cannot take a quiz because there are no cards in the deck.</Text>
+        </View>
+      </View>)
     }
-    else if(qNumber === numberOfQuestions){
-      const {incA,correctA} = this.state;
-      return(<View>
-      <Text>You got {correctA} correct answers and {incA} incorrect answers.</Text>
-      <TouchableOpacity 
-          style={styles.button}
-        >
-          <Text >Restart Quiz</Text>
-        </TouchableOpacity>
-        <TouchableOpacity 
-          style={styles.button}
-        >
-          <Text >Back to Deck</Text>
-        </TouchableOpacity>
+    else if (qNumber === numberOfQuestions) {
+      const { incA, correctA } = this.state;
+      return (<View style={styles.container}>
+        <View style={styles.card}>
+          <Text>You got {correctA} correct answers and {incA} incorrect answers.</Text>
+          <TouchableOpacity onPress={this.handleRestartQ}
+            style={styles.greenButton}
+          >
+            <Text style={{color:white}} >Restart Quiz</Text>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={this.handleBackToDeck}
+            style={styles.orangeButton}
+          >
+            <Text style={{color:white}} >Back to Deck</Text>
+          </TouchableOpacity>
+        </View>
       </View>)
     }
     return (<View style={styles.container} >
+      <Text style={styles.numberOfQuestions} >Progress: {number}/{numberOfQuestions}</Text>
       <View style={styles.card}>
-        <Text style={styles.numberOfQuestions} >{number}/{numberOfQuestions}</Text>
+
         {
-          !showQ ? <View><Text style={styles.mainQuestion} >{deck.questions[qNumber].cardQuestion}</Text><TouchableOpacity onPress={this.showA} >
-            <Text style={styles.saText} >Show Answer</Text>
-          </TouchableOpacity></View> : <View><Text style={styles.mainQuestion} >{deck.questions[qNumber].cardAnswer}</Text><TouchableOpacity onPress={this.showA} >
-            <Text style={styles.saText} >Show Question</Text>
+          !showQ ? <View><Text style={styles.mainQuestion} >Question: "{deck.questions[qNumber].cardQuestion}"</Text><TouchableOpacity onPress={this.showA} >
+            <Text style={{ color: orange}} >Show Answer</Text>
+          </TouchableOpacity></View> : <View><Text style={styles.mainQuestion} >Answer: "{deck.questions[qNumber].cardAnswer}"</Text><TouchableOpacity onPress={this.showA} >
+            <Text style={{ color: green}} >Show Question</Text>
           </TouchableOpacity></View>
         }
-        <TouchableOpacity onPress={()=>this.handleSubmitA(true)}
-          style={styles.button}
+        <View style={styles.buttons}>
+        <TouchableOpacity onPress={() => this.handleSubmitA(true)}
+          style={styles.greenButton}
         >
-          <Text >Correct</Text>
+          <Text style={{color:white}} >Correct</Text>
         </TouchableOpacity>
-        <TouchableOpacity onPress= {()=>this.handleSubmitA(false)}
-          style={styles.button}
+
+        <TouchableOpacity onPress={() => this.handleSubmitA(false)}
+          style={styles.redButton}
         >
-          <Text>Incorrect</Text>
+          <Text style={{color:white}}>Incorrect</Text>
         </TouchableOpacity>
+        </View>
       </View>
     </View>);
   }
@@ -91,7 +112,7 @@ const styles = StyleSheet.create({
   },
   card: {
     flex: 1,
-    justifyContent: "space-around",
+    justifyContent: "space-evenly",
     alignItems: "center",
     backgroundColor: blue,
     alignSelf: "stretch",
@@ -102,14 +123,31 @@ const styles = StyleSheet.create({
     }
   },
   numberOfQuestions: {
-    fontSize: 16,
-    color: white,
-    marginTop: 24,
-    textAlign: "center"
+    color: "black",
+    margin: 3,
+  },
+  buttons:{
+    alignItems: "flex-start",
+
+  },
+  greenButton:{
+    backgroundColor:green,
+    padding:16,
+    margin:10,
+    borderRadius:3
+  },
+  redButton:{
+    backgroundColor:red,
+    padding:16,
+    margin:10,
+    borderRadius:3
+  },
+  orangeButton:{
+    backgroundColor:orange,
+    padding:16,
+    margin:10,
+    borderRadius:3
   },
-  question: {
-    top: 0
-  }
 });
 function mapStateToProps(decks, { route }) {
   const { title } = route.params;

diff --git a/middleware/Logger.js b/middleware/Logger.js
@@ -4,7 +4,6 @@ const logger = (store) => (next) => (action) =>{
     console.log('The action: ', action);
     //updates the state
     const returnValue = next(action)
-    console.log('The new state:', store.getState());
     console.groupEnd();
     return returnValue;
 }

diff --git a/utils/api.js b/utils/api.js
@@ -32,7 +32,6 @@ export function deleteDeckTitle(title){
     })
 }
 export function saveDeckCard(title, question) {
-  console.log(title,'<-title',question,'<-question')
     return AsyncStorage.getItem(FLASHCARDS_FLASHCARD_DB).then(results => {
       const data = JSON.parse(results);
       Object.keys(data).map(dTitle => {