Update components/MathQuizApp.tsx

components/MathQuizApp.tsx

@@ -3,10 +3,20 @@
 import { useState } from 'react';
 import { Check, X, Calculator } from 'lucide-react';
 
-const operations = ['+', '-', '*', '/'];
-const difficulties = ['easy', 'medium', 'hard'];
+const operations = ['+', '-', '*', '/'] as const;
+type Operation = typeof operations[number];
 
-const generateQuestion = (difficulty) => {
+const difficulties = ['easy', 'medium', 'hard'] as const;
+type Difficulty = typeof difficulties[number];
+
+interface Question {
+  num1: number;
+  num2: number;
+  operation: Operation;
+  answer: number;
+}
+
+const generateQuestion = (difficulty: Difficulty): Question => {
   const operation = operations[Math.floor(Math.random() * operations.length)];
   let num1 = 0;
   let num2 = 0;
@@ -48,13 +58,17 @@ const generateQuestion = (difficulty) => {
   };
 };
 
-const CalculatorComponent = ({ onClose }) => {
+interface CalculatorComponentProps {
+  onClose: () => void;
+}
+
+const CalculatorComponent: React.FC<CalculatorComponentProps> = ({ onClose }) => {
   const [display, setDisplay] = useState('0');
-  const [firstOperand, setFirstOperand] = useState(null);
-  const [operator, setOperator] = useState(null);
+  const [firstOperand, setFirstOperand] = useState<number | null>(null);
+  const [operator, setOperator] = useState<string | null>(null);
   const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false);
 
-  const inputDigit = (digit) => {
+  const inputDigit = (digit: string) => {
     if (waitingForSecondOperand) {
       setDisplay(digit);
       setWaitingForSecondOperand(false);
@@ -81,7 +95,7 @@ const CalculatorComponent = ({ onClose }) => {
     setWaitingForSecondOperand(false);
   };
 
-  const calculate = (firstOp, secondOp, op) => {
+  const calculate = (firstOp: number, secondOp: number, op: string): number | string => {
     switch (op) {
       case '+': return firstOp + secondOp;
       case '-': return firstOp - secondOp;
@@ -91,7 +105,7 @@ const CalculatorComponent = ({ onClose }) => {
     }
   };
 
-  const performOperation = (nextOperator) => {
+  const performOperation = (nextOperator: string) => {
     const inputValue = parseFloat(display);
     
     if (nextOperator === '=') {
@@ -108,7 +122,7 @@ const CalculatorComponent = ({ onClose }) => {
       } else if (operator) {
         const result = calculate(firstOperand, inputValue, operator);
         setDisplay(String(result));
-        setFirstOperand(result);
+        setFirstOperand(typeof result === 'number' ? result : null);
       }
       
       setWaitingForSecondOperand(true);
@@ -154,16 +168,16 @@ const CalculatorComponent = ({ onClose }) => {
   );
 };
 
-const MathQuizApp = () => {
-  const [question, setQuestion] = useState(generateQuestion('easy'));
+const MathQuizApp: React.FC = () => {
+  const [question, setQuestion] = useState<Question>(generateQuestion('easy'));
   const [userAnswer, setUserAnswer] = useState('');
   const [result, setResult] = useState('');
   const [score, setScore] = useState(0);
   const [wrongAnswers, setWrongAnswers] = useState(0);
-  const [difficulty, setDifficulty] = useState('easy');
+  const [difficulty, setDifficulty] = useState<Difficulty>('easy');
   const [showCalculator, setShowCalculator] = useState(false);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     
     // Parse the user answer as a float and check against the question answer
@@ -184,9 +198,10 @@ const MathQuizApp = () => {
     setQuestion(generateQuestion(difficulty));
   };
 
-  const handleDifficultyChange = (e) => {
-    setDifficulty(e.target.value);
-    setQuestion(generateQuestion(e.target.value));
+  const handleDifficultyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newDifficulty = e.target.value as Difficulty;
+    setDifficulty(newDifficulty);
+    setQuestion(generateQuestion(newDifficulty));
     setScore(0);
     setWrongAnswers(0);
     setResult('');