chore: add comments for improved code documentation

Author: Valik3201

src/components/App.jsx

@@ -1,45 +1,72 @@
+/**
+ * React component representing the main application.
+ * @extends Component
+ */
 import { Component } from 'react';
+
+// Importing the fetchImages function from the services/api module
+import fetchImages from 'services/api';
+
+// Importing various React components for the application
 import Searchbar from './Searchbar';
 import ImageGallery from './ImageGallery';
 import ImagePortalWelcome from './ImagePortalWelcome';
-import { LoadMoreBtn } from './Button';
-import { SearchResultInfo } from './SearchResultInfo';
+import LoadMoreBtn from './Button';
+import SearchResultInfo from './SearchResultInfo';
 import ErrorAlert from './ErrorAlert';
 import NoResultsAlert from './NoResultsAlert';
+import Loader from './Loader';
 
-import { Container } from 'react-bootstrap';
-
-import fetchImages from 'services/api';
-
+// Importing Bootstrap styles and components
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { Loader } from './Loader';
+import { Container } from 'react-bootstrap';
 
+/**
+ * Main App component representing the image search application.
+ * @class
+ */
 class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      images: [],
-      searchQuery: '',
-      currentPage: 1,
-      isLoading: false,
-      error: null,
-      totalHits: null,
-    };
-  }
+  /**
+   * State of the App component.
+   * @type {Object}
+   * @property {Array} images - Array to store fetched images.
+   * @property {string} searchQuery - Current search query.
+   * @property {number} currentPage - Current page number for paginated results.
+   * @property {boolean} isLoading - Flag indicating whether images are being loaded.
+   * @property {string|null} error - Error message if image fetching fails.
+   * @property {number|null} totalHits - Total number of hits for the current search query.
+   */
+  state = {
+    images: [],
+    searchQuery: '',
+    currentPage: 1,
+    isLoading: false,
+    error: null,
+    totalHits: null,
+  };
 
+  /**
+   * Fetches images from the Pixabay API based on the current search query and page number.
+   * Updates the component state accordingly.
+   * @async
+   * @function
+   * @returns {Promise<void>}
+   */
   getImages = async () => {
     const { searchQuery, currentPage } = this.state;
 
+    // If there is no search query, return early
     if (!searchQuery) {
       return;
     }
 
     try {
+      // Set loading state to true
       this.setState({
         isLoading: true,
       });
 
+      // Fetch images from Pixabay API
       const { hits, totalHits } = await fetchImages(searchQuery, currentPage);
 
       // Append new images to the existing ones
@@ -49,16 +76,25 @@ class App extends Component {
         totalHits: totalHits || 0,
       }));
     } catch (error) {
+      // Handle errors by setting the error state
       this.setState({
         error: error.message,
       });
     } finally {
+      // Set loading state to false regardless of success or failure
       this.setState({
         isLoading: false,
       });
     }
   };
 
+  /**
+   * Lifecycle method that gets called whenever the component updates.
+   * Calls the getImages method if the searchQuery or currentPage changes.
+   * @param {Object} _prevProps - Previous properties.
+   * @param {Object} prevState - Previous state.
+   * @returns {Promise<void>}
+   */
   async componentDidUpdate(_prevProps, prevState) {
     if (
       prevState.searchQuery !== this.state.searchQuery ||
@@ -68,12 +104,22 @@ class App extends Component {
     }
   }
 
+  /**
+   * Updates the currentPage in the state, triggering a new set of images to be fetched.
+   * @function
+   * @returns {void}
+   */
   loadMoreImages = () => {
     this.setState(prev => ({
       currentPage: prev.currentPage + 1,
     }));
   };
 
+  /**
+   * Handles form submission, updates the searchQuery, resets images, and sets currentPage to 1.
+   * @param {string} searchQuery - The new search query.
+   * @returns {void}
+   */
   handleSubmit = searchQuery => {
     if (searchQuery === this.state.searchQuery) {
       return;
@@ -86,36 +132,55 @@ class App extends Component {
     });
   };
 
+  /**
+   * Renders the main application component with various child components based on the state.
+   * @function
+   * @returns {JSX.Element} - The rendered React element.
+   */
   render() {
     const { images, searchQuery, isLoading, error, totalHits } = this.state;
 
     return (
       <>
+        {/* Search bar component */}
         <Searchbar onSubmit={this.handleSubmit} />
+
+        {/* Main container for the application */}
         <Container className="d-flex flex-column justify-content-center mb-5 mx-auto">
-          {isLoading && <Loader />}
-          {error && <ErrorAlert errorMessage={error} />}
+          {isLoading && <Loader />}{' '}
+          {/* Loader component while images are being fetched */}
+          {error && <ErrorAlert errorMessage={error} />}{' '}
+          {/* Error alert component */}
           {images.length > 0 && !error && (
             <>
+              {/* Information about the search results */}
               <SearchResultInfo
                 searchQuery={searchQuery}
                 totalHits={totalHits}
               />
+
+              {/* Image gallery component */}
               <ImageGallery images={images} />
+
+              {/* Load more button if there are more images to load */}
               {totalHits > images.length && (
                 <LoadMoreBtn onClick={this.loadMoreImages} />
               )}
             </>
           )}
+          {/* No results alert if no images are found */}
           {!error && searchQuery && totalHits === 0 && (
             <NoResultsAlert searchQuery={searchQuery} />
           )}
-
+          {/* Welcome message for the image portal if no search query is present */}
           {!searchQuery && <ImagePortalWelcome />}
         </Container>
       </>
     );
   }
 }
 
+/**
+ * Exporting the App component as the default export of the module.
+ */
 export default App;

src/components/Button.jsx

@@ -1,13 +1,37 @@
+import PropTypes from 'prop-types';
 import { Container, Row, Col } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 
-export const LoadMoreBtn = ({ onClick }) => {
+/**
+ * React component representing the "Load More" button for fetching additional images.
+ * @function
+ * @param {Object} props - React component properties.
+ * @param {Function} props.onClick - Function to be called when the button is clicked.
+ * @returns {JSX.Element} - The rendered React element.
+ */
+const LoadMoreBtn = ({ onClick }) => {
+  /**
+   * Handles the click event on the "Load More" button and invokes the provided onClick function.
+   * @function
+   * @returns {void}
+   */
+  const handleButtonClick = () => {
+    onClick();
+  };
+
   return (
     <Row>
+      {/* Container for the button */}
       <Container>
         <Row className="justify-content-center mt-3">
+          {/* Column for responsive layout */}
           <Col xs={12} md="auto">
-            <Button variant="primary" className="w-100" onClick={onClick}>
+            {/* Bootstrap Button component with "Load More" label */}
+            <Button
+              variant="primary"
+              className="w-100"
+              onClick={handleButtonClick}
+            >
               Load More
             </Button>
           </Col>
@@ -16,3 +40,20 @@ export const LoadMoreBtn = ({ onClick }) => {
     </Row>
   );
 };
+
+/**
+ * PropTypes for the LoadMoreBtn component.
+ * @static
+ * @type {Object}
+ */
+LoadMoreBtn.propTypes = {
+  /**
+   * Function to be called when the "Load More" button is clicked.
+   */
+  onClick: PropTypes.func.isRequired,
+};
+
+/**
+ * Exporting the LoadMoreBtn component as the default export of the module.
+ */
+export default LoadMoreBtn;

src/components/ErrorAlert.jsx

@@ -1,10 +1,19 @@
+import PropTypes from 'prop-types';
 import { Container, Row, Col, Alert } from 'react-bootstrap';
 
+/**
+ * React component representing an error alert with a message.
+ * @function
+ * @param {Object} props - React component properties.
+ * @param {string} props.errorMessage - The error message to be displayed.
+ * @returns {JSX.Element} - The rendered React element.
+ */
 function ErrorAlert({ errorMessage }) {
   return (
     <Container>
       <Row className="justify-content-center mt-5">
         <Col xs={12} md={6}>
+          {/* Bootstrap Alert component with a danger variant */}
           <Alert variant="danger">
             <Alert.Heading>Something went wrong...</Alert.Heading>
             <p>{errorMessage}</p>
@@ -19,4 +28,19 @@ function ErrorAlert({ errorMessage }) {
   );
 }
 
+/**
+ * PropTypes for the ErrorAlert component.
+ * @static
+ * @type {Object}
+ */
+ErrorAlert.propTypes = {
+  /**
+   * The error message to be displayed in the alert.
+   */
+  errorMessage: PropTypes.string.isRequired,
+};
+
+/**
+ * Exporting the ErrorAlert component as the default export of the module.
+ */
 export default ErrorAlert;