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

import React, { useEffect, useState, useCallback } from "react";
import {
  View,
  ScrollView,
  StyleSheet,
  Text,
  Image,
  BackHandler,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import AsyncStorage from "@react-native-async-storage/async-storage";
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.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" },
});

const Recap = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const [storeWrongAnswers, setStoreWrongAnswers] = useState([]);

  // Load stored wrong answers
  useEffect(() => {
    AsyncStorage.getItem("storeWrongAnswers").then((value) => {
      if (value) {
        setStoreWrongAnswers(JSON.parse(value));
      }
    });
  }, []);

  const handleBackButton = useCallback(() => {
    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((_, idx) => idx !== currentIndex);
        }
      });

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

    return true;
  }, [navigation, storeWrongAnswers]);


  const showResults = useCallback(() => {
    navigation.navigate("Results", {
      wrongAnswers: wrongAnswers
    })
    return true;
  }, [navigation, storeWrongAnswers]);

  useFocusEffect(
    useCallback(() => {
      const backHandler = BackHandler.addEventListener(
        'hardwareBackPress',
        handleBackButton
      );
      return () => backHandler.remove();
    }, [handleBackButton])
  );


  const questions = route.params?.wrongAnswers || [];

  const currentResults = route.params
  const wrongAnswers = currentResults.wrongAnswers || null
  const percentage = currentResults.total ? (100/currentResults.total) * currentResults.correct : 0
  let resultStyle = ''//currentResults.points >= 80 ? currentResults.points >= 85 ? styles.correct : styles.unsafe : styles.wrong
  let boxStyle = currentResults.points >= 80 ? currentResults.points >= 85 ? styles.boxCorrect : styles.boxUnsafe : styles.boxWrong

  if(!currentResults.isExam) {
    resultStyle = ''//percentage >= 80 ? percentage >= 85 ? styles.correct : styles.unsafe : styles.wrong
    boxStyle = percentage >= 80 ? percentage >= 85 ? styles.boxCorrect : styles.boxUnsafe : styles.boxWrong
  }


    return (
      <View style={styles.container} >
        <View style={styles.headerContainer} >
          <Image source={header} style={styles.header} resizeMode="contain" />
        </View>
        <ScrollView>
          <SafeAreaView style={styles.safearea}>
            <View style={[styles.box, boxStyle]}>
              <Text style={styles.text}>
                <Text style={styles.textLabel}>{`${texts.corrects}: ${currentResults.correct}`}</Text>
              </Text>
              <Text style={styles.text}>
                <Text style={styles.textLabel}>{`${texts.wrongs}: ${currentResults.wrong}`}</Text>
              </Text>
              <Text style={styles.text}>
                <Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text>
              </Text>
              {
                currentResults.points ? (
                  <Text style={styles.text}>
                    <Text style={styles.textLabel}>{`${texts.points}: ${currentResults.points}/${currentResults.totalPoints}`}</Text>
                  </Text>
                ) : null
              }

              {currentResults.isExam ?
                <Text style={[styles.textSmall, resultStyle]}>
                  {currentResults.points >= 80 ? currentResults.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed}
                </Text> : <Text/>
              }
            </View>

            {wrongAnswers.length ?
              <View style={styles.button}>
                <Button
                  color={colors.red_light}
                  text={texts.recap}
                  hasBg={true}
                  onPress={showResults}/>
                <Button
                  isBig={false}
                  hasBg={true}
                  color={colors.white_alpha}
                  text={texts.restart}
                  onPress={handleBackButton}
                />

              </View> :
              <View style={styles.button}>
                <Button
                  isBig={false}
                  hasBg={true}
                  color={colors.white_alpha}
                  text={texts.restart}
                  onPress={handleBackButton}
                />
              </View>
            }
          </SafeAreaView>
        </ScrollView>
      </View>
    )
};

export default Recap;