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

import React, { useCallback } from "react";
import {
  View,
  ScrollView,
  StyleSheet,
  Text,
  Image,
  BackHandler,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useNavigation, useRoute, useFocusEffect } from "@react-navigation/native";

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.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",
  },
  textCode: {
    color: colors.white,
    fontSize: 12,
    textAlign: "center",
    fontWeight: "500",
    paddingTop: 10,
  },
  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" },
});

const RecapTrueFalse = () => {
  const navigation = useNavigation();
  const route = useRoute();

  const handleBackButton = useCallback(() => {
    const tmpQuestions = [];
    let fullQuestions = [];

    examScheme.forEach((elem) => {
      fullQuestions.push(...allQuestions[elem.section]);
    });

    for (let i = 0; i < 10; i++) {
      const index = Math.floor(Math.random() * fullQuestions.length);
      tmpQuestions.push(fullQuestions[index]);
      fullQuestions.splice(index, 1);
    }

    navigation.navigate("Splash", { trueFalseQuestions: tmpQuestions });
    return true;
  }, [navigation]);

  // Attach hardware back button handler
  useFocusEffect(
    useCallback(() => {
      this.backHandler =  BackHandler.addEventListener( 'hardwareBackPress', this.handleBackButton)
      return () => this.backHandler?.remove()
    }, [handleBackButton])
  );

  const questions = route.params.results?.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((q) => (
            <View style={styles.box} key={q.id}>
              <Text style={styles.textCode}>{q.id}</Text>
              <Text style={styles.text}>{q.question}</Text>

              <ButtonContainer>
                {q.answers.map(
                  (ans) =>
                    q.clicked === ans.id && (
                      <Button
                        key={ans.id}
                        text={ans.text}
                        noBorder
                        colorize={{
                          id: ans.id,
                          clicked: q.clicked,
                          answered: true,
                          isCorrect: ans.correct,
                        }}
                      />
                    )
                )}
              </ButtonContainer>
            </View>
          ))}

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

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

export default RecapTrueFalse;