diff --git a/wardrobe-ai/frontend/src/components/CuratedBox.js b/wardrobe-ai/frontend/src/components/CuratedBox.js index e7a203b..d6b2277 100644 --- a/wardrobe-ai/frontend/src/components/CuratedBox.js +++ b/wardrobe-ai/frontend/src/components/CuratedBox.js @@ -6,26 +6,49 @@ export default function CuratedBox() { const [box, setBox] = useState(null); const [feedback, setFeedback] = useState({}); const [userId, setUserId] = useState(null); + const [profile, setProfile] = useState(null); + const [loadingProfile, setLoadingProfile] = useState(false); useEffect(() => { const userIdParam = router.query.userId; if (userIdParam) { setUserId(userIdParam); - generateBox(userIdParam); + fetchProfile(userIdParam); } }, [router.query]); + const fetchProfile = async (userId) => { + try { + setLoadingProfile(true); + const response = await fetch(`/api/profile/${userId}`); + const data = await response.json(); + if (response.ok) { + setProfile(data); + } else { + console.error('Failed to fetch profile:', data.error); + } + } catch (error) { + console.error('Error fetching profile:', error); + } finally { + setLoadingProfile(false); + } + }; + const generateBox = async (userId) => { try { - // For now, use placeholder preferences - in real app, fetch from user profile + // Use actual user profile preferences, or fallback to defaults + const preferredColors = profile?.preferred_colors || ['Black', 'White', 'Navy', 'Grey']; + const stylePreferences = profile?.style_preferences || ['Classic', 'Casual']; + const budget = profile?.budget || 100; + const response = await fetch('/api/box', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId, - preferredColors: ['Black', 'White', 'Navy', 'Grey'], - stylePreferences: ['Classic', 'Casual'], - budget: 100 + preferredColors, + stylePreferences, + budget }) }); @@ -36,6 +59,13 @@ export default function CuratedBox() { } }; + // Generate box when profile is loaded + useEffect(() => { + if (userId && profile) { + generateBox(userId); + } + }, [userId, profile]); + const handleFeedbackChange = (productId, field, value) => { setFeedback(prev => ({ ...prev,