Merge pull request #85 from Arquisoft/time-game

set time to questions, uncomment tests and new animation
Arquisoft · Apr 2, 2024 · 05599e6 · 05599e6
2 parents 75ce28f + 42ec5dc
commit 05599e6
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 57 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -5,47 +5,47 @@ on:
     types: [published]
 
 jobs:
-  # unit-tests:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #   - uses: actions/checkout@v4
-  #   - uses: actions/setup-node@v4
-  #     with:
-  #       node-version: 20
-  #   - run: npm --prefix users/authservice ci
-  #   - run: npm --prefix users/userservice ci
-  #   - run: npm --prefix gatewayservice ci
-  #   - run: npm --prefix webapp ci
-  #   - run: npm --prefix users/authservice test -- --coverage
-  #   - run: npm --prefix users/userservice test -- --coverage
-  #   - run: npm --prefix gatewayservice test -- --coverage
-  #   - run: npm --prefix webapp test -- --coverage
-  #   - name: Analyze with SonarCloud
-  #     uses: sonarsource/sonarcloud-github-action@master
-  #     env:
-  #         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  #         SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-  # e2e-tests:
-  #   needs: [unit-tests]
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #   - uses: actions/checkout@v4
-  #   - uses: actions/setup-node@v4
-  #     with:
-  #       node-version: 20
-  #   - run: npm --prefix users/authservice install
-  #   - run: npm --prefix users/userservice install
-  #   - run: npm --prefix gatewayservice install
-  #   - run: npm --prefix webapp install
-  #   - run: npm --prefix webapp run build
-  #   - run: npm --prefix webapp run test:e2e
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+    - run: npm --prefix users/authservice ci
+    - run: npm --prefix users/userservice ci
+    - run: npm --prefix gatewayservice ci
+    - run: npm --prefix webapp ci
+    - run: npm --prefix users/authservice test -- --coverage
+    - run: npm --prefix users/userservice test -- --coverage
+    - run: npm --prefix gatewayservice test -- --coverage
+    - run: npm --prefix webapp test -- --coverage
+    - name: Analyze with SonarCloud
+      uses: sonarsource/sonarcloud-github-action@master
+      env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+  e2e-tests:
+    needs: [unit-tests]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+    - run: npm --prefix users/authservice install
+    - run: npm --prefix users/userservice install
+    - run: npm --prefix gatewayservice install
+    - run: npm --prefix webapp install
+    - run: npm --prefix webapp run build
+    - run: npm --prefix webapp run test:e2e
   docker-push-webapp:
     name: Push webapp Docker Image to GitHub Packages
     runs-on: ARM64
     permissions:
       contents: read
       packages: write
-    #needs: [e2e-tests]
+    needs: [e2e-tests]
     steps:
     - uses: actions/checkout@v4
     - name: Publish to Registry
@@ -65,7 +65,7 @@ jobs:
             permissions:
               contents: read
               packages: write
-            # needs: [e2e-tests]
+            needs: [e2e-tests]
             steps:
             - uses: actions/checkout@v4
             - name: Publish to Registry
@@ -82,7 +82,7 @@ jobs:
     permissions:
       contents: read
       packages: write
-    #needs: [e2e-tests]
+    needs: [e2e-tests]
     steps:
     - uses: actions/checkout@v4
     - name: Publish to Registry
@@ -99,7 +99,7 @@ jobs:
     permissions:
       contents: read
       packages: write
-    #needs: [e2e-tests]
+    needs: [e2e-tests]
     steps:
     - uses: actions/checkout@v4
     - name: Publish to Registry
@@ -116,7 +116,7 @@ jobs:
     permissions:
       contents: read
       packages: write
-    #needs: [e2e-tests]
+    needs: [e2e-tests]
     steps:
     - uses: actions/checkout@v4
     - name: Publish to Registry

