Merge pull request ujjwall-R#37 from professorabhay/codebase-comments

Added comments for better understanding.
Abdelra6 · Nov 27, 2023 · 8153168 · 8153168
2 parents 26eff68 + ab06a29
commit 8153168
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 2 deletions.
diff --git a/.env b/.env
@@ -4,7 +4,7 @@ VITE_AUTH0_REDIRECT_URL="http://localhost:5173"
 VITE_API_NINJAS_X_API_KEY="API_NINJAS_X_API_KEY"
 
 
-
+// Enter Your Private Information of API Ninjas. 
 
 
 

diff --git a/index.html b/index.html
@@ -7,7 +7,9 @@
     <link rel="icon" href="./src/assets/images/scraperLogo.png">
   </head>
   <body>
+     <!-- The root element where the React app will be rendered -->
     <div id="root"></div>
+     <!-- Include the main JavaScript file for the React app -->
     <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,14 +2,21 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import LandingPage from "./components/LandingPage";
 import Homepage from "./components/Homepage";
 
+// The main App component
+
 function App() {
   return (
+     // Use the BrowserRouter to enable React Router functionality
     <Router>
+       {/* Define the routes for different paths */}
       <Routes>
+        {/* Route for the landing page */}
         <Route path="/" exact element={<LandingPage/>} />
+        {/* Route for the homepage */}
         <Route path="/homepage" element={<Homepage/>} />
       </Routes>
     </Router>
   );
 }
+// Export the App component as the default export
 export default App;
diff --git a/src/components/Homepage.jsx b/src/components/Homepage.jsx
@@ -1,8 +1,13 @@
 import html2pdf from "html2pdf.js";
 import { useNavigate } from "react-router";
 
+// Homepage component for displaying scraped data
+
 function Homepage() {
+  // React Router hook for navigation
   const navigateTo = useNavigate();
+
+   // Retrieve scraped data from session storage
   const fetchedData = sessionStorage.getItem("data");
 
   // we can get the data passed from navigateTo()'s state param like this
@@ -24,20 +29,27 @@ function Homepage() {
     worker.from(fetchedData, "string").to("pdf").set(opt).save();
   };
 
+    // Render the Homepage component
   return (
     <div className="homepageContainer font-primary h-[100vh] w-[100%] bg-black flex flex-col items-center justify-evenly">
+      {/* Display the scraped data */}
       <span className="bg-white text-[2rem] px-[2rem]">Scrapped Data:</span>
       <p className="scrapedData bg-primary max-w-[90%] vsm:w-[80%] max-h-[70%] overflow-y-auto text-black md:text-[1.5rem] xl:text-[2rem] vvsm:text-[1rem] py-[1rem] px-[4rem] vvsm:px-[2rem] border-4 border-white">
         {" "}
         <code>{fetchedData}</code>
       </p>
+
+       {/* Buttons for Download and ReScrape actions */}
       <div className="buttons flex flex-col text-center w-[90%] vsm:w-[80%]  md:flex-row justify-evenly items-center">
+        {/* Download button */}
         <button
           onClick={handleDownloadPDF}
           className="download bg-transparent text-[1.2rem] vsm:text-[1.5rem] md:text-[2rem] text-white px-16 hover:bg-white hover:text-black border-2 border-white mb-[1rem] md:mb-[0]"
         >
           Download
         </button>
+
+         {/* ReScrape button */}
         <button
           onClick={handleReScrape}
           className="download bg-transparent text-[1.2rem] vsm:text-[1.5rem] md:text-[2rem] text-white px-16 hover:bg-white hover:text-black border-2 border-white"
@@ -49,4 +61,5 @@ function Homepage() {
   );
 }
 
+// Export the Homepage component as the default export
 export default Homepage;
diff --git a/src/components/LandingPage.jsx b/src/components/LandingPage.jsx
@@ -6,6 +6,7 @@ import { useNavigate } from "react-router-dom";
 import Loader from "./Loader";
 import logo from "../assets/images/scraperLogo.png";
 
+// LandingPage component for handling scraping and authentication
 function LandingPage() {
   // Auth0 Hooks
   const { loginWithRedirect, logout, isAuthenticated, isLoading, user } =
@@ -23,6 +24,7 @@ function LandingPage() {
 
   // Click handler for Scrape button
   const handleScrapeClick = async () => {
+    // Validation and error handling
     if (!selectedRadioButton) {
       setAlertError("Please select either Text Only or HTML");
       setShowModal(true);
@@ -48,9 +50,12 @@ function LandingPage() {
         setAlertError("Please enter a valid URL");
         setShowModal(true);
       } else {
+        // API request configuration
         const apiKey = import.meta.env.VITE_API_NINJAS_X_API_KEY;
         const textOnly = radioElements[0].checked ? true : false; // Check if user want text only response or HTML
         const url = `https://api.api-ninjas.com/v1/webscraper?url=${urlElement}&text_only=${textOnly}`;
+
+         // API request using axios
         const res = await axios
           .get(url, {
             headers: { "X-Api-Key": apiKey },

diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
@@ -1,10 +1,14 @@
 import logo from "../assets/images/scraperLogo.png";
 
+// Loader component for displaying a loading indicator
 function Loader(){
     return (
         <div className="loader h-[100vh] w-[100vw] flex justify-center items-center bg-black">
+          {/* Loading container with logo and text */}
           <div className="loading h-[100%] w-[100%] flex flex-col sm:flex-row justify-center items-center border-4 border-white-800">
+            {/* Logo image */}
             <img id="logo" src={logo} alt="loader" className="border-4  border-white w-[150px] sm:w-[200px] rounded-[50%] sm:mr-[1rem] sm:mb-[0] mb-[2rem] animate-spin"/>
+             {/* Loading text */}
             <h5 className="text-white font-primary text-[1rem] vvsm:text-[1.5rem] vsm:text-[1.7rem] md:text-[2.5rem] sm:text-[2rem] ">Loading...</h5>
           </div>
         </div>

diff --git a/src/index.jsx b/src/index.jsx
@@ -9,8 +9,9 @@ const domain = import.meta.env.VITE_AUTH0_DOMAIN;
 const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
 const redirectUri = import.meta.env.VITE_AUTH0_REDIRECT_URL;
 
-
+// Use ReactDOM.createRoot for Concurrent Mode rendering
 ReactDOM.createRoot(document.getElementById("root")).render(
+  // Wrap the entire application in Auth0Provider for authentication
   <React.StrictMode>
     <Auth0Provider
       domain={domain}
@@ -19,6 +20,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         redirect_uri: redirectUri
       }}
     >
+      {/* Render the main App component */}
       <App />
     </Auth0Provider>
   </React.StrictMode>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,7 +4,7 @@ VITE_AUTH0_REDIRECT_URL="http://localhost:5173"
		VITE_API_NINJAS_X_API_KEY="API_NINJAS_X_API_KEY"



		// Enter Your Private Information of API Ninjas.



Expand Down