improvement(app): typescript

Author: ducthang-vu-interlogica

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/.idea
+/.code

package-lock.json

@@ -11,13 +11,18 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@types/jest": "^26.0.22",
+    "@types/node": "^14.14.39",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "axios": "^0.21.1",
     "gh-pages": "^3.1.0",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-scripts": "3.4.3",
+    "typescript": "^4.2.4",
     "underscore": "^1.10.2"
   },
   "scripts": {

package.json

@@ -16,11 +16,11 @@ function App() {
 
   return (
     <div className="app flex">
-        <Header></Header>
+        <Header/>
         <main>
-          { questions.length ? <MainContent questions={questions}></MainContent> : <Spinner></Spinner> }
+          { questions.length ? <MainContent questions={questions}/> : <Spinner/> }
         </main>
-        <Footer></Footer>
+        <Footer/>
     </div>
   );
 }

src/App.jsx src/App.tsxsrc/App.jsx renamed to src/App.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
-import '../style/FinalResult.scss'
-import {Button} from '@material-ui/core';
+import '../style/FinalResult.scss';
+import { Button } from '@material-ui/core';
 
-function FinalResult(props) {
-    const {score, total} = props.score
+interface FinalResultProps {
+    score: {
+        score: number,
+        total: number
+    }
+}
+
+function FinalResult(props: FinalResultProps) {
+    const { score, total } = props.score;
     return (
         <div className="final-result">
             <div className="container">
@@ -16,7 +23,7 @@ function FinalResult(props) {
                 </Button>
             </div>
         </div>
-    )
+    );
 }
 
-export default FinalResult
+export default FinalResult;

src/components/FinalResult.jsx src/components/FinalResult.tsxsrc/components/FinalResult.jsx renamed to src/components/FinalResult.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import QuestionBox from './QuestionBoxInterface';
+import FinalResult from '../components/FinalResult';
+import '../style/MainContent.scss';
+import { MobileStepper } from '@material-ui/core';
+
+
+interface MainContentInterface {
+    questions: {
+        question: string,
+        correct_answer: string,
+        incorrect_answers: string
+    }[]
+}
+
+
+function MainContent({ questions }: MainContentInterface) {
+    const [currentQuestion, setCurrentQuestion] = useState(0);
+    const counter = () => `${currentQuestion + 1}/${questions.length}`;
+    const [score, setScore] = useState(0);
+    const answerQuestion = (newScore: number): void => {
+        setScore(score + newScore);
+        setCurrentQuestion(currentQuestion + 1);
+    };
+
+    return (
+        <div className="main-content">
+            <div className="container">
+                {currentQuestion < questions.length ?
+                    <React.Fragment>
+                        <MobileStepper
+                            variant="progress"
+                            steps={10}
+                            position="static"
+                            activeStep={currentQuestion}
+                            className="stepper"
+                            backButton=""
+                            nextButton=""
+                        />
+                        <h2>Question {counter()} </h2>
+                        <QuestionBox
+                            question={questions[currentQuestion]}
+                            answerQuestion={answerQuestion}>
+                        </QuestionBox>
+                    </React.Fragment> :
+                    <FinalResult score={{ score, total: questions.length }}/>
+                }
+            </div>
+        </div>
+    );
+}
+
+export default MainContent;