fetch osp_units and osp information about truck

client/src/AppRoutes.js

@@ -1,5 +1,6 @@
-import Truck from './components/Truck';
+import React from 'react';
 import { Route, Routes } from 'react-router-dom';
+import Truck from './components/Truck';
 import App from './App';
 import NotFound from './components/NotFound'
 import QuizGame from './components/QuizGame';
@@ -8,9 +9,6 @@ import AppProvider from './components/AppContext';
 
 
 const AppRoutes = () => {
-
-
-
   return (
     <Routes>
       <Route path='/' element={<App />} />

client/src/components/BottomFPage.jsx

@@ -7,25 +7,10 @@ import {Link} from 'react-router-dom';
 import {useState, useEffect} from 'react';
 import FooterQuiz from './FooterQuiz';
 
+
+
 const BottomFPage = () => {
 
-  const [data, setData] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
-  const url = '/osp-units?prefix=Gdańsk';
- useEffect(() => {
-  fetch(url)
-   .then((response) => {
-      if(!response.ok){
-        throw new Error(
-          `PROBLEM ${response.status}`
-        )
-      }
-      return response;
-   })
-   .then(data => console.log(data))
-   .catch(err => console.log(err.message))
- }, []);
 
   const {unitOsp} = useContext(AppContext);
 
@@ -46,7 +31,7 @@ const BottomFPage = () => {
       
     
       <div className='FirstFooter'>Nie widzisz swojej jednostki? <li className='li-write-to-us'><a className='a-write-to-us' href = '/linkdostrony'> Napisz do nas!</a></li></div>
-      <footer className='footerFirstSite'>@Wszelkie prawa zastrzeżone 2023 Skrytka.app<p className='skrytka-date'>Skrytka 2023</p></footer> 
+      <footer className='footerFirstSite'>&copy;Wszelkie prawa zastrzeżone 2023 Skrytka.app<p className='skrytka-date'>Skrytka 2023</p></footer> 
    
      
      

client/src/components/QuizGame.jsx

@@ -6,8 +6,6 @@ import { EndCorrectAnswer } from './GetImageAndQuestion';
 import Timer from './Timer';
 import FooterQuiz from './FooterQuiz';
 export let link = "";
-console.log(link)
-
 export let endScore = 1;
 
 const NavigationQuiz = ({score}) => {

client/src/components/Result.jsx

@@ -5,8 +5,7 @@ import { SecondMinutes } from './Timer';
 
 import { useNavigate } from 'react-router-dom';
 import Conffetti from './Conffetti';
-import Player from './Sound';
+
-import url from '../style/congratulation.mp3';
 import { link } from './QuizGame';
 import { InformationTrackFromDB } from './Truck';
 const UpdateTrackScore = () => {
@@ -25,17 +24,22 @@ const Result = () => {
   UpdateTrackScore();
   return (
     <>
-    <div className="container">
+      <div className="container">
      
-      <h2 className='congratulationh2'>BRAWO !!!</h2>
+     <h1 className='congratulationh2'>Koniec</h1>
-      <img className='trophy' src="\img\trophy.webp" alt="" />
+     <h2>W quizie uzyskałeś/aś: </h2>
-      <h2 className='endScoreh2'>Twój wynik to: {endScore} / 10</h2>
+
-      <h3>Czas: {SecondMinutes} minut {SecondSeconds} sekund</h3>
+    <h3>{{endScore}/10 < 9 ? "Jesteś szybki.. ale pożar jest szybszy" : "Brawo udało ci się ugasić pożar"}</h3>
-      <button id = "resultButton" className='NextQuestionButton' onClick = {() => navigate(-1)}>Zagraj jeszcze raz</button>
+     <button id = "resultButton" className='NextQuestionButton' onClick = {() => navigate(-1)}>Zagraj jeszcze raz</button>
-      <button id = "resultButton" className='NextQuestionButton'onClick={() => navigate('/')}>Wróć do strony głównej</button>
+     <button id = "resultButton1" className='NextQuestionButton'onClick={() => navigate('/')}>Wróć do strony głównej</button>
-      <Conffetti/>
+
-      <Player url = {url}/>
+     <h2>Twój czas wyniósł: {SecondMinutes}:{SecondSeconds} </h2>
-    </div>
+     <h2>Łącznie udało ci się zdobyć: {endScore}/10</h2>
+     <h2>Roznieć zapał, rozwiązuj quizy, i podziel się wynikiem ze znajomymi</h2>
+   
+     <Conffetti/>
+     
+   </div>
 
 
  

client/src/components/SelectBox.jsx

@@ -1,4 +1,4 @@
-import React, {useContext, useState ,useRef} from 'react';
+import React, {useContext, useState ,useRef, useEffect} from 'react';
 import { AppContext } from './AppContext';
 const SearchBox = () => {
 
@@ -7,10 +7,27 @@ const SearchBox = () => {
   const [value, setValue] = useState("");
   const inputSearchRef = useRef(true);
 
+ 
+
   const handleChangeInput = (e) => {
-    setIsContainerActive(true);
+    if(e.target.value === "") return
-    const tasks = localization.filter(localization => localization.toLowerCase().includes(e.target.value.toLowerCase()));
+      fetch(`/osp-units?locality=${e.target.value}`)
-      setValue(tasks); 
+        .then(data => data.json())
+        .then(data1=> {
+          console.log(data1)
+          data1.map(locality => {
+              console.log(locality.locality);
+              let localityArray = [];
+              localityArray.push(locality.locality);
+              let tasks = localityArray.filter(localization => localization.toLowerCase().includes(e.target.value.toLowerCase()));
+              console.log(tasks);
+              setIsContainerActive(true);
+              setValue(tasks); 
+          })
+        })
+   
+
+      
   }
 
   const OptionJSXTag = () => {

client/src/components/Truck.jsx

@@ -1,10 +1,11 @@
 
-import React, {useRef} from 'react';
+import React, {useRef,useEffect} from 'react';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {Link} from 'react-router-dom';
 
 
+
 export let InformationTrackFromDB = [
   {
     img: '../img/fire-truck/track1.jpg',

client/src/style/_Result.scss

@@ -1,10 +1,4 @@
-.trophy {
-  min-width: 450px;
-  min-height: 450px;
-  max-width: 450px;
-  max-height: 450px;
 
-}
 .congratulationh2 {
   font-size: 40px;
   letter-spacing: 3px;
@@ -13,6 +7,12 @@
 
 #resultButton {
   margin-top: 5%;
+  background-color: #d42436;
+}
+#resultButton1 {
+  margin-top: 5%;
+  background-color: #c6c4c4;
+  color: black;
 }
 
 .endScoreh2 {