Merge branch 'main' of https://github.com/zimmj/certifever-front-end

zimmj · Oct 29, 2023 · 7b45dd0 · 7b45dd0
2 parents 77f37c6 + c6fd35f
commit 7b45dd0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,18 +1,57 @@
-import React from 'react';
+import React, {useState} from 'react';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import logo from './logo.svg';
 import baselhack from './assests/images/logohack.png';
 import './App.css';
 import { QuestionCard } from './component/question-card';
 import { UserForm } from './component/user-form';
+import Language from './components/Language';
+import Difficulty from './components/Difficulty';
+import Questions from './components/Questions';
+
 
 const App: React.FunctionComponent = () => {
+  const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
+  const [selectedDifficulty, setSelectedDifficulty] = useState<string | null>(
+    null
+  );
+  const [apiUrl, setApiUrl] = useState<string | null>(null);
+
+  const handleLanguageSelect = (language: string) => {
+    setSelectedLanguage(language);
+  };
+
+  const handleDifficultySelect = (difficulty: string) => {
+    setSelectedDifficulty(difficulty);
+
+    // difficulty lvl depending on users choice
+    if (difficulty === 'Beginner') {
+      setApiUrl('http://localhost:3000/expert.json');
+    } else if (difficulty === 'Advanced') {
+      setApiUrl('http://localhost:3000/advanced.json');
+    } else if (difficulty === 'Expert') {
+      setApiUrl('https://www.api.org/sda125');
+    }
+  };
   return (
     <body>
       <header className="bg-neutral">
         <img src={baselhack} alt="Logo HackBasel" className="App-logo" />
         <div className="title"> Certifever help </div>
       </header>
-
+      <div className="App">
+      {!selectedLanguage ? (
+        <Language onSelectLanguage={handleLanguageSelect} />
+      ) : !selectedDifficulty ? (
+        <Difficulty onSelectDifficulty={handleDifficultySelect} />
+      ) : apiUrl ? (
+        <Questions apiUrl={apiUrl} />
+      ) : (
+        <div>
+          <h1>Uploading...</h1>
+        </div>
+      )}
+    </div>
       <div className="bg-white my-5 w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <UserForm onFormSubmit={(formData) => console.log(formData)}></UserForm>
         <main className=" md:w-2/3 lg:w-3/4 px-5 py-40">

diff --git a/src/components/Questions.tsx b/src/components/Questions.tsx
@@ -92,7 +92,7 @@ const Questions: React.FC<QuestionsProps> = ({ apiUrl }) => {
           {isAnswered && (
             <div>
               <p>
-                Correct:{' '}
+                Correct Response is:{' '}
                 {
                   questions[currentQuestionIndex].options[
                     questions[currentQuestionIndex].correct_answer