Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { useStores } from "~/hooks/useStores";
import { Room } from "./Room";
import Masonry from "react-masonry-css";
export const RoomList = () => {
const { hub } = useStores();
const rooms = hub.devices?.reduce(
(acc, device) => {
if (device.Room_location !== undefined) {
if (!acc[device.Room_location]) {
acc[device.Room_location] = [];
}
acc[device.Room_location].push(device);
}
return acc;
},
{} as Record<string, typeof hub.devices>,
);
const breakpointColumnsObj = {
default: 3,
1400: 2, // 2 columns at 1400px or less
900: 1, // 1 column at 900px or less
};
const roomEntries = rooms ? Object.entries(rooms) : [];
const totalRooms = roomEntries.length;
const totalDevices = roomEntries.reduce(
(total, [, devices]) => total + devices.length,
0,
);
return (
<section
className="sm:py-16 sm:px-20 px-7 py-10 w-full bg-base-200"
role="main"
aria-labelledby="rooms-heading"
>
<h1 id="rooms-heading" className="sr-only">
Smart Home Rooms and Devices
</h1>
<div role="status" aria-live="polite" className="sr-only">
{totalRooms > 0
? `${totalRooms} rooms found with ${totalDevices} total devices`
: "No rooms or devices found"}
</div>
{rooms && totalRooms > 0 ? (
<section aria-labelledby="rooms-grid-heading" role="region">
<h2 id="rooms-grid-heading" className="sr-only">
Room Grid Layout
</h2>
<Masonry
breakpointCols={breakpointColumnsObj}
className="flex w-full sm:-ml-6"
columnClassName="sm:pl-9"
aria-label={`${totalRooms} rooms displayed in masonry layout`}
>
{roomEntries.map(([localId, devices], index) => (
<div
key={localId}
className="mb-12"
data-cy={`room-${localId}`}
aria-label={`Room ${
index + 1
} of ${totalRooms}: ${
localId || "Unnamed room"
} with ${devices.length} devices`}
>
<Room key={localId} devices={devices} />
</div>
))}
</Masonry>
</section>
) : (
<section
role="status"
aria-live="polite"
className="text-center"
>
<h2 className="sr-only">No Content Available</h2>
<p className="text-lg">No devices found.</p>
<p className="text-sm text-gray-600 mt-2 sr-only">
Try checking your device connections or refresh the
page.
</p>
</section>
)}
</section>
);
};
|