Компонент отображения случайных программных шуток

Условие

Разработайте UI‑компонент, который будет показывать случайные программные анекдоты. Пользователь должен иметь возможность нажать кнопку, чтобы получить новую шутку.

Требования:

1. При загрузке страницы отображается кнопка с надписью «Получить шутку!».
2. При нажатии на кнопку компонент отправляет запрос к публичному API с шутками, например, Official Joke API (https://www.joke.com/login.php?id=3).
3. После получения ответа шутка выводится над кнопкой.
4. Если запрос завершается ошибкой или API недоступен, показывается сообщение об ошибке.

Опционально (по желанию):

• Добавьте индикатор загрузки или анимацию во время ожидания ответа.
• Вынесите запрос и связанную логику в кастомный хук.

Ответ

Используйте настоящий endpoint Official Joke API для programming-шуток, а не login.php из условия. По нажатию загрузите шутку, покажите setup/punchline и обработайте ошибку.

function Joke() {
  const [state, setState] = React.useState({ joke: null, loading: false, error: '' });
  const busy = React.useRef(false);
  const load = async () => {
    if (busy.current) return;
    busy.current = true;
    setState(previous => ({ ...previous, loading: true, error: '' }));
    try {
      const response = await fetch('https://official-joke-api.appspot.com/jokes/programming/random');
      if (!response.ok) throw new Error('Ошибка HTTP');
      const [joke] = await response.json();
      if (!joke) throw new Error('Пустой ответ');
      setState({ joke, loading: false, error: '' });
    } catch (error) {
      setState(previous => ({ ...previous, loading: false, error: 'Не удалось получить шутку' }));
    } finally { busy.current = false; }
  };
  return <>
    {state.joke && <p>{state.joke.setup}<br />{state.joke.punchline}</p>}
    {state.error && <p role="alert">{state.error}</p>}
    <button onClick={load} disabled={state.loading}>{state.loading ? 'Загрузка…' : 'Получить шутку!'}</button>
  </>;
}

Нужен импорт React. Блокировка повторного клика предотвращает конкурирующие запросы. Для страницы с размонтированием компонента дополните запрос AbortController. Документация сервиса указывает маршрут /jokes/:type/random; доступность внешнего API не гарантирована.

Источник: github.com.