alexbuki
@alexbuki
программист js

Насколько решение соответствует ТЗ(React)? Есть ли грубые ошибки?

Уважаемые специалисты по React, буду очень признателен, если кто-то посмотрит как было выполнено тестовое задание. Сроки довольно сжатые и я все время работал на vue js + vuex.
Как показала практика он сильно отличается от react + redux.
Понимаю что дорабатывать там много всего нужно, важно указать на грубые ошибки.

Текст задания:
Реализовать на реакте интерфейс быстрого поиска. Состоит из двух частей.
1. Верхняя панель: поисковая строка с инпутом. В процессе ввода букв запроса, появляются и конкретизируются саджесты под инпутом и результаты.
2. Результаты: список из 10 результатов + пагинация. Параметры в урл добавлять не требуется.
(я понял, что пагинация на клиенте)
Быстрый поиск означает, что результаты обновляются в процессе ввода запроса в поисковую строку. Для хранения минимального состояния приложения (текущая страница пагинации, текущий запрос) нужно использовать redux. Бэкенд не нужен (все моки данных можно хранить прямо в json-файле, читать прямо оттуда), дизайн не требуется.

Важно продемонстрировать умение декомпозировать интерфейс на компоненты, давать им понятные имена.

У меня получился следующий код:
https://codesandbox.io/s/github/vito2005/mrtest

https://ctm1w.csb.app/

- данные забираю из json через промисы и сет таймаут
- json - массив городов с адресами и координатами
- делаю поиск в json по началу названия города
- компоненты самые простые: 1. компонент автокомплит для suggestions; 2. компонент контент для результатов; 3. пагинация внутри контента
- два асинхронных экшн в редакс для запроса suggestions и результатов
  • Вопрос задан
  • 759 просмотров
Решения вопроса 1
@afanasiyz
Javascript-разработчик
По коду кажется все ОК (никаких сильных претензий не возникает сходу), только по-моему пагинацию прикрутить вы забыли (она нигде не вызывается).

UPD: претензии небольшие все таки есть, class Results:
renderNoResultsMessage() {
    const { results, noResultsMessage } = this.props;
    if (results && !results.length && noResultsMessage) {
      return (<div className="no-result">
        <h3>
          {noResultsMessage}
        </h3>
      </div>);
    }
  }


Кажется эта функция не очень то renderNoResults, она еще checkForResults, а только потом render - не надо так делать, по коду непонятно. функция, которая renderSMTH -должна только рендерить, без лишних проверок

UPD 2 пагинацию увидел, с ней все ок.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы