vds_quiz/vds-app/App/screens/Recap.js

import React from "react"
import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, Image, ImageBackground, BackHandler} from "react-native"
import SafeAreaView from 'react-native-safe-area-view'
import AsyncStorage from '@react-native-community/async-storage'
// import { AdMobBanner } from "expo-ads-admob"

import { Button, ButtonContainer } from "../components/Button"
import { colors, texts, examScheme, credentials } from "../components/Variables"

import aerodynamicsQuestions from "../data/aerodynamics"
import firstAidQuestions from "../data/firstAid"
import flightSafetyQuestions from "../data/flightSafety"
import instrumentsQuestions from "../data/instruments"
import legislationQuestions from "../data/legislation"
import materialsQuestions from "../data/materials"
import meteorologyQuestions from "../data/meteorology"
import physiopathologyQuestions from "../data/physiopathology"
import pilotingTechniquesQuestions from "../data/pilotingTechniques"

const screen = Dimensions.get("window")
const header = require("../assets/header.png")
const bgImage = require("../assets/bg.jpg")

const allQuestions = {
  aerodynamics: aerodynamicsQuestions,
  firstAid: firstAidQuestions,
  flightSafety: flightSafetyQuestions,
  instruments: instrumentsQuestions,
  legislation: legislationQuestions,
  materials: materialsQuestions,
  meteorology: meteorologyQuestions,
  physiopathology: physiopathologyQuestions,
  pilotingTechniques: pilotingTechniquesQuestions
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.dark_blue,
    flex: 1
  },
  safearea: {
    flex: 1,
    marginTop: 0,
    justifyContent: "space-between",
    paddingHorizontal: 20,
    paddingBottom: 40
  },
  headerContainer: {
    marginTop: -40,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: screen.width/1.5
  },
  header: {
    width: "100%"
  },
  box: {
    marginTop: 30,
    borderColor: colors.black_alpha,
    borderWidth: 1,
    padding: 15,
    borderRadius: 5,
    backgroundColor: colors.white_alpha
  },
  text: {
    color: colors.white,
    fontSize: 20,
    textAlign: "center",
    fontWeight: "600",
    paddingTop: 0
  },
  textCode: {
    color: colors.white,
    fontSize: 12,
    textAlign: "center",
    fontWeight: "500",
    paddingTop: 10,
    paddingBottom: 0
  },
  textBig: {
    color: colors.white,
    fontSize: 22,
    textAlign: "center",
    fontWeight: "400",
    paddingBottom: 15,
    textTransform: "uppercase",
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  },
  bg: {
    width: "100%",
    height: "100%"
  },
  bannerContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  banner: {
    width: 320,
    height: 100,
    marginVertical: 20
  }
})

class Recap extends React.Component {

  state = {
    storeWrongAnswers: []
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
    AsyncStorage.getItem('storeWrongAnswers').then((value) => {
      //console.log('storeWrongAnswers: ', JSON.parse(value))
      this.setState( (state) => {
        return {
          storeWrongAnswers: JSON.parse(value)
        }
      })
    })//.done()
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
  }

  handleBackButton = () => {


    let tmpQuestions = []
    AsyncStorage.getItem('setupData').then((value) => {
      let setupData = JSON.parse(value)

      examScheme.forEach( (elem) => {
        let currentSection = setupData.excludeDelta ? allQuestions[elem.section].filter(item => !item.delta) : allQuestions[elem.section]
        for(let i=0; i<elem.questions; i++) {
          const currentIndex = Math.floor(Math.random() * currentSection.length)
          tmpQuestions.push(currentSection[currentIndex])
          currentSection = currentSection.filter( (item, index) => index != currentIndex)
        }
      })

      this.props.navigation.navigate("Splash", {
        examQuestions: tmpQuestions,
        storeWrongAnswers: this.state.storeWrongAnswers
      })

      return true

    })//.done()
  }

  render() {

    const questions = this.props.navigation.getParam("wrongAnswers", [])

    return (
      <View style={styles.container} >
        <View style={styles.headerContainer} >
          <Image source={header} style={styles.header} resizeMode="contain" />
        </View>

        <Text style={styles.textBig}>{texts.recapTitle}</Text>

        <ScrollView>
          <SafeAreaView style={styles.safearea}>
            {questions.map( (question, index) => (
              <View style={styles.box} key={question.id}>
                <Text style={styles.textCode}>{question.id}</Text>
                <Text style={styles.text}>{question.question}</Text>

                <ButtonContainer>
                  {question.answers.map( (answer, index) => (
                    <Button
                      key={answer.id}
                      text={answer.text}
                      colorize={{id: answer.id, clicked: question.clicked, answered: true, isCorrect: answer.correct}}
                    />
                  ))}
                </ButtonContainer>
              </View>
            ))}

            <View style={styles.button}>
              <Button
                color={colors.white_alpha2}
                hasShadow={true}
                hasBg={true}
                text={texts.restart}
                onPress={() => {this.handleBackButton()}
                }
              />
            </View>
          </SafeAreaView>

          <View style={styles.bannerContainer}>
            <Text>BANNER</Text>
          </View>
        </ScrollView>

      </View>

    )
  }
}

export default Recap