{"size": 2774, "ext": "js", "max_stars_repo_path": "it-trends-quiz/src/App.js", "max_stars_repo_name": "SaschaWebDev/it-trends-quiz", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "it-trends-quiz/src/App.js", "max_issues_repo_name": "SaschaWebDev/it-trends-quiz", "max_issues_repo_issues_event_min_datetime": "2021-05-30T06:57:31.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-30T16:14:31.000Z", "max_forks_repo_path": "it-trends-quiz/src/App.js", "max_forks_repo_name": "SaschaWebDev/it-trends-quiz", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 29.2, "max_line_length": 106, "alphanum_fraction": 0.6222062004}
import React, { useState, useEffect } from "react";

import questions from "./questions";
import IntroSection from "./components/IntroSection";
import QuizSection from "./components/QuizSection";
import ScoreSection from "./components/ScoreSection";
import AnswerSection from "./components/AnswerSection";
import SocialSection from "./components/SocialSection";
import TimesUpSection from "./components/TimesUpSection";

export default function App() {
  const totalTime = 600;
  const [quizStarted, setQuizStarted] = useState(false);
  const [showScore, setShowScore] = useState(false);
  const [showAnswers, setShowAnswers] = useState(false);

  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [timer, setTimer] = useState(totalTime);
  const [shuffleSeed, setShuffleSeed] = useState(0.5 - Math.random());

  const handleAnswerOptionClick = (isCorrect) => {
    if (isCorrect) {
      setScore(score + 1);
    }

    const nextQuestion = currentQuestion + 1;
    if (nextQuestion < questions.length) {
      setCurrentQuestion(nextQuestion);
    } else {
      setShowScore(true);
    }
  };

  const handleStartQuiz = () => {
    setQuizStarted(true);
  };

  const handleRestartQuiz = () => {
    setQuizStarted(false);
    setShowScore(false);
    setShowAnswers(false);
    setCurrentQuestion(0);
    setScore(0);
    setTimer(totalTime);
  };

  useEffect(() => {
    if (quizStarted && !showScore && !showAnswers && timer > 0) {
      setTimeout(() => {
        setTimer(timer - 1);
      }, 1000);
    }
  });

  useEffect(() => {
    setShuffleSeed(0.5 - Math.random());
  }, []);

  return (
    <div>
      <div className="flex m-auto flex-col p-6 gap-5 bg-primary-800 rounded-lg z-10 sm:w-400 w-full mb-4">
        {timer === 0 ? (
          <TimesUpSection handleCallBackRestartQuiz={handleRestartQuiz} />
        ) : showAnswers ? (
          <AnswerSection
            questions={questions}
            handleCallBackRestartQuiz={handleRestartQuiz}
          />
        ) : !quizStarted ? (
          <IntroSection handleCallBackStartQuiz={handleStartQuiz} />
        ) : showScore ? (
          <ScoreSection
            score={score}
            timer={timer}
            totalTime={totalTime}
            questionLength={questions.length}
            handleCallBackShowAnswers={setShowAnswers}
            handleCallBackRestartQuiz={handleRestartQuiz}
          />
        ) : (
          <QuizSection
            currentQuestion={currentQuestion}
            questions={questions}
            timer={timer}
            shuffleSeed={shuffleSeed}
            handleCallBackAnswerOptionClick={handleAnswerOptionClick}
          />
        )}
      </div>
      <SocialSection />
    </div>
  );
}
