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

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

import { Button, ButtonContainer } from "../components/Button";
import { Banner } from "../components/Banner";
import { colors, texts } from "../components/Variables";
import { examQuestions } from "../components/ExamQuestions";
import { trueFalseQuestions } from "../components/TrueFalseQuestions";

const screen = Dimensions.get("window");
const header = require("../assets/header.png");
const maxTime = 0; // 10
let interval = null;

const styles = StyleSheet.create({
  container: { backgroundColor: colors.dark_blue, flex: 1 },
  safearea: { flex: 1, justifyContent: "space-between", paddingHorizontal: 20 },
  headerContainer: { marginTop: 20, alignItems: "center", justifyContent: "center", width: "100%", height: 150 },
  header: { width: "100%" },
  bannerContainer: { flex: 1, alignItems: "center", justifyContent: "center" }
});

class Splash extends React.Component {
  constructor(props) {
    super(props);

    const params = props.route.params || {};

    this.state = {
      bannerExpanded: true,
      timer: maxTime,
      storeWrongAnswers: params.storeWrongAnswers || [],
      setupData: {}
    };
  }

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

  componentDidMount() {
    // Save subscription for removal later
    this.backHandler =  BackHandler.addEventListener( 'hardwareBackPress', this.handleBackButton)

    AsyncStorage.getItem('storeWrongAnswers').then((value) => {
      if (!value) AsyncStorage.setItem('storeWrongAnswers', JSON.stringify([]));

      AsyncStorage.getItem('setupData').then((setup) => {
        if (!setup) AsyncStorage.setItem('setupData', JSON.stringify({}));

        this.setState({
          storeWrongAnswers: value ? JSON.parse(value) : [],
          setupData: setup ? JSON.parse(setup) : {}
        });
      });
    });
  }

  componentWillUnmount() {
    // Remove subscription correctly
    this.backHandler?.remove();

    if (interval) clearInterval(interval);
  }


  handleBackButton = () => {
    Alert.alert(
      texts.exit,
      texts.exitQuestion,
      [
        { text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
        { text: 'Si', onPress: () => BackHandler.exitApp() },
      ],
      { cancelable: false }
    );
    return true;
  }

  startTimer = () => {
    if (this.state.timer === maxTime) {
      interval = setInterval(() => {
        this.setState((state) => ({ timer: state.timer - 1 }));
      }, 1000);
    }

    if (this.state.timer < 1 && interval) {
      clearInterval(interval);
      interval = null;
      setTimeout(() => this.setState({ bannerExpanded: false }), 500);
    }
  }

  render() {
    const { storeWrongAnswers } = this.state;
    this.startTimer();

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

        <SafeAreaView style={styles.safearea}>
          <View>
            <ButtonContainer isBoxed={false}>
              <Button
                text={texts.section_quizzes}
                subtitle={`(${texts.section_quizzes_subtitle})`}
                isBig={false}
                hasBg
                noPadding={false}
                hasShadow
                noBorder
                color={colors.white_alpha}
                onPress={() => this.props.navigation.navigate("QuizIndex", {
                  title: texts.section_quizzes,
                  color: colors.white_alpha
                })}
              />

              <Button
                text={texts.exam}
                subtitle={`(${texts.exam_simulation})`}
                isBig={false}
                hasBg
                noPadding={false}
                hasShadow
                noBorder
                color={colors.white_alpha}
                onPress={() => this.props.navigation.navigate("Exam", {
                  title: texts.exam,
                  questions: this.props.route.params?.examQuestions || examQuestions,
                  color: colors.white_alpha
                })}
              />

              {storeWrongAnswers.length ? (
                <Button
                  text={texts.wrong_review}
                  subtitle={`(${storeWrongAnswers.length} ${texts.wrong_title})`}
                  isBig={false}
                  hasBg
                  noPadding={false}
                  hasShadow
                  noBorder
                  color={colors.white_alpha}
                  onPress={() => this.props.navigation.navigate("Quiz", {
                    title: texts.wrong_review,
                    questions: storeWrongAnswers,
                    isWrong: true,
                    color: colors.blue
                  })}
                />
              ) : null}

              <Button
                text={texts.trueFalse}
                subtitle={`(${texts.trueFalseSubtitle})`}
                isBig={false}
                hasBg
                noPadding={false}
                hasShadow
                noBorder
                color={colors.white_alpha}
                onPress={() => this.props.navigation.navigate("TrueFalse", {
                  title: texts.trueFalse,
                  questions: this.props.route.params?.trueFalseQuestions || trueFalseQuestions,
                  color: colors.white_alpha
                })}
              />

              <Button
                text={texts.dictionaryTitle}
                subtitle={`(${texts.dictionarySubtitle})`}
                isBig={false}
                hasBg
                noPadding={false}
                hasShadow
                noBorder
                color={colors.white_alpha}
                onPress={() => this.props.navigation.navigate("Dictionary")}
              />

              <Button
                text={texts.setupTitle}
                subtitle={`(${texts.setupSubtitle})`}
                isBig={false}
                hasBg
                noPadding={false}
                hasShadow
                noBorder
                color={colors.white_alpha}
                onPress={() => this.props.navigation.navigate("Setup")}
              />

              <Button
                text={texts.infoTitle}
                isBig={false}
                hasBg
                noPadding={false}
                hasShadow
                noBorder
                color={colors.white_alpha}
                onPress={() => this.props.navigation.navigate("Info")}
              />

              <Button
                text={texts.exit}
                isBig={false}
                hasBg
                noPadding={false}
                hasShadow
                noBorder
                color={colors.white_alpha2}
                onPress={this.handleBackButton}
              />
            </ButtonContainer>
          </View>
        </SafeAreaView>

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

export default Splash;