Quiz page function and notify

thienle210303 · thienle210303 · commit 52f891822d09 · 2025-04-05T11:42:29.000-04:00
diff --git a/front-end/src/components/Chatbot.jsx b/front-end/src/components/Chatbot.jsx
@@ -9,6 +9,7 @@ import {
 import axios from "axios"
 import { script } from './ChatbotScript'
 import { useNavigate } from "react-router-dom"
+import { startWindToast } from "@mariojgt/wind-notify/packages/index.js"
 
 const API_URL = import.meta.env.VITE_API_URL
 
@@ -125,6 +126,7 @@ function Chatbot() {
 
     try {
       // const response = await axios.post(API_URL + '/api/Chatbot/send-message', payload)
+      startWindToast("WARNING!", "Our AI service is currently down", 'warning', 3, 'top')
       // const chatContent = response.data.chatContent
       // const carDescriptions = response.data.carDescriptions
       // const citations = response.data.citations
diff --git a/front-end/src/pages/Quiz.jsx b/front-end/src/pages/Quiz.jsx
@@ -1,15 +1,21 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import axios from 'axios'
+import { startWindToast } from "@mariojgt/wind-notify/packages/index.js"
 
 const API_URL = import.meta.env.VITE_API_URL
 
 const Quiz = () => {
   const navigate = useNavigate()
-
-  const [answers, setAnswers] = useState({})
-  const [inputValue, setInputValue] = useState("")
-  const [showModal, setShowModal] = useState(true)
+  const [answers, setAnswers] = useState({
+    q1: '',
+    q2: '',
+    q3: '',
+    q4: '',
+    q5: '',
+    q6: '',
+    q7: ''
+  })
   const [recommendedCar, setRecommendedCar] = useState(undefined)
   const [showToast, setShowToast] = useState(undefined)
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
@@ -38,33 +44,25 @@ const Quiz = () => {
     9: "feature",
     10: "situation description"
   }
-  const toggleModal = () => {
-    setShowModal(!showModal)
-  }
+
   const handleBack = () => {
     navigate(-1)
   }
 
   const handleSubmit = async () => {
-    setLoading(true)
-    const finalAnswers = {
-      ...answers,
-      [questionKeys[currentQuestionIndex]]: inputValue
-    }
-
-    if (Object.values(finalAnswers).every(answer => answer === "")) {
+    if (Object.values(answers).every(answer => answer === "")) {
       setShowToast({ key: 'error', value: 'Please provide at least 1 answer' })
       setTimeout(() => setShowToast(undefined), 3000)
       return
     }
 
-    setAnswers(finalAnswers)
-    const flatAnswer = Object.entries(finalAnswers)
+    const flatAnswer = Object.entries(answers)
       .filter(([_, value]) => value)
-      .map(([key, value]) => `${key}: ${value}`)
-      .join(", ")
-
-    await sendAIQuery(flatAnswer)
+      .map(([_, value], index) => `${questions[index]} ${value}`)
+      .join("; ")
+    setLoading(true)
+    // await sendAIQuery(flatAnswer)
+    startWindToast("WARNING!", "Our AI service is currently down", 'warning', 3, 'top')
     setLoading(false)
   }
 
@@ -103,22 +101,13 @@ const Quiz = () => {
       .map(([key, value]) => `${key}: ${value}`)
       .join(", ")
 
-    await sendAIQuery(flatAnswer + "but not previous vehicle")
+    // await sendAIQuery(flatAnswer + "but not previous vehicle")
     setLoading(false)
   }
 
   return (
     <div className='container mx-auto items-center space-y-2'>
-      {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="bg-white text-gray-900 p-6 rounded-lg w-11/12 md:w-1/3 relative shadow-lg">
-            <button onClick={toggleModal} className="absolute top-2 right-2 text-gray-600 text-2xl">&times;</button>
-            <h2 className="text-xl font-bold mb-4 text-blue-900">Here to Help!</h2>
-            <p>Answer a few simple questions, and I'll help you find the perfect car!</p>
-          </div>
-        </div>
-      )}
-      
+
       {loading && (
         <div className="fixed toast toast-center toast-middle z-50">
           <div className={`alert alert-info flex justify-center mx-auto w-fit`}>
@@ -134,141 +123,41 @@ const Quiz = () => {
           </div>
         </div>
       )}
-      
+
       {/*Quiz section*/}
       <div className='flex justify-center items-center'>
         <div className="card bg-base-100 shadow-xl w-11/12 md:w-2/3 lg:w-1/2 border border-blue-900">
           <div className="card-body py-12 px-24">
-            <h2 className="card-title text-center text-2xl font-bold text-blue-500 self-center shadow-sm">
+            <h2 className="card-title text-center text-2xl font-bold text-blue-500 self-center">
               Car Quiz
             </h2>
-              <div className="form-control">
-                {/*First Question*/}
-                <div>
-                  <label className="label">
-                    <span className="label-text text-base font-semibold">{questions[currentQuestionIndex]}</span>
-                  </label>
-                    <div className='flex items-center border rounded-full border-gray-200'>
-                      <span className="pl-4 text-gray-500"></span>
-                        <input
-                          type='text'
-                          value={inputValue}
-                          onChange={(e) => setInputValue(e.target.value)}
-                          className='input border-none w-full focus:outline-none [&::-webkit-inner-spin-button]:appearance-none h-fit'
-                          placeholder='40000'
-                        />  
-                      
-                    </div>
-                </div>
-                {/*Second Question*/}
-                <div>
-                  <label className="label">
-                    <span className="label-text text-base font-semibold">{questions[currentQuestionIndex+1]}</span>
-                  </label>
-                    <div className='flex items-center justify-center space-x-4 py-2'>
-                    <button
-                      onClick={() => setInputValue('new')}
-                      className={`btn btn-sm ${inputValue === 'new' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'} hover:bg-blue-400 transition duration-300 w-1/4`}
-                    >
-                      new
-                    </button>
-                    <button
-                        onClick={() => setInputValue('used')}
-                        className={`btn btn-sm ${inputValue === 'used' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'} hover:bg-blue-400 transition duration-300 w-1/4`}
-                    >
-                        used
-                    </button>  
-                    </div>
-                </div>
-                {/*Third Question*/}
-                <div>
-                  <label className="label">
-                    <span className="label-text text-base font-semibold">{questions[currentQuestionIndex+2]}</span>
-                  </label>
-                    <div className='flex items-center border rounded-full border-gray-200'>
-                      <span className="pl-4 text-gray-500"></span>
-                        <input
-                          type='text'
-                          value={inputValue}
-                          onChange={(e) => setInputValue(e.target.value)}
-                          className='input border-none w-full focus:outline-none [&::-webkit-inner-spin-button]:appearance-none h-fit'
-                          placeholder='I would like up to 7 people'
-                        />  
-                      
-                    </div>
-                </div>
-                {/*Fourth Question*/}
-                <div>
-                  <label className="label">
-                    <span className="label-text text-base font-semibold">{questions[currentQuestionIndex+3]}</span>
-                  </label>
-                    <div className='flex items-center border rounded-full border-gray-200'>
-                      <span className="pl-4 text-gray-500"></span>
-                        <input
-                          type='text'
-                          value={inputValue}
-                          onChange={(e) => setInputValue(e.target.value)}
-                          className='input border-none w-full focus:outline-none [&::-webkit-inner-spin-button]:appearance-none h-fit'
-                          placeholder='family vacations, school, and road trips'
-                        />     
-                    </div>
-                </div>
-                {/*Fifth Question*/}
-                <div>
-                  <label className="label">
-                    <span className="label-text text-base font-semibold">{questions[currentQuestionIndex+4]}</span>
-                  </label>
-                    <div className='flex items-center border rounded-full border-gray-200'>
-                      <span className="pl-4 text-gray-500"></span>
-                        <input
-                          type='text'
-                          value={inputValue}
-                          onChange={(e) => setInputValue(e.target.value)}
-                          className='input border-none w-full focus:outline-none [&::-webkit-inner-spin-button]:appearance-none h-fit'
-                          placeholder='I want a sun roof and lots of seats'
-                        />     
-                    </div>
-                </div>  
-                {/*Sixth Question*/}
-                <div>
-                  <label className="label">
-                    <span className="label-text text-base font-semibold">{questions[currentQuestionIndex+5]}</span>
-                  </label>
-                    <div className='flex items-center border rounded-full border-gray-200'>
-                      <span className="pl-4 text-gray-500"></span>
-                        <input
-                          type='text'
-                          value={inputValue}
-                          onChange={(e) => setInputValue(e.target.value)}
-                          className='input border-none w-full focus:outline-none [&::-webkit-inner-spin-button]:appearance-none h-fit'
-                          placeholder='Avoid high maintenance and poor fuel economy'
-                        />     
-                    </div>
-                </div>
-                {/*Seventh Question*/}
-                <div>
-                  <label className="label">
-                    <span className="label-text text-base font-semibold">{questions[currentQuestionIndex+6]}</span>
-                  </label>
-                    <div className='flex items-center border rounded-full border-gray-200'>
-                      <span className="pl-4 text-gray-500"></span>
-                        <input
-                          type='text'
-                          value={inputValue}
-                          onChange={(e) => setInputValue(e.target.value)}
-                          className='input border-none w-full focus:outline-none [&::-webkit-inner-spin-button]:appearance-none h-fit'
-                          placeholder='I want forward collision warning to alert me'
-                        />     
-                    </div>
-                </div>
-                <div className='flex justify-center items center'>
-                  <button
-                    onClick={() => handleSubmit()}
-                    className="mt-2 btn w-1/3  bg-gradient-to-tr from-green-600 via-green-400 to-green-600 text-white hover:from-green-500 hover:to-green-400  transition-transform transform hover:scale-105 shadow-lg">
-                    Finish
-                  </button>
-                </div>
-              </div>    
+            <div className="form-control">
+              {questions.map((question, index) => {
+                const key = Object.keys(answers)[index]
+                return (
+                  <fieldset className="fieldset" key={index}>
+                    <legend className="fieldset-legend">{question}</legend>
+                    <label className="input">
+                      <input
+                        type='text'
+                        value={answers.key}
+                        onChange={(e) => setAnswers(prev => ({ ...prev, [key]: e.target.value }))}
+                        className='grow'
+                      />
+                      <span className="badge badge-neutral badge-xs">Optional</span>
+                    </label>
+                  </fieldset>
+                )
+              })}
+
+              <div className='flex justify-center items center'>
+                <button
+                  onClick={() => handleSubmit()}
+                  className="mt-2 btn w-1/3  bg-gradient-to-tr from-green-600 via-green-400 to-green-600 text-white hover:from-green-500 hover:to-green-400  transition-transform transform hover:scale-105 shadow-lg">
+                  Finish
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -297,8 +186,8 @@ const Quiz = () => {
           </div>
         </div>
       )}
-        
-        <div className="flex justify-center text-center">
+
+      <div className="flex justify-center text-center">
         <button
           onClick={handleBack}
           className="mt-6 bg-gray-300 text-black py-3 px-6 rounded-lg hover:from-teal-500 hover:to-blue-500 shadow-md text-lg font-semibold transition-transform transform hover:scale-105"
@@ -307,7 +196,7 @@ const Quiz = () => {
         </button>
       </div>
 
-      
+
     </div>
   )
 }
diff --git a/front-end/src/pages/SearchPage/VehicleList.jsx b/front-end/src/pages/SearchPage/VehicleList.jsx
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { isVehicleSustainable } from './FilterTool'
 import sustainableIcon from 'src/assets/sustainableicon.png'
 
diff --git a/front-end/src/pages/WelcomePage.jsx b/front-end/src/pages/WelcomePage.jsx
@@ -1,5 +1,7 @@
+import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import CarCarousel from '../components/Carousel'
+import { startWindToast } from "@mariojgt/wind-notify/packages/index.js"
 
 const WelcomePage = () => {
   const navigate = useNavigate();
@@ -8,6 +10,10 @@ const WelcomePage = () => {
     navigate('/inter');
   }
 
+  useEffect(() => {
+    startWindToast("WARNING!", "Our AI service is currently down", 'warning', 10, 'middle');
+  }, [])
+
   return (
     <div className="flex flex-col justify-center items-center space-y-8">
       <div className="text-center lg:text-left lg:space-x-8 lg:p-8 flex flex-col lg:flex-row items-center justify-center">
