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

import React from "react"
import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, ImageBackground, BackHandler } from "react-native"
import { Picker } from '@react-native-picker/picker'
import SafeAreaView from 'react-native-safe-area-view'
import AsyncStorage from '@react-native-async-storage/async-storage'

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  text: {
    color: colors.white,
    fontSize: 20,
    textAlign: "center",
    fontWeight: "600",
    paddingTop: 5,
    paddingBottom: 20
  },
  textCode: {
    color: colors.white,
    fontSize: 12,
    textAlign: "center",
    fontWeight: "500",
    paddingTop: 20,
    paddingBottom: 0
  },
  safearea: {
    flex: 1,
    paddingHorizontal: 20,
    paddingTop: 20,
    justifyContent: "space-between"
  },
  box: {
    width: screen.width,
    paddingVertical: 10,
    overflow: "hidden"
  },
  scrollView: {
    //margin: 10,
    height: screen.height-20
  },
  bg: {
    width: "100%",
    height: "100%"
  },
  dropdownContainer: {
    marginTop: 20,
    borderRadius: 10,
    width: "100%",
    textAlign: "center",
    backgroundColor: colors.blue
  },
  dropdown: {
    color: colors.white,
    fontSize: 16,
    width: "100%",
    textAlign: "center",
    fontWeight: "600",
    backgroundColor: "transparent"
  },
  dropdownItem: {
    color: colors.white,
    backgroundColor: "red",
    fontSize: 16,
    borderRadius: 10,
    textAlign: "center",
    fontWeight: "600"
  },
  bannerContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
})

class Quiz extends React.Component {

  state = {
    correctCount: 0,
    wrongCount: 0,
    wrongAnswers: [],
    pointsCount: 0,
    totalPoints: 0,
    totalCount: this.props.navigation.getParam("questions", []).length,
    availableIds: this.props.navigation.getParam("questions", []).map(a => a.id),
    availableQuestions: this.props.navigation.getParam("questions", []),
    activeQuestionId: this.props.navigation.getParam("questions", [])[
                        this.props.navigation.getParam("randomQuestions") ?
                          Math.floor(Math.random() * this.props.navigation.getParam("questions", []).length) : 0
                      ].id,
    minIndex: 0,
    answered: false,
    answerCorrect: false,
    results: false,
    setupData: {}
  }

  bannerError = (e) => {
    //console.log("Banner error (footer): ", e)
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)

    AsyncStorage.getItem('setupData').then((value) => {
      this.setState( (state) => {
        return {
          setupData: JSON.parse(value)
        }
      })
    })
  }

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

  handleBackButton = () => {
    this.props.navigation.navigate("Splash")
    return true
  }

  answer = (correct, id, question) => {
    this.setState(
      state => {
        const nextState = { answered: true, clickedId: id, totalPoints: state.totalPoints + parseInt(question.points)}

        if (correct) {
          nextState.correctCount = state.correctCount + 1
          nextState.pointsCount = state.pointsCount + parseInt(question.points)
          nextState.answerCorrect = true
        } else {
          nextState.wrongCount = state.wrongCount + 1
          nextState.answerCorrect = false,
          nextState.wrongAnswers = state.wrongAnswers
          nextState.wrongAnswers.push(
            { question: question.question,
              id: question.id,
              clicked: id,
              answers: question.answers
            }
          )
        }

        return nextState
      },
      () => {
        setTimeout(() => this.nextQuestion(), correct ? 750 : 3000)
      }
    )
  }

  nextQuestion = () => {

    const updatedIndexes = this.state.availableIds.filter( item => item != this.state.activeQuestionId)
    const updatedQuestions = this.state.availableQuestions.filter( item => updatedIndexes.indexOf(item.id) > -1)
    const nextId = this.props.navigation.getParam("randomQuestions") ?
                    updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)] :
                    updatedIndexes[this.state.minIndex]
    let resultsShow = (this.state.timer <= 1 || (this.state.correctCount+this.state.wrongCount) == this.state.totalCount) ? true : false

    if (!updatedIndexes.length) {
      this.props.navigation.navigate("Results", {
        results: {
          isExam: false,
          isWrong: this.props.navigation.getParam("isWrong"),
          total: this.state.totalCount,
          correct: this.state.correctCount,
          wrong: this.state.wrongCount,
          points: this.state.pointsCount,
          totalPoints: this.state.totalPoints,
          wrongAnswers: this.state.wrongAnswers
        }
      })

    } else {

      this.setState( (state) => {
        return {
          availableIds: updatedIndexes,
          availableQuestions: updatedQuestions,
          minIndex: this.state.minIndex >= updatedIndexes.length - 1 ? 0 : this.state.minIndex,
          activeQuestionId: nextId,
          answered: false,
          results: resultsShow
        }
      })
    }
  }

  jumpTo = (questionId, itemIndex) => {
    if(itemIndex) {
      this.setState( (state) => {
        return {
          activeQuestionId: questionId,
          minIndex: itemIndex-1
        }
      })
    }
  }

  render() {
    const questions = this.props.navigation.getParam("questions", [])
    const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0]

    return (
      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
        <View style={styles.box}>
          <View style={styles.scrollView}>
            <ScrollView style={ styles.container } >
              {!this.state.results ?
              <SafeAreaView style={styles.safearea}>
                <View>
                  <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: this.state.clickedId, answered: this.state.answered, isCorrect: answer.correct}}
                        onPress={() => this.answer(answer.correct, answer.id, question)}
                      />
                    ))}
                  </ButtonContainer>
                </View>

                <Text style={styles.text}>
                  {`${this.state.correctCount+this.state.wrongCount}/${this.state.totalCount}`}
                </Text>

                <View style={styles.dropdownContainer}>

                  <Picker
                    style={styles.dropdown}
                    itemStyle={styles.dropdownItem}
                    onValueChange={(itemValue, itemIndex) => this.jumpTo(itemValue, itemIndex)}
                  >
                    <Picker.Item key={`itemPlaceholder`} label={texts.changeQuestion} value={0} />
                    {this.state.availableQuestions.map( (item, index) => (
                      <Picker.Item key={`item${item.id}`} label={`${item.id} - ${item.question}`} value={item.id} />
                    ))}
                  </Picker>

                </View>

              </SafeAreaView>
              : <SafeAreaView></SafeAreaView>}

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


        </View>
      </ImageBackground>
    )
  }
}

export default Quiz