React Container–Presenter Pattern — Step-by-step টিউটোরিয়াল (বাংলা)

src/
  services/
    api.js
  hooks/
    useUserProfile.js
  components/
    UserProfile/ 
      UserProfile.jsx          // final component (uses hook + presenter)
      UserProfilePresenter.jsx
      Avatar.jsx
      UserDetails.jsx
      LoadingSpinner.jsx
      ErrorDisplay.jsx
  __tests__/
    UserProfilePresenter.test.jsx
    useUserProfile.test.js
  stories/
    UserProfile.stories.jsx

// src/legacy/UserProfile.js  (অপছন্দের অবস্থা)
import React, { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(r => r.json())
      .then(data => { setUser(data); setIsLoading(false); })
      .catch(e => { setError(e); setIsLoading(false); });
  }, [userId]);
 
  if (isLoading) return <div>Loading user profile...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return (
    <div>
      <img src={user.avatarUrl} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}
export default UserProfile;

// src/services/api.js
export async function fetchUser(userId, { signal } = {}) {
  const res = await fetch(`https://api.example.com/users/${userId}`, { signal });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// src/hooks/useUserProfile.js
import { useState, useEffect } from 'react';
import { fetchUser } from '../services/api';
 
export default function useUserProfile(userId) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    if (!userId) return;
    const controller = new AbortController();
    let mounted = true;
 
    async function load() {
      setIsLoading(true);
      setError(null);
      try {
        const data = await fetchUser(userId, { signal: controller.signal });
        if (mounted) setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError' && mounted) setError(err);
      } finally {
        if (mounted) setIsLoading(false);
      }
    }
    load();
    return () => {
      mounted = false;
      controller.abort();
    };
  }, [userId]);
 
  return { user, isLoading, error };
}

// src/components/UserProfile/UserProfilePresenter.jsx
import React from 'react';
import Avatar from './Avatar';
import UserDetails from './UserDetails';
import LoadingSpinner from './LoadingSpinner';
import ErrorDisplay from './ErrorDisplay';
 
export default function UserProfilePresenter({ user, isLoading, error }) {
  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorDisplay message={error.message} />;
  if (!user) return null;
 
  return (
    <div className="user-profile-card">
      <Avatar src={user.avatarUrl} alt={user.name} />
      <UserDetails name={user.name} email={user.email} joinedDate={user.joinedDate} />
    </div>
  );
}

// src/components/UserProfile/Avatar.jsx
export default function Avatar({ src, alt }) {
  return <img src={src} alt={alt} style={{ width: 80, height: 80, borderRadius: '50%' }} />;
}

// src/components/UserProfile/UserDetails.jsx
export default function UserDetails({ name, email, joinedDate }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Email: {email}</p>
      <p>Joined: {new Date(joinedDate).toLocaleDateString()}</p>
    </div>
  );
}

// src/components/UserProfile/LoadingSpinner.jsx
export default function LoadingSpinner() {
  return <div role="status">Loading…</div>;
}

// src/components/UserProfile/ErrorDisplay.jsx
export default function ErrorDisplay({ message }) {
  return <div role="alert">Error: {message}</div>;
}

// src/components/UserProfile/UserProfile.jsx
import React from 'react';
import useUserProfile from '../../hooks/useUserProfile';
import UserProfilePresenter from './UserProfilePresenter';
 
export default function UserProfile({ userId }) {
  const { user, isLoading, error } = useUserProfile(userId);
  return <UserProfilePresenter user={user} isLoading={isLoading} error={error} />;
}

// src/__tests__/UserProfilePresenter.test.jsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import UserProfilePresenter from '../components/UserProfile/UserProfilePresenter';
 
test('shows loading state', () => {
  render(<UserProfilePresenter user={null} isLoading={true} error={null} />);
  expect(screen.getByRole('status')).toHaveTextContent(/loading/i);
});
 
test('shows error state', () => {
  render(<UserProfilePresenter user={null} isLoading={false} error={{ message: 'Oops' }} />);
  expect(screen.getByRole('alert')).toHaveTextContent(/oops/i);
});
 
test('renders user info', () => {
  const user = { name: 'Mojnu', email: 'm@example.com', avatarUrl: '/a.png', joinedDate: '2020-01-01' };
  render(<UserProfilePresenter user={user} isLoading={false} error={null} />);
  expect(screen.getByText('Mojnu')).toBeInTheDocument();
  expect(screen.getByText(/Email:/i)).toHaveTextContent('Email: m@example.com');
});

// src/__tests__/useUserProfile.test.js
import { renderHook, act } from '@testing-library/react-hooks';
import useUserProfile from '../hooks/useUserProfile';
 
beforeEach(() => {
  global.fetch = jest.fn();
});
 
test('fetches and returns user', async () => {
  const fakeUser = { name: 'X' };
  global.fetch.mockResolvedValue({
    ok: true,
    json: async () => fakeUser,
  });
 
  const { result, waitForNextUpdate } = renderHook(() => useUserProfile('1'));
  expect(result.current.isLoading).toBe(true);
  await waitForNextUpdate();
  expect(result.current.user).toEqual(fakeUser);
  expect(result.current.isLoading).toBe(false);
});