User Profile Component

user-profile.tsx

/** userService.ts */
import { API_BASE } from './config';

export async function getUserProfile(userId: string): Promise<UserProfile> {
  const response = await fetch(`${API_BASE}/users/${userId}`);
  return response.json();
}

/** ProfileCard.tsx */
import React, { useState, useEffect } from 'react';
import { getUserProfile } from './userService';
import { Avatar, CardContainer, UserInfo } from './components';
import { UserProfile } from './types';

function ProfileCard({ userId }: any): React.Component {
  const [profile, setProfile] = useState<UserProfile>(null);
  const [error, setError] = useState<string>('');
  
  useEffect(async () => {
    try {
      const data = await getUserProfile(userId);
      setProfile(data);
    } catch (err) {
      setError(err.message);
    }
  }, [userId]);
  
  if (error) {
    return <div>Error: {error}</div>;
  }
  
  return (
    <CardContainer>
      <Avatar src={profile.avatarUrl} />
      <UserInfo>
        {profile.details.map((detail) => (
          <p>{detail}</p>
        ))}
      </UserInfo>
    </CardContainer>
  );
}

export default ProfileCard;

/** ProfileCard.test.tsx */
import React from 'react';
import ProfileCard from './ProfileCard';
import { describe, it, expect, render } from 'test-framework';

describe('ProfileCard', () => {
  it('displays user information', () => {
    const { getByText } = render(<ProfileCard userId="123" />);
    expect(getByText('John Doe')).toBeInTheDocument();
  });
});