Make call API 2

client/public/img/arrow-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#f5f6fa" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>

client/src/components/BottomFPage.jsx

@@ -3,14 +3,9 @@ import React, {useContext} from 'react';
 import { AppContext } from './AppContext';
 
 import {Link} from 'react-router-dom';
-import {useState, useEffect} from 'react';
-import FooterQuiz from './FooterQuiz';
-
-
 
 const BottomFPage = () => {
 
-
   const {unitOsp} = useContext(AppContext);
 
 
@@ -22,18 +17,10 @@ const BottomFPage = () => {
  </Link>
  </div> 
    : "";
-
  return (
   <>
       {buttonShow}
 
-      
-    
-   
-   
-     
-     
- 
   </>
  ) 
 }

client/src/components/QuizGame.jsx

@@ -1,5 +1,5 @@
 import {useNavigate} from 'react-router-dom';
-import React, {useState, useContext} from 'react';
+import React, {useState} from 'react';
 import {QuizGetQuestion } from './GetQuestion';
 import { QuizGetImage } from './GetImageAndQuestion';
 import AppProvider, { AppContext } from './AppContext';
@@ -14,7 +14,7 @@ export let endScore = 0;
 
 const NavigationQuiz = ({score,buttonState}) => {
   
-  console.log(endScore)
+
 
  
   link = /[^/]*$/.exec(`${window.location.href}`)[0];
@@ -53,7 +53,7 @@ const QuizGame = () => {
 
   const ButtonNextQuestionClick = (e) => {
     setScore(score + 1);
-    console.log(Number(e.target.name), EndCacheId)
+
     if(score === 9) 
       navigate("/result");
      else if (Number(e.target.name) === EndCacheId)

client/src/components/Result.jsx

@@ -8,9 +8,10 @@ import Conffetti from './Conffetti';
 
 import  {  CircularProgressbar ,  buildStyles  }  from  'react-circular-progressbar' ;
 import 'react-circular-progressbar/dist/styles.css';
-export let points = endScore;
+
 const Result = () => {
-  console.log(TruckId, SecondSeconds, endScore)
+  
+
 
     fetch('/quiz-results', {
   method: 'POST',

client/src/components/Timer.jsx

@@ -1,38 +1,27 @@
-import React, {useState, useEffect, useContext} from 'react';
-
-
 export let SecondSeconds = 1;
 export let SecondMinutes = 0;
 
+import React, { useState, useEffect } from 'react';
 
 const Timer = () => {
-  const [seconds, setSeconds] = useState(0);
-  const [minutes, setMinutes] = useState(0);
+  const [time, setTime] = useState(0);
+  let seconds = Math.floor(time % 60);
+  let minutes = Math.floor(time / 60);
 
   useEffect(() => {
-        let timer =   setInterval(() => {
+    const intervalId = setInterval(() => {
       SecondSeconds = seconds;
       SecondMinutes = minutes
-          setSeconds(seconds + 1);
-
-          if(seconds === 59) {
-                setMinutes(minutes + 1);
-                setSeconds(0);
-          }
-      
+      setTime(time + 1);
     }, 1000);
-      
-      
-        return () => clearInterval(timer);
-      });
-
-    
-  
-
+    return () => clearInterval(intervalId);
+  }, [time]);
 
   return (
+    <div>
        <h1 className='timerTime'>{minutes < 10 ? "0"+minutes: minutes} : {seconds < 10 ? "0"+seconds: seconds}</h1>
-    )
-}
+    </div>
+  );
+};
 
 export default Timer;

client/src/components/Truck.jsx

@@ -1,12 +1,9 @@
 
-import React, {useRef,useEffect,useContext} from 'react';
+import React, {useRef,useEffect} from 'react';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {Link} from 'react-router-dom';
-import { AppContext } from './AppContext';
 import { idUnits } from './SelectBox';
-
-
 export let TruckId = "";
 
 
@@ -36,18 +33,24 @@ const Truck = () => {
 
 
 
-
   const BoxComponent = () => {
+
+
+
+
+    
     let [truck, setTruck] = useState('');
     useEffect(()=> {
+
+      
       fetch(`/fire-trucks?osp-unit=${idUnits}`)
       .then(response => response.json())
       .then(data => {
      setTruck(data.map(({ID,name,imagePath,avgPercent},index) => {
           TruckId = ID;
-
-          let firstAvgPercent = avgPercent * 10;
-          let SecondAvgPercent = avgPercent * 100;
+          let percent = avgPercent.toString().slice(0,3);
+          let firstAvgPercent = percent  * 10;
+          let SecondAvgPercent = percent * 100;
 
       return (
         <>