From c88ad5b34f5e11144a24eafd7fd0e5a6415d6b2d Mon Sep 17 00:00:00 2001
From: Sumanth U <157620444+Sumanth077s@users.noreply.github.com>
Date: Sun, 24 Nov 2024 10:12:15 +0530
Subject: [PATCH] Update App.js

---
 02-tours/final/src/App.js | 62 +++++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/02-tours/final/src/App.js b/02-tours/final/src/App.js
index b12367155..3f41d924d 100644
--- a/02-tours/final/src/App.js
+++ b/02-tours/final/src/App.js
@@ -1,41 +1,51 @@
-import React, { useState, useEffect } from 'react'
-import Loading from './Loading'
-import Tours from './Tours'
-// ATTENTION!!!!!!!!!!
-// I SWITCHED TO PERMANENT DOMAIN
-const url = 'https://course-api.com/react-tours-project'
+// Importing necessary dependencies and components
+import React, { useState, useEffect } from 'react';
+import Loading from './Loading'; // Component to display a loading spinner
+import Tours from './Tours'; // Component to display the list of tours
+
+// URL for fetching tour data from an external API
+const url = 'https://course-api.com/react-tours-project';
 
 function App() {
-  const [loading, setLoading] = useState(true)
-  const [tours, setTours] = useState([])
+  // State variables
+  const [loading, setLoading] = useState(true); // Tracks the loading state of the app
+  const [tours, setTours] = useState([]); // Stores the list of tours fetched from the API
 
+  // Function to remove a specific tour from the list
   const removeTour = (id) => {
-    const newTours = tours.filter((tour) => tour.id !== id)
-    setTours(newTours)
-  }
+    const newTours = tours.filter((tour) => tour.id !== id); // Filter out the tour with the given id
+    setTours(newTours); // Update the tours state
+  };
 
+  // Function to fetch tour data from the API
   const fetchTours = async () => {
-    setLoading(true)
+    setLoading(true); // Set loading to true before fetching data
     try {
-      const response = await fetch(url)
-      const tours = await response.json()
-      setLoading(false)
-      setTours(tours)
+      const response = await fetch(url); // Fetch data from the API
+      const tours = await response.json(); // Parse the response as JSON
+      setLoading(false); // Set loading to false once data is fetched
+      setTours(tours); // Update the tours state with the fetched data
     } catch (error) {
-      setLoading(false)
-      console.log(error)
+      setLoading(false); // Set loading to false in case of an error
+      console.log(error); // Log the error to the console
     }
-  }
+  };
+
+  // useEffect to fetch tours when the component mounts
   useEffect(() => {
-    fetchTours()
-  }, [])
+    fetchTours(); // Call the fetchTours function once when the component loads
+  }, []);
+
+  // Render loading spinner while data is being fetched
   if (loading) {
     return (
       <main>
         <Loading />
       </main>
-    )
+    );
   }
+
+  // Render message and refresh button if there are no tours left
   if (tours.length === 0) {
     return (
       <main>
@@ -46,13 +56,15 @@ function App() {
           </button>
         </div>
       </main>
-    )
+    );
   }
+
+  // Render the Tours component if data is available
   return (
     <main>
       <Tours tours={tours} removeTour={removeTour} />
     </main>
-  )
+  );
 }
 
-export default App
+export default App;