diff --git a/webapp/src/components/AddUser.jsx b/webapp/src/components/AddUser.jsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 import { Link } from 'react-router-dom';
-
+import { useNavigate } from 'react-router-dom';
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
 const AddUser = () => {
@@ -13,6 +13,7 @@ const AddUser = () => {
   const [cpassword, setcPassword] = useState('');
   const [error, setError] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
+  const { navigate } = useNavigate();
 
   const addUser = async () => {
     try {
@@ -22,6 +23,7 @@ const AddUser = () => {
       }
       await axios.post(`${apiEndpoint}/adduser`, { username, email, password });
       setOpenSnackbar(true);
+      navigate('/login');
     } catch (error) {
       setError(error.response.data.error);
     }

diff --git a/webapp/src/components/Question.jsx b/webapp/src/components/Question.jsx
@@ -2,15 +2,36 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 
 const Question = (props) => {
-    const apiEndpoint =  process.env.REACT_APP_API_ENDPOINT ||'http://localhost:8000';
+    const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
     const [question, setQuestion] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [counter, setCounter] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCounter((prevCounter) => prevCounter + 0.4);
+        }, 40);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    useEffect(() => {
+        if (counter >= 100) {
+            setLoading(true);
+            fetchQuestion();
+        }
+    }, [counter]);
+
+
 
     const fetchQuestion = async () => {
         try {
+
             const res = await axios.get(`${apiEndpoint}/${props.type}/${props.category}/question`);
             setQuestion(res.data);
             setLoading(false);
+            setCounter(0);
+
         } catch (error) {
             console.error('Error fetching question:', error);
         }
@@ -19,10 +40,11 @@ const Question = (props) => {
     const answerQuestion = async (answer) => {
         try {
             setLoading(true);
-            const result = await axios.post(`${apiEndpoint}/${props.type}/answer`, {answer});
+            const result = await axios.post(`${apiEndpoint}/${props.type}/answer`, { answer });
             const res = await axios.get(`${apiEndpoint}/${props.type}/${props.category}/question`);
             setQuestion(res.data);
             setLoading(false);
+            setCounter(0);
 
         } catch (error) {
             console.log(error);
@@ -31,25 +53,33 @@ const Question = (props) => {
 
     useEffect(() => {
         fetchQuestion();
-      }, []);
+
+    }, []);
 
     return (
         <div className="bg-slate-50 shadow-lg rounded-md p-4 mx-auto max-w-2xl mt-16">
-            { loading ? (
-                <h1 className="font-bold text-2xl text-gray-800 pl-8">Loading...</h1>
-                ) : (
-                    <>
+            {loading ? (
+                <h1 className="font-bold text-2xl text-gray-800 pl-8"><div class="flex justify-center items-center h-screen">
+                    <div class="rounded-full h-20 w-20 bg-violet-800 animate-ping"></div>
+                </div></h1>
+            ) : (
+                <>
+
                     <h1 className="font-bold text-3xl text-gray-800 pl-8">{question.question}</h1>
+                    <div class="relative h-5 rounded-full overflow-hidden bg-gray-300 mt-20 mx-10">
+                        <div class="absolute top-0 bottom-0 left-0 rounded-full bg-gradient-to-r from-pink-500 to-purple-500"
+                            style={{ width: counter + "%" }}></div>
+                    </div>
                     <div className="grid grid-cols-2 mt-10 item">
-                    {question.images.map( image => (
-                        <button className="transition-transform transform-gpu hover:scale-105 rounded-xl mx-8 my-8 max-h-52 max-w-80">
-                            <img src={image} alt='Loading image...' className="rounded-lg object-contain shadow-md"
-                                onClick={() => answerQuestion(image)}></img>
-                        </button>
-                    ))}
+                        {question.images.map(image => (
+                            <button className="transition-transform transform-gpu hover:scale-105 rounded-xl mx-8 my-8 max-h-52 max-w-80">
+                                <img src={image} alt='Loading image...' className="rounded-lg object-contain shadow-md"
+                                    onClick={() => answerQuestion(image)}></img>
+                            </button>
+                        ))}
                     </div>
-                    </>
-                )}
+                </>
+            )}
         </div>
     )
 };

diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -17,14 +17,14 @@ const store = createStore({
 });
 
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <AuthProvider
      store={store}
      >
       <App />
     </AuthProvider>
 
-  </React.StrictMode>
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function