From ff888a4026e16b9302f5cc3be9dc296813d073ca Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 28 Aug 2025 10:15:34 +0000 Subject: [PATCH] Convert 5 page components from class to functional components using React hooks - Convert Home, Furniture, Jewelry, ArtDecor, Collectibles, and About components - Replace constructor state with useState hooks for product arrays and team members - Add useCallback optimization for navigation handlers in Home component - Maintain exact same props interface for seamless App component integration - Preserve all functionality including onAddToCart and onNavigate callbacks - All components tested locally and working correctly Co-Authored-By: Rohan Ramani --- src/pages/About.js | 54 +++++++++----------- src/pages/ArtDecor.js | 19 ++----- src/pages/Collectibles.js | 19 ++----- src/pages/Furniture.js | 19 ++----- src/pages/Home.js | 105 ++++++++++++++++++-------------------- src/pages/Jewelry.js | 19 ++----- 6 files changed, 93 insertions(+), 142 deletions(-) diff --git a/src/pages/About.js b/src/pages/About.js index e69eb43..54b6ad0 100644 --- a/src/pages/About.js +++ b/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 (
@@ -96,7 +89,7 @@ class About extends Component {

Meet Our Experts

- {this.state.teamMembers.map((member, index) => ( + {teamMembers.map((member, index) => (
{member.name}

{member.name}

@@ -193,7 +186,6 @@ class About extends Component {
); - } } export default About; diff --git a/src/pages/ArtDecor.js b/src/pages/ArtDecor.js index bcfe5f7..e4ee16b 100644 --- a/src/pages/ArtDecor.js +++ b/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 (
@@ -134,7 +126,7 @@ class ArtDecor extends Component {

Available Art & Decor

- {this.state.artProducts.map(product => ( + {artProducts.map(product => (
); - } } export default ArtDecor; diff --git a/src/pages/Collectibles.js b/src/pages/Collectibles.js index fc23a80..5f7e3ad 100644 --- a/src/pages/Collectibles.js +++ b/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 (
@@ -134,7 +126,7 @@ class Collectibles extends Component {

Available Collectibles

- {this.state.collectiblesProducts.map(product => ( + {collectiblesProducts.map(product => (
); - } } export default Collectibles; diff --git a/src/pages/Furniture.js b/src/pages/Furniture.js index defaf44..9f8f533 100644 --- a/src/pages/Furniture.js +++ b/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 (
@@ -134,7 +126,7 @@ class Furniture extends Component {

Available Furniture

- {this.state.furnitureProducts.map(product => ( + {furnitureProducts.map(product => (
); - } } export default Furniture; diff --git a/src/pages/Home.js b/src/pages/Home.js index a72dfa4..b2b04da 100644 --- a/src/pages/Home.js +++ b/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 (
@@ -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.

-
@@ -106,7 +102,7 @@ class Home extends Component {

Featured Treasures

Handpicked exceptional pieces from our collection

- {this.state.featuredProducts.map(product => ( + {featuredProducts.map(product => ( @@ -153,7 +149,6 @@ class Home extends Component {
); - } } export default Home; diff --git a/src/pages/Jewelry.js b/src/pages/Jewelry.js index aa76030..27bd282 100644 --- a/src/pages/Jewelry.js +++ b/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 (
@@ -133,7 +125,7 @@ class Jewelry extends Component {

Available Jewelry

- {this.state.jewelryProducts.map(product => ( + {jewelryProducts.map(product => (
); - } } export default Jewelry;