From 822368ed034fbc3bd0f67c67cf909f6dcc057603 Mon Sep 17 00:00:00 2001 From: eric-kitagawa Date: Fri, 17 Apr 2026 07:04:50 -0400 Subject: [PATCH 1/5] feat: hookup orderby to be --- .../src/components/rooms/OrderByDropdown.tsx | 26 ++++++++++-------- .../web/src/components/rooms/RoomsList.tsx | 27 ++++++++++++++----- .../web/src/components/rooms/RoomsToolbar.tsx | 14 ++++++---- .../web/src/routes/_protected/rooms.index.tsx | 9 ++++--- 4 files changed, 49 insertions(+), 27 deletions(-) diff --git a/clients/web/src/components/rooms/OrderByDropdown.tsx b/clients/web/src/components/rooms/OrderByDropdown.tsx index fc6480af..618c2fc9 100644 --- a/clients/web/src/components/rooms/OrderByDropdown.tsx +++ b/clients/web/src/components/rooms/OrderByDropdown.tsx @@ -2,22 +2,26 @@ import { ChevronDown } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; +export type RoomSortOption = "ascending" | "descending" | "urgency"; + type OrderByDropdownProps = { - ascending: boolean; - setAscending: (ascending: boolean) => void; + sortOption: RoomSortOption; + setSortOption: (option: RoomSortOption) => void; }; -const OPTIONS: Array<{ label: string; ascending: boolean }> = [ - { label: "Ascending", ascending: true }, - { label: "Descending", ascending: false }, +const OPTIONS: Array<{ label: string; value: RoomSortOption }> = [ + { label: "Ascending", value: "ascending" }, + { label: "Descending", value: "descending" }, + { label: "Urgency", value: "urgency" }, ]; export function OrderByDropdown({ - ascending, - setAscending, + sortOption, + setSortOption, }: OrderByDropdownProps) { const [open, setOpen] = useState(false); - const currentLabel = ascending ? "Ascending" : "Descending"; + const currentLabel = + OPTIONS.find((o) => o.value === sortOption)?.label ?? "Ascending"; return (
{OPTIONS.map((option) => { - const isSelected = option.ascending === ascending; + const isSelected = option.value === sortOption; return (
{hasActiveFilterTags ? ( diff --git a/clients/web/src/routes/_protected/rooms.index.tsx b/clients/web/src/routes/_protected/rooms.index.tsx index 0bc4e57c..4edaf6ff 100644 --- a/clients/web/src/routes/_protected/rooms.index.tsx +++ b/clients/web/src/routes/_protected/rooms.index.tsx @@ -3,6 +3,7 @@ import { useState } from "react"; import { useQuery } from "@tanstack/react-query"; import { MakeRequestPriority, usePostRoomsHook } from "@shared"; import type { Request, RoomWithOptionalGuestBooking } from "@shared"; +import type { RoomSortOption } from "@/components/rooms/OrderByDropdown"; import { GlobalTaskInput } from "@/components/ui/GlobalTaskInput"; import { PageShell } from "@/components/ui/PageShell"; import { RoomsToolbar } from "@/components/rooms/RoomsToolbar"; @@ -27,7 +28,7 @@ function RoomsPage() { }); const [selectedRoom, setSelectedRoom] = useState(null); - const [ascending, setAscending] = useState(true); + const [sortOption, setSortOption] = useState("ascending"); const [generatedData, setGeneratedData] = useState<{ name?: string; description?: string; @@ -103,12 +104,12 @@ function RoomsPage() { onChangeFloors={setFloors} onApplyFilterChips={setFilterChips} onRemoveFilterChip={removeFilterChip} - ascending={ascending} - setAscending={setAscending} + sortOption={sortOption} + setSortOption={setSortOption} /> { setGeneratedData(null); setSelectedRoom(room); From 4c7246e4e4080a1905adc1e013601730c3025f8a Mon Sep 17 00:00:00 2001 From: eric-kitagawa Date: Fri, 17 Apr 2026 07:15:51 -0400 Subject: [PATCH 2/5] feat: remove all client-side sorting --- .../web/src/components/rooms/RoomsList.tsx | 34 +------------------ .../web/src/routes/_protected/rooms.index.tsx | 4 +-- 2 files changed, 3 insertions(+), 35 deletions(-) diff --git a/clients/web/src/components/rooms/RoomsList.tsx b/clients/web/src/components/rooms/RoomsList.tsx index 4d97af58..a195b706 100644 --- a/clients/web/src/components/rooms/RoomsList.tsx +++ b/clients/web/src/components/rooms/RoomsList.tsx @@ -1,54 +1,22 @@ -import { useMemo } from "react"; import type { RoomWithOptionalGuestBooking } from "@shared"; -import type { RoomSortOption } from "@/components/rooms/OrderByDropdown"; import { RoomCard } from "@/components/rooms/RoomCard"; type RoomsListProps = { rooms: Array; onRoomSelect: (room: RoomWithOptionalGuestBooking) => void; - sortOption: RoomSortOption; selectedRoomNumber?: number | null; }; -const PRIORITY_RANK: Record = { - high: 3, - medium: 2, - low: 1, -}; - -function sortRooms( - rooms: Array, - sortOption: RoomSortOption, -): Array { - return [...rooms].sort((a, b) => { - if (sortOption === "urgency") { - const ar = PRIORITY_RANK[a.priority ?? ""] ?? 0; - const br = PRIORITY_RANK[b.priority ?? ""] ?? 0; - if (br !== ar) return br - ar; - return (a.room_number ?? 0) - (b.room_number ?? 0); - } - const an = a.room_number ?? 0; - const bn = b.room_number ?? 0; - return sortOption === "ascending" ? an - bn : bn - an; - }); -} - export function RoomsList({ rooms, onRoomSelect, - sortOption, selectedRoomNumber = null, }: RoomsListProps) { - const sortedRooms = useMemo( - () => sortRooms(rooms, sortOption), - [rooms, sortOption], - ); - return (