Convert all React class components to functional components with hooks

src/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import Header from './components/Header';
 import ProductList from './components/ProductList';
@@ -11,72 +11,60 @@ import ArtDecor from './pages/ArtDecor';
 import Collectibles from './pages/Collectibles';
 import About from './pages/About';
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      cartItems: [],
-      isCartOpen: false,
-      searchTerm: '',
-      currentPage: 'home'
-    };
-  }
+const App = () => {
+  const [cartItems, setCartItems] = useState([]);
+  const [isCartOpen, setIsCartOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState('home');
 
-  handleAddToCart = (product) => {
-    const existingItem = this.state.cartItems.find(item => item.id === product.id);
+  const handleAddToCart = (product) => {
+    const existingItem = cartItems.find(item => item.id === product.id);
 
     if (existingItem) {
-      this.setState({
-        cartItems: this.state.cartItems.map(item =>
-          item.id === product.id
-            ? { ...item, quantity: item.quantity + 1 }
-            : item
-        )
-      });
+      setCartItems(cartItems.map(item =>
+        item.id === product.id
+          ? { ...item, quantity: item.quantity + 1 }
+          : item
+      ));
     } else {
-      this.setState({
-        cartItems: [...this.state.cartItems, { ...product, quantity: 1 }]
-      });
+      setCartItems([...cartItems, { ...product, quantity: 1 }]);
     }
-  }
+  };
 
-  handleRemoveFromCart = (productId) => {
-    this.setState({
-      cartItems: this.state.cartItems.filter(item => item.id !== productId)
-    });
-  }
+  const handleRemoveFromCart = (productId) => {
+    setCartItems(cartItems.filter(item => item.id !== productId));
+  };
 
-  handleUpdateQuantity = (productId, newQuantity) => {
-    this.setState({
-      cartItems: this.state.cartItems.map(item =>
-        item.id === productId
-          ? { ...item, quantity: newQuantity }
-          : item
-      )
-    });
-  }
+  const handleUpdateQuantity = (productId, newQuantity) => {
+    setCartItems(cartItems.map(item =>
+      item.id === productId
+        ? { ...item, quantity: newQuantity }
+        : item
+    ));
+  };
 
-  handleCartToggle = () => {
-    this.setState({ isCartOpen: !this.state.isCartOpen });
-  }
+  const handleCartToggle = () => {
+    setIsCartOpen(!isCartOpen);
+  };
 
-  handleSearch = (searchTerm) => {
-    this.setState({ searchTerm, currentPage: 'products' });
-  }
+  const handleSearch = (searchTerm) => {
+    setSearchTerm(searchTerm);
+    setCurrentPage('products');
+  };
 
-  handleNavigation = (page) => {
-    this.setState({ currentPage: page, searchTerm: '' });
-  }
+  const handleNavigation = (page) => {
+    setCurrentPage(page);
+    setSearchTerm('');
+  };
 
-  getCartItemCount = () => {
-    return this.state.cartItems.reduce((total, item) => total + item.quantity, 0);
-  }
+  const getCartItemCount = () => {
+    return cartItems.reduce((total, item) => total + item.quantity, 0);
+  };
 
-  renderCurrentPage = () => {
-    const { currentPage, searchTerm } = this.state;
+  const renderCurrentPage = () => {
     const commonProps = {
-      onAddToCart: this.handleAddToCart,
-      onNavigate: this.handleNavigation
+      onAddToCart: handleAddToCart,
+      onNavigate: handleNavigation
     };
 
     switch (currentPage) {
@@ -96,40 +84,37 @@ class App extends Component {
       default:
         return (
           <ProductList
-            onAddToCart={this.handleAddToCart}
+            onAddToCart={handleAddToCart}
             searchTerm={searchTerm}
           />
         );
     }
-  }
-
-  render() {
+  };
     return (
       <div className="App">
         <Header
-          cartItemCount={this.getCartItemCount()}
-          onCartClick={this.handleCartToggle}
-          onSearch={this.handleSearch}
-          onNavigate={this.handleNavigation}
-          currentPage={this.state.currentPage}
+          cartItemCount={getCartItemCount()}
+          onCartClick={handleCartToggle}
+          onSearch={handleSearch}
+          onNavigate={handleNavigation}
+          currentPage={currentPage}
         />
 
         <main className="main-content">
-          {this.renderCurrentPage()}
+          {renderCurrentPage()}
         </main>
 
         <Cart
-          cartItems={this.state.cartItems}
-          isOpen={this.state.isCartOpen}
-          onClose={this.handleCartToggle}
-          onRemoveFromCart={this.handleRemoveFromCart}
-          onUpdateQuantity={this.handleUpdateQuantity}
+          cartItems={cartItems}
+          isOpen={isCartOpen}
+          onClose={handleCartToggle}
+          onRemoveFromCart={handleRemoveFromCart}
+          onUpdateQuantity={handleUpdateQuantity}
         />
 
         <Footer />
       </div>
     );
-  }
-}
+};
 
 export default App;

src/components/Cart.js

@@ -1,46 +1,33 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 
-class Cart extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-  }
+const Cart = ({ cartItems, isOpen, onClose, onRemoveFromCart, onUpdateQuantity }) => {
+  useEffect(() => {
+  }, [isOpen]);
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.isOpen !== this.props.isOpen) {
-      this.setState({ isOpen: this.props.isOpen });
+  const handleRemoveItem = (productId) => {
+    if (onRemoveFromCart) {
+      onRemoveFromCart(productId);
     }
-  }
+  };
 
-  handleRemoveItem = (productId) => {
-    if (this.props.onRemoveFromCart) {
-      this.props.onRemoveFromCart(productId);
-    }
-  }
-
-  handleUpdateQuantity = (productId, newQuantity) => {
+  const handleUpdateQuantity = (productId, newQuantity) => {
     if (newQuantity <= 0) {
-      this.handleRemoveItem(productId);
-    } else if (this.props.onUpdateQuantity) {
-      this.props.onUpdateQuantity(productId, newQuantity);
+      handleRemoveItem(productId);
+    } else if (onUpdateQuantity) {
+      onUpdateQuantity(productId, newQuantity);
     }
-  }
+  };
 
-  calculateTotal = () => {
-    return this.props.cartItems.reduce((total, item) => {
+  const calculateTotal = () => {
+    return cartItems.reduce((total, item) => {
       return total + (item.price * item.quantity);
     }, 0);
-  }
+  };
 
-  handleCheckout = () => {
+  const handleCheckout = () => {
     alert('Thank you for your interest! Checkout functionality would be implemented here.');
-  }
-
-  render() {
-    const { cartItems, isOpen, onClose } = this.props;
-    const total = this.calculateTotal();
+  };
+    const total = calculateTotal();
 
     if (!isOpen) return null;
 
@@ -74,21 +61,21 @@ class Cart extends Component {
                         <div className="cart-item-controls">
                           <div className="quantity-controls">
                             <button 
-                              onClick={() => this.handleUpdateQuantity(item.id, item.quantity - 1)}
+                              onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}
                               className="quantity-btn"
                             >
                               -
                             </button>
                             <span className="quantity">{item.quantity}</span>
                             <button 
-                              onClick={() => this.handleUpdateQuantity(item.id, item.quantity + 1)}
+                              onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}
                               className="quantity-btn"
                             >
                               +
                             </button>
                           </div>
                           <button 
-                            onClick={() => this.handleRemoveItem(item.id)}
+                            onClick={() => handleRemoveItem(item.id)}
                             className="remove-btn"
                           >
                             Remove
@@ -108,7 +95,7 @@ class Cart extends Component {
                   </div>
                   <button 
                     className="checkout-btn"
-                    onClick={this.handleCheckout}
+                    onClick={handleCheckout}
                   >
                     Proceed to Checkout
                   </button>
@@ -122,7 +109,6 @@ class Cart extends Component {
         </div>
       </div>
     );
-  }
-}
+};
 
 export default Cart;

src/components/Footer.js

@@ -1,29 +1,23 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
-class Footer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      email: '',
-      subscribed: false
-    };
-  }
+const Footer = () => {
+  const [email, setEmail] = useState('');
+  const [subscribed, setSubscribed] = useState(false);
 
-  handleEmailChange = (e) => {
-    this.setState({ email: e.target.value });
-  }
+  const handleEmailChange = (e) => {
+    setEmail(e.target.value);
+  };
 
-  handleNewsletterSubmit = (e) => {
+  const handleNewsletterSubmit = (e) => {
     e.preventDefault();
-    if (this.state.email) {
-      this.setState({ subscribed: true, email: '' });
+    if (email) {
+      setSubscribed(true);
+      setEmail('');
       setTimeout(() => {
-        this.setState({ subscribed: false });
+        setSubscribed(false);
       }, 3000);
     }
-  }
-
-  render() {
+  };
     const currentYear = new Date().getFullYear();
 
     return (
@@ -64,20 +58,20 @@ class Footer extends Component {
           <div className="footer-section">
             <h4>Newsletter</h4>
             <p>Stay updated with our latest finds and exclusive offers.</p>
-            <form onSubmit={this.handleNewsletterSubmit} className="newsletter-form">
+            <form onSubmit={handleNewsletterSubmit} className="newsletter-form">
               <input
                 type="email"
                 placeholder="Enter your email"
-                value={this.state.email}
-                onChange={this.handleEmailChange}
+                value={email}
+                onChange={handleEmailChange}
                 className="newsletter-input"
                 required
               />
               <button type="submit" className="newsletter-btn">
                 Subscribe
               </button>
             </form>
-            {this.state.subscribed && (
+            {subscribed && (
               <p className="subscription-success">Thank you for subscribing!</p>
             )}
           </div>
@@ -95,7 +89,6 @@ class Footer extends Component {
         </div>
       </footer>
     );
-  }
-}
+};
 
 export default Footer;