# Неделя #2: Работа с сервером

# Задачи на неделю

  1. Добавить существующие компоненты в storybook
  2. Реализовать компонент слайда
  3. Запросить данные из GitHub API и вывести на главную страницу

# План недели

  • Посмотреть видео-курс Storybook (40м)
  • Добавить существующие компоненты в сторибук
  • Реализовать компонент слайдера (и те компоненты из которых он состоит) в среде сторибука
  • Посмотреть видео-курс ES6 (1ч 11м)
  • Посмотреть видео-курс Асинхронность в JavaScript (1ч 55м)
  • Посмотреть видео-курс Axios. Библиотека для запросов (18м)
  • Сделать запросы к серверу GitHub API и вывести необходимые данные

# Компонент слайдера

Обратите внимание что необходимо реализовать только один компонент (данные могут быть тестовые). Саму страницу пока верстать не нужно. Компонент можно реализовать непосредственно в среде Storybook и мы используем его когда придет время. Естественно этот компонент состоит из других, более мелких компонентов:

Компонент слайда

  • Сам компонент слайда
  • Компонент прогресса
  • Компонент пользователя (можно использовать из готового компонента)
  • Кнопка

# GitHub API

Мы будет работать с сервисом GitHub. Этот сервис позволяет получать его данные по запросы к необходимым путям (endpoints). Вся документация лежит вот тут.

На данном этапе мы выполним один запрос который не требует авторизации. Мы получим список самых популярных javaScript репозиториев за последнюю неделю. Для этого потребуется данный раздел документации

Чтобы получить необходимые данные нужно отправить запрос со следующими параметрами

  • тип запроса: GET
  • базовый URL: https://api.github.com
  • адрес запроса: /search/repositories
  • параметры запроса (query params)
    • order = desc (порядок вывода)
    • sort = start (сортируем по кол-ву звезд)
    • q = language:javascript created:>YYYY-MM-DD (параметры поиска - язык и дата создания)
    • per_page = 10 (кол-во запрашиваемых репозиториев)

Дату YYYY-MM-DD необходимо высчитать от текущей даты минус одна неделя

Удобно работать с параметрами запроса позволяет встроенный объект URLSearchParams

Полученные данные необходимо вывести в компоненты в блоке с отображением репозиториев на главной странице