From 34cc2e65cc44e8f4ba8c9791b60a524fc2ebca1f Mon Sep 17 00:00:00 2001
From: Sidhant Mishra <69967446+rishi457@users.noreply.github.com>
Date: Sat, 7 Oct 2023 19:29:00 +0530
Subject: [PATCH] Update Home.jsx

Error Handling:

We added a new state variable error using useState to handle errors that may occur during the API request for fetching questions.
Inside the handleSubmit function, we wrapped the API request in a try-catch block to catch any potential errors.
If an error occurs during the API request, we set the error state with an error message to inform the user.
We added a conditional rendering block to display the error message in red if error is not null.
Feedback for Loading:

We provided feedback to the user during the loading process by using the HashLoader component from 'react-spinners' to display a loading spinner.
The loading spinner is displayed in the center of the screen while questions are being fetched.
The loading state is controlled by the loading state variable from the context.
Improved Styling and Layout:

We made minor styling improvements, such as centering text and the loading spinner on the screen.
We used Chakra UI's Text component to style and display the error message in red if there is an error.
User-Friendly Error Message:

In the error message, we provide a user-friendly error message, such as "Failed to fetch questions. Please try again," to inform the user about the issue.
These changes enhance the user experience by providing better feedback during loading and handling errors gracefully when fetching questions from the API.
---
 src/pages/Home/Home.jsx | 65 ++++++++++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 0e203c2..57f9dde 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,25 +1,32 @@
-import React, { useContext, useState } from 'react'
-import Form from '../../components/Form/Form'
-import QuizArea from '../QuizArea/QuizArea'
-import quizContext from '../../context/quizContext'
+import React, { useContext, useState } from 'react';
+import Form from '../../components/Form/Form';
+import QuizArea from '../QuizArea/QuizArea';
+import quizContext from '../../context/quizContext';
 import { HashLoader } from 'react-spinners';
-import { Text } from '@chakra-ui/react'
+import { Text } from '@chakra-ui/react';
 
 const Home = () => {
-    const context = useContext(quizContext)
-    const { setUrl, url, fetchQuestions, setLoading, loading, questions } = context
-    const [formData, setFormData] = useState({ number: '', category: '', difficulty: '', type: '' })
+    const context = useContext(quizContext);
+    const { setUrl, url, fetchQuestions, setLoading, loading, questions } = context;
+    const [formData, setFormData] = useState({ number: '', category: '', difficulty: '', type: '' });
+    const [error, setError] = useState(null); // New: State for error handling
 
-    const handleSubmit = (e) => {
+    const handleSubmit = async (e) => {
         e.preventDefault();
-        const { number, category, difficulty, type } = formData
-        setUrl(`https://opentdb.com/api.php?amount=${number}&category=${category}&difficulty=${difficulty}&type=${type}`, fetchQuestions(url))
-        setLoading(true)
-    }
+        const { number, category, difficulty, type } = formData;
+        try {
+            await setUrl(`https://opentdb.com/api.php?amount=${number}&category=${category}&difficulty=${difficulty}&type=${type}`);
+            await fetchQuestions(url);
+            setLoading(true);
+        } catch (err) {
+            setError('Failed to fetch questions. Please try again.');
+            setLoading(false);
+        }
+    };
 
     const onChange = (e) => {
-        setFormData({ ...formData, [e.target.name]: e.target.value })
-    }
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
 
     return (
         <>
@@ -33,19 +40,25 @@ const Home = () => {
                     style={{ backgroundColor: '#4d4d4dcc', width: '100%', height: '100vh', position: 'absolute', top: '13%' }}
                 />
             </div>
-            {
-                (url === '' || questions.length === 0)
-                    ?
-                    <div className="container my-3">
-                        <Text mb={'4'} fontSize='4xl'>Start your Quiz Now</Text>
+            <div className="container my-3">
+                {error ? (
+                    <Text color="red.500" fontSize="lg">
+                        {error}
+                    </Text>
+                ) : url === '' || questions.length === 0 ? (
+                    <>
+                        <Text mb={'4'} fontSize='4xl'>
+                            Start your Quiz Now
+                        </Text>
                         <hr />
                         <Form handleSubmit={handleSubmit} onChange={onChange} />
-                    </div>
-                    :
+                    </>
+                ) : (
                     <QuizArea />
-            }
+                )}
+            </div>
         </>
-    )
-}
+    );
+};
 
-export default Home
+export default Home;