+
+
Rooms
+
+
+
+ {loading && rooms.length === 0 && (
+
Loading...
+ )}
+
+ {rooms.map((room) => (
+
onSelectRoom(room.id)}
+ >
+
{room.name}
+
+ {room.participantCount} member{room.participantCount !== 1 && "s"}
+ {room.unreadCount > 0 && (
+ {room.unreadCount}
+ )}
+
+
+ ))}
+
+ {!loading && rooms.length === 0 && (
+
+ No rooms yet. Create one or ask another user to invite you.
+
+ )}
+
+
+
Join a Room
+
+ Paste a room ID to join an existing room.
+
+
+
+
+ {showCreate && (
+
setShowCreate(false)}
+ onCreated={onSelectRoom}
+ />
+ )}
+
+ );
+}
diff --git a/samples/ChatService/Trax.Samples.ChatService.Client/src/components/UserSelector.tsx b/samples/ChatService/Trax.Samples.ChatService.Client/src/components/UserSelector.tsx
new file mode 100644
index 0000000..99b8612
--- /dev/null
+++ b/samples/ChatService/Trax.Samples.ChatService.Client/src/components/UserSelector.tsx
@@ -0,0 +1,26 @@
+import { useUser } from "../context/UserContext";
+import { USERS } from "../types";
+
+export function UserSelector() {
+ const { user, setUser } = useUser();
+
+ return (
+