Пользователь получает данные освещения от сервера. В пользовательском интерфейсе пользователь может взаимодействовать с каждым источником освещения (например, включать и выключать его). Все светильники отображаются на одной странице. Однако пользователь хочет сгруппировать их. (например, освещение столовой, освещение сада и т. д.).
Данные, которые я получаю с сервера, выглядят так ( devEui уникален):
[
{
"updateTime": 1000,
"data": {
"devEui": "0x001werwerwedc2705",
"State": "OFF",
"lastSeen": "2019-04-27T07:28:03.814Z"
}
},
{
"updateTime": 1000,
"data": {
"devEui": "0xwerwerwerwrerwer",
"State": "ON",
"linkquality": 139,
"last_seen": "2019-05-04T12:10:02.837Z"
}
},
{
"updateTime": 1000,
"data": {
"devEui": "0x001242342342344dc2700",
"State": "OFF",
"lastSeen": "2019-04-27T07:28:03.814Z"
}
}
]
Ожидаемое поведение : пользователь создает группу (нажмите кнопку add -> присвойте ей уникальное имя ) -> группа отобразится в виде поля (очень простой Просмотр компонента с именем на нем) -> пользователь перетаскивает представление «Освещение» (например, «Освещение в саду») и помещает его в группу (блок), в которой он уже создан. Затем освещение должно быть визуализировано внутри его группы. (пользователь нажимает на группу -> перенаправляется на другую страницу -> Там он видит освещение сада)
Сервер никогда не будет знать логику группировки, поскольку она уникальна для каждого пользователя. (Вы можете использовать асинхронное хранилище , чтобы знать, где визуализировать каждый источник света при последующем рендеринге -> когда данные получены, необходимо прочитать хранилище на мобильном устройстве -> каждый слот должен быть представлен в своей собственной группе)
Мне нужна простейшая реализация этой логики в React Native.