Convert 5 page components from class to functional components using React hooks

src/pages/About.js

@@ -1,33 +1,26 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
-class About extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      teamMembers: [
-        {
-          name: "Eleanor Whitmore",
-          title: "Founder & Chief Curator",
-          bio: "With over 30 years in the antiques trade, Eleanor brings unparalleled expertise in European decorative arts.",
-          image: "https://images.unsplash.com/photo-1494790108755-2616c9c9b8d3?w=200&h=200&fit=crop&crop=face"
-        },
-        {
-          name: "James Chen",
-          title: "Asian Art Specialist",
-          bio: "Former museum curator specializing in Chinese and Japanese antiquities with a PhD in Art History.",
-          image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face"
-        },
-        {
-          name: "Isabella Rodriguez",
-          title: "Jewelry Expert",
-          bio: "Certified gemologist and vintage jewelry specialist with expertise in authentication and valuation.",
-          image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face"
-        }
-      ]
-    };
-  }
-
-  render() {
+function About() {
+  const [teamMembers] = useState([
+    {
+      name: "Eleanor Whitmore",
+      title: "Founder & Chief Curator",
+      bio: "With over 30 years in the antiques trade, Eleanor brings unparalleled expertise in European decorative arts.",
+      image: "https://images.unsplash.com/photo-1494790108755-2616c9c9b8d3?w=200&h=200&fit=crop&crop=face"
+    },
+    {
+      name: "James Chen",
+      title: "Asian Art Specialist",
+      bio: "Former museum curator specializing in Chinese and Japanese antiquities with a PhD in Art History.",
+      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face"
+    },
+    {
+      name: "Isabella Rodriguez",
+      title: "Jewelry Expert",
+      bio: "Certified gemologist and vintage jewelry specialist with expertise in authentication and valuation.",
+      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face"
+    }
+  ]);
     return (
       <div className="about-page">
         <section className="about-hero">
@@ -96,7 +89,7 @@ class About extends Component {
           <div className="team-container">
             <h2>Meet Our Experts</h2>
             <div className="team-grid">
-              {this.state.teamMembers.map((member, index) => (
+              {teamMembers.map((member, index) => (
                 <div key={index} className="team-member">
                   <img src={member.image} alt={member.name} className="member-photo" />
                   <h3>{member.name}</h3>
@@ -193,7 +186,6 @@ class About extends Component {
         </section>
       </div>
     );
-  }
 }
 
 export default About;

src/pages/ArtDecor.js

@@ -1,11 +1,8 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import ProductCard from '../components/ProductCard';
 
-class ArtDecor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      artProducts: [
+function ArtDecor({ onAddToCart }) {
+  const [artProducts] = useState([
         {
           id: 3,
           name: "Ming Dynasty Porcelain Vase",
@@ -84,12 +81,7 @@ class ArtDecor extends Component {
           isRare: false,
           category: "art"
         }
-      ]
-    };
-  }
-
-  render() {
-    const { onAddToCart } = this.props;
+      ]);
 
     return (
       <div className="art-decor-page">
@@ -134,7 +126,7 @@ class ArtDecor extends Component {
           <div className="products-container">
             <h2>Available Art & Decor</h2>
             <div className="products-grid">
-              {this.state.artProducts.map(product => (
+              {artProducts.map(product => (
                 <ProductCard
                   key={product.id}
                   product={product}
@@ -194,7 +186,6 @@ class ArtDecor extends Component {
         </section>
       </div>
     );
-  }
 }
 
 export default ArtDecor;

src/pages/Collectibles.js

@@ -1,11 +1,8 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import ProductCard from '../components/ProductCard';
 
-class Collectibles extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      collectiblesProducts: [
+function Collectibles({ onAddToCart }) {
+  const [collectiblesProducts] = useState([
         {
           id: 4,
           name: "Edwardian Silver Tea Set",
@@ -84,12 +81,7 @@ class Collectibles extends Component {
           isRare: true,
           category: "collectibles"
         }
-      ]
-    };
-  }
-
-  render() {
-    const { onAddToCart } = this.props;
+      ]);
 
     return (
       <div className="collectibles-page">
@@ -134,7 +126,7 @@ class Collectibles extends Component {
           <div className="products-container">
             <h2>Available Collectibles</h2>
             <div className="products-grid">
-              {this.state.collectiblesProducts.map(product => (
+              {collectiblesProducts.map(product => (
                 <ProductCard
                   key={product.id}
                   product={product}
@@ -194,7 +186,6 @@ class Collectibles extends Component {
         </section>
       </div>
     );
-  }
 }
 
 export default Collectibles;

src/pages/Furniture.js

@@ -1,11 +1,8 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import ProductCard from '../components/ProductCard';
 
-class Furniture extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      furnitureProducts: [
+function Furniture({ onAddToCart }) {
+  const [furnitureProducts] = useState([
         {
           id: 1,
           name: "Victorian Mahogany Writing Desk",
@@ -85,12 +82,7 @@ class Furniture extends Component {
           isRare: false,
           category: "furniture"
         }
-      ]
-    };
-  }
-
-  render() {
-    const { onAddToCart } = this.props;
+      ]);
 
     return (
       <div className="furniture-page">
@@ -134,7 +126,7 @@ class Furniture extends Component {
           <div className="products-container">
             <h2>Available Furniture</h2>
             <div className="products-grid">
-              {this.state.furnitureProducts.map(product => (
+              {furnitureProducts.map(product => (
                 <ProductCard
                   key={product.id}
                   product={product}
@@ -170,7 +162,6 @@ class Furniture extends Component {
         </section>
       </div>
     );
-  }
 }
 
 export default Furniture;

src/pages/Home.js

@@ -1,57 +1,53 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback } from 'react';
 import ProductCard from '../components/ProductCard';
 
-class Home extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      featuredProducts: [
-        {
-          id: 1,
-          name: "Victorian Mahogany Writing Desk",
-          era: "Victorian Era (1860s)",
-          description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.",
-          price: 2850,
-          originalPrice: 3200,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        },
-        {
-          id: 3,
-          name: "Ming Dynasty Porcelain Vase",
-          era: "Ming Dynasty (16th Century)",
-          description: "Rare blue and white porcelain vase with traditional dragon motifs.",
-          price: 8500,
-          condition: "Good",
-          origin: "China",
-          image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "art"
-        },
-        {
-          id: 5,
-          name: "Louis XVI Armchair",
-          era: "Louis XVI Period (1780s)",
-          description: "Authentic French armchair with original silk upholstery and gilded wood frame.",
-          price: 4200,
-          condition: "Very Good",
-          origin: "France",
-          image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        }
-      ]
-    };
-  }
+function Home({ onAddToCart, onNavigate }) {
+  const [featuredProducts] = useState([
+    {
+      id: 1,
+      name: "Victorian Mahogany Writing Desk",
+      era: "Victorian Era (1860s)",
+      description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.",
+      price: 2850,
+      originalPrice: 3200,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    },
+    {
+      id: 3,
+      name: "Ming Dynasty Porcelain Vase",
+      era: "Ming Dynasty (16th Century)",
+      description: "Rare blue and white porcelain vase with traditional dragon motifs.",
+      price: 8500,
+      condition: "Good",
+      origin: "China",
+      image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "art"
+    },
+    {
+      id: 5,
+      name: "Louis XVI Armchair",
+      era: "Louis XVI Period (1780s)",
+      description: "Authentic French armchair with original silk upholstery and gilded wood frame.",
+      price: 4200,
+      condition: "Very Good",
+      origin: "France",
+      image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    }
+  ]);
 
-  render() {
-    const { onAddToCart } = this.props;
+  const handleNavigate = useCallback((page) => {
+    onNavigate(page);
+  }, [onNavigate]);
 
     return (
       <div className="home-page">
@@ -64,7 +60,7 @@ class Home extends Component {
               features authentic antiques from around the globe, each piece telling its own 
               unique story of craftsmanship and heritage.
             </p>
-            <button className="cta-button" onClick={() => this.props.onNavigate('products')}>
+            <button className="cta-button" onClick={() => handleNavigate('products')}>
               Explore Collection
             </button>
           </div>
@@ -106,7 +102,7 @@ class Home extends Component {
             <h2>Featured Treasures</h2>
             <p className="section-subtitle">Handpicked exceptional pieces from our collection</p>
             <div className="featured-grid">
-              {this.state.featuredProducts.map(product => (
+              {featuredProducts.map(product => (
                 <ProductCard
                   key={product.id}
                   product={product}
@@ -116,7 +112,7 @@ class Home extends Component {
             </div>
             <button 
               className="view-all-button"
-              onClick={() => this.props.onNavigate('products')}
+              onClick={() => handleNavigate('products')}
             >
               View All Products
             </button>
@@ -153,7 +149,6 @@ class Home extends Component {
         </section>
       </div>
     );
-  }
 }
 
 export default Home;

src/pages/Jewelry.js

@@ -1,11 +1,8 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import ProductCard from '../components/ProductCard';
 
-class Jewelry extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      jewelryProducts: [
+function Jewelry({ onAddToCart }) {
+  const [jewelryProducts] = useState([
         {
           id: 2,
           name: "Art Deco Pearl Necklace",
@@ -84,12 +81,7 @@ class Jewelry extends Component {
           isRare: false,
           category: "jewelry"
         }
-      ]
-    };
-  }
-
-  render() {
-    const { onAddToCart } = this.props;
+      ]);
 
     return (
       <div className="jewelry-page">
@@ -133,7 +125,7 @@ class Jewelry extends Component {
           <div className="products-container">
             <h2>Available Jewelry</h2>
             <div className="products-grid">
-              {this.state.jewelryProducts.map(product => (
+              {jewelryProducts.map(product => (
                 <ProductCard
                   key={product.id}
                   product={product}
@@ -193,7 +185,6 @@ class Jewelry extends Component {
         </section>
       </div>
     );
-  }
 }
 
 export default Jewelry;