Собственно, в вопросе уже и есть ответ.
Сначала группируем по нужному полю, потом каждую группу сортируем по нужному полю.
Результат группировки на выходе может быть разным. Но тут вполне себе подойдет, если в итоге будет объект, где ключ — название группы, значение — сами элементы (именно так _.groupBy и R.groupBy и работает). Далее просто проходимся по этому объекту и каждую группу сортируем (опять же map + sort\sortBy из lodash \ ramda). Если без них, то чуть сложнее.
И после выводим значения. Берем все группы, по группам рендерим список первого уровня, для каждой группы берем её элементы и рендерим внутренний список.
Вы создаете стор в отдельном файле. Там миддлвар подключается.
Но далее в index.js вы создаете другой стор, где миддлваров уже нет. И в Provider передаете именно его.
Ну, могли бы посмотреть как оно там сделано.
Верстка на отдельной странице. Вставляется через , ему же при клике на иконку выставляется нужная ширина и мишура в виде рамочки телефона.
Сложности никакой нет.