Создать мобильное приложение на React Native.
Для серверного взаимодействия используется тестовый сервер на Graphql https://graphqlzero.almansi.me/api.
Макет https://www.figma.com/file/gOT6KU7omHF42dRR9Y7R7C/React-Native-Test-Task
Приложение состоит из трех страниц.
Feed page разделен на два таба.
Первый таб подгружает контейнер с альбомами (query.albums), второй таб подгружает посты (query.posts).
Список элементов сначала подгружается 20 первых постов/альбомов, при скролле вниз подгружается следующие 20 элементов.
На макетах указан прелоудер при первичной подгрузке + при подгрузке дополнительных элементов.
Альбом можно удалить, свайпнув элемент влево и кликнув на кнопку удаления, открывается попап с преудпреждением об удалении. При подтверждении срабатывает запрос на удаление (mutation.deleteAlbum) и элемент пропадает из списка.
Также на альбоме можно нажать на картинку (картинка берется из первого элемента списка query.album.photos) и открывается модалка с галлерей отображающей все картинки альбома (перелистывание работает через свайп). Помимо самой картинки, меняется и тайтл и внешняя ссылка.
Также на табе альбомы есть кнопка создания альбома. При нажатии открывается модалка с вводом данных для создания альбома (из данных заполняется title и description, пока поля не будут заполнены отправка данных должна быть заблокирована). При сабмите данной формы уходит запрос на создание альбома (mutation.createAlbum). После этого модалка закрывается и новый альбом добавляется первым в список альбомов.
Страница с ответами на вопросы с вложенной структурой. При выборе темы вопроса переход в блок с вопросами по этой теме. При клике на вопрос открывается ответ.
Для неуказанных пунтков в макетах использовать рыбный текст.
Отображение данных о текущем пользователе (query.user с параметром id: ’1’).
Все мутации должны отрабатывать с optimistic updates (важно учитывать, что после выполнения запросов база данных не меняется на тестовом сервере).
Стек технологий:
- React Native
- Expo Cli - для разворачивания и удобства разработки (под веб, эмулятор, мобильник)
- react-navigation
- Apollo Client - для graphQL и хранения \ кеширования данных (вместо redux)
- AsyncStorage - для персистинга данных приложения
- react-native-paper - компоненты, стилизация и темы
- react-hook-form - управления и валидация форм
- Web
npm run web
http://localhost:19002/ - веб консоль и управление http://localhost:19006/ - адрес web версии - Emulation Запустите Android Studio. Запустите эмулятор и дождитесь загрузки. В терминале к запущенному expo нажмите: "a" (for Android)
- Mobile Use QR-code from http://localhost:19002/
Изучить задание, наметить архитектуруразвернуть проект \ подобрать boilerplateeslint \ tslintПри комитах автопроверка, версионирование, change log через huskyраутинг на react-nativeподключить graphql: чтение основных данныхкомпонент лист со свайпами (для albums)компонент слайдер (для album view)load more для списковстилизовать в соответствии с дизайном экраны (Feed, FAQ, Profile)стилизовать экран "добавить альбом" (форма, портал)стилизовать компонент модального confirm окна снизуподгрузить кастомные иконкимутации на GQL (удаление и создание)компонент скелетоны при загрузки (пока без expo web)- пользователя подгружать
- решить остальные важные \ опциональные задачи
- рефакторинг (по возможности)
генерация TS схема для gql- сбрасывать stack при клике на футер табу
fetchQuery- подключить тестирование
выделить модули- локализация
- вынести конфиги
- splash image
TODO