◮ SCN

// UserProfile.jsx (2,156 tokens)
import React, { useState, useEffect } from 'react';
import './UserProfile.css';

const UserProfile = ({ userId, onUpdate }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);

  useEffect(() => {
    fetchUser(userId);
  }, [userId]);

  const fetchUser = async (id) => {
    try {
      setLoading(true);
      const response = await fetch(`/api/users/${id}`);
      const userData = await response.json();
      setUser(userData);
    } catch (error) {
      console.error('Failed to fetch user:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async (updatedData) => {
    try {
      const response = await fetch(`/api/users/${userId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedData)
      });
      const savedUser = await response.json();
      setUser(savedUser);
      setEditing(false);
      onUpdate?.(savedUser);
    } catch (error) {
      console.error('Failed to save user:', error);
    }
  };

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div className="user-profile">
      <div className="profile-header">
        <img src={user.avatar} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
      {editing ? (
        <EditForm user={user} onSave={handleSave} />
      ) : (
        <ProfileView user={user} onEdit={() => setEditing(true)} />
      )}
    </div>
  );
};

export default UserProfile;