/exam-tooth-react-mobx-ts-sc-router-material

Primary LanguageJavaScript

exam-tooth-react-mobx-ts-sc-router-material

Тестовое задание.

https://k0t0vich.github.io/react/exam-tooth-react-mobx-ts-sc-router-material/index.html

##Getting Started

npm install / yarn install - Install dependencies.
npm run start / yarn start - Run development build with hot reload. If it doesn't start, make sure you aren't running anything else in the same port. Default PORT=3000
npm run build / yarn build - Run production build. See public folder.

Тестовое задание На стеке React + TypeScript + MobX + Styled-components + webpack + React-router v4 Выполнить следующее задание: Напишите небольшое SPA приложение, состоящее из 3-х основных компонентов

  • Страница авторизации (логин пароль захардкожен – root / admin)

  • При успешном вводе логина/пароля, запись в LocalStorage флага о допуске к сайту(любой ключ) . переход на следующий этап 2)

  • Без авторизации(то есть без записи в localStorage) делать редирект на страницу авторизации

  • При не успешном вводе, сообщение об ошибке – в любом, понятным для пользователя виде

  • Страница с таблицей (Все поля из прикрепленного JSON’a)

  • Страница 2) и страница 3) должны содержать общий header, в котором указан логин и кнопка выйти

  • Первый столбец – reference

  • Только в этом столбце значения должны быть ссылками(id = caseUid), а не текстом.

  • При клике на ссылку переход на 3) компонент с передачей этого id

  • К таблице должен применятся простой фильтр типа <input />, который фильтрует данные по всем столбцам и оставляет только те записи, которые подходят под его действие

  • Фильтр применяется по нажатию на Enter

  • Будет плюсом, но необязательно: подсветить результаты совпадений в отфильтрованной таблице

  • На странице должна быть доступна пагинация (pagination) + выбор количества записей на странице(5,10,15,25)

  • Страница с материалом

  • На вход дается id

  • По id получить запись из JSON’a

  • Вывести эту запись на страницу материала в виде таблицы Ключ-значение

  • Страница должна содержать кнопку «Назад к таблице»

  • На страницу можно перейти по прямому url. Например http://localhost:9000/table/case?caseUid=1234

  • 1.a.i должно выполнятся! Дополнение MobX использовать в strict mode, то есть изменять состояние можно только через @action Для прокидывания MobX стейта, использовать Provider – из mobx-react, далее использовать во всех компонентах @inject(‘stateName’) Все интерфейсы должны быть описаны. Нельзя использовать тип any!!! То есть для всех аргументов, даже для событий мыши, нужно правильно использовать типы и правильно указывать обобщение.

Все тестовое задание должно запускаться при помощи двух команд.

  • Yarn install / npm install
  • Yarn run start / npm … Порт – любой Все красивости анимации на ваше усмотрение, но будет плюсом. Для создания элементов интерфейса можно использовать любые либы. Как вариант - https://material-ui.com/ MobX лучше использовать > 3 версии Typescript – последней версии P.s. Можно использовать любые boilerplate, для создания SPA. Но будьте готовы объяснить, что значит каждый параметр. То есть при его использовании, удалите все не нужное.

Почитайте о best practices по всему стеку, чтобы использовать наиболее элегантные решения