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

import React from "react";
import { View, ScrollView, StyleSheet, Text, Image, BackHandler } from "react-native";
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 { colors, texts, examScheme } 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 allQuestions = {
  aerodynamics: aerodynamicsQuestions,
  firstAid: firstAidQuestions,
  flightSafety: flightSafetyQuestions,
  instruments: instrumentsQuestions,
  legislation: legislationQuestions,
  materials: materialsQuestions,
  meteorology: meteorologyQuestions,
  physiopathology: physiopathologyQuestions,
  pilotingTechniques: pilotingTechniquesQuestions
};

const header = require("../assets/header.png");

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: 200 },
  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 },
  bannerContainer: { flex: 1, alignItems: "center", justifyContent: "center" }
});

class Recap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      storeWrongAnswers: []
    };
  }

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

    AsyncStorage.getItem('storeWrongAnswers').then(value => {
      if (value) {
        this.setState({ storeWrongAnswers: JSON.parse(value) });
      }
    });
  }

  componentWillUnmount() {
    this.backHandler?.remove();
  }

  handleBackButton = () => {
    const tmpQuestions = [];

    AsyncStorage.getItem('setupData').then(value => {
      const 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((_, index) => index !== currentIndex);
        }
      });

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

    return true;
  }

  render() {
    const questions = this.props.route.params?.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 => (
              <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 => (
                    <Button
                      key={answer.id}
                      text={answer.text}
                      colorize={{ id: answer.id, clicked: question.clicked, answered: true, isCorrect: answer.correct }}
                    />
                  ))}
                </ButtonContainer>
              </View>
            ))}

            <View style={{ marginTop: 20 }}>
              <Button
                color={colors.white_alpha2}
                hasShadow
                hasBg
                text={texts.restart}
                onPress={this.handleBackButton}
              />
            </View>
          </SafeAreaView>

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

export default Recap;