feat: room list
This commit is contained in:
Ryan Di
@@ -0,0 +1,258 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { trackEvent } from "@excalidraw/excalidraw/analytics";
|
||||
import { useI18n } from "@excalidraw/excalidraw/i18n";
|
||||
import {
|
||||
FreedrawIcon,
|
||||
LinkIcon,
|
||||
TrashIcon,
|
||||
} from "@excalidraw/excalidraw/components/icons";
|
||||
|
||||
import { roomManager, type CollabRoom } from "../data/roomManager";
|
||||
|
||||
import "./RoomList.scss";
|
||||
|
||||
import type { CollabAPI } from "../collab/Collab";
|
||||
|
||||
interface RoomListProps {
|
||||
collabAPI: CollabAPI;
|
||||
onRoomSelect: (roomId: string, roomKey: string) => void;
|
||||
handleClose: () => void;
|
||||
}
|
||||
|
||||
const formatDate = (timestamp: number, t: ReturnType<typeof useI18n>["t"]) => {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays === 0) {
|
||||
return t("roomDialog.today");
|
||||
} else if (diffDays === 1) {
|
||||
return t("roomDialog.yesterday");
|
||||
} else if (diffDays < 7) {
|
||||
return t("roomDialog.daysAgo", { days: diffDays });
|
||||
}
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
const RoomItem = ({
|
||||
room,
|
||||
onDelete,
|
||||
onSelect,
|
||||
onRename,
|
||||
}: {
|
||||
room: CollabRoom;
|
||||
onDelete: (roomId: string) => void;
|
||||
onSelect: (roomId: string, roomKey: string) => void;
|
||||
onRename: (roomId: string, name: string) => void;
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editName, setEditName] = useState(room.name || "");
|
||||
|
||||
const handleRename = () => {
|
||||
if (editName.trim()) {
|
||||
onRename(room.roomId, editName.trim());
|
||||
}
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === "Enter") {
|
||||
handleRename();
|
||||
} else if (event.key === "Escape") {
|
||||
setEditName(room.name || "");
|
||||
setIsEditing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="RoomItem">
|
||||
<div className="RoomItem__info">
|
||||
<div className="RoomItem__name">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
onBlur={handleRename}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t("roomDialog.roomNamePlaceholder")}
|
||||
autoFocus
|
||||
className="RoomItem__nameInput"
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="RoomItem__nameText"
|
||||
onClick={() => setIsEditing(true)}
|
||||
title={t("roomDialog.roomNameTooltip")}
|
||||
>
|
||||
{room.name || `Room ${room.roomId}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="RoomItem__meta">
|
||||
<span className="RoomItem__date">
|
||||
{t("roomDialog.created")} {formatDate(room.createdAt, t)}
|
||||
</span>
|
||||
{room.lastAccessed !== room.createdAt && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="RoomItem__lastAccessed">
|
||||
{t("roomDialog.lastUsed")}: {formatDate(room.lastAccessed, t)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="RoomItem__actions">
|
||||
<button
|
||||
className="RoomItem__action"
|
||||
onClick={() => onSelect(room.roomId, room.roomKey)}
|
||||
title={t("roomDialog.copyRoomLinkTooltip")}
|
||||
aria-label={t("roomDialog.copyRoomLinkTooltip")}
|
||||
>
|
||||
{LinkIcon}
|
||||
</button>
|
||||
<button
|
||||
className="RoomItem__action"
|
||||
onClick={() => setIsEditing(true)}
|
||||
title={t("roomDialog.renameRoomTooltip")}
|
||||
aria-label={t("roomDialog.renameRoomTooltip")}
|
||||
>
|
||||
{FreedrawIcon}
|
||||
</button>
|
||||
<button
|
||||
className="RoomItem__action RoomItem__action--danger"
|
||||
onClick={() => onDelete(room.roomId)}
|
||||
title={t("roomDialog.deleteRoomTooltip")}
|
||||
aria-label={t("roomDialog.deleteRoomTooltip")}
|
||||
>
|
||||
{TrashIcon}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const RoomList = ({
|
||||
collabAPI,
|
||||
onRoomSelect,
|
||||
handleClose,
|
||||
}: RoomListProps) => {
|
||||
const { t } = useI18n();
|
||||
const [rooms, setRooms] = useState<CollabRoom[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const loadRooms = async () => {
|
||||
try {
|
||||
const userRooms = await roomManager.getRooms();
|
||||
setRooms(userRooms);
|
||||
} catch (error) {
|
||||
console.error("Failed to load rooms:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadRooms();
|
||||
}, []);
|
||||
|
||||
const handleDeleteRoom = async (roomId: string) => {
|
||||
if (window.confirm(t("roomDialog.deleteRoomConfirm"))) {
|
||||
try {
|
||||
await roomManager.deleteRoom(roomId);
|
||||
await loadRooms(); // Refresh the list
|
||||
trackEvent("share", "room deleted");
|
||||
} catch (error) {
|
||||
console.error("Failed to delete room:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRenameRoom = async (roomId: string, name: string) => {
|
||||
try {
|
||||
await roomManager.updateRoomName(roomId, name);
|
||||
await loadRooms(); // Refresh the list
|
||||
} catch (error) {
|
||||
console.error("Failed to rename room:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRoomSelect = async (roomId: string, roomKey: string) => {
|
||||
try {
|
||||
await roomManager.updateRoomAccess(roomId);
|
||||
trackEvent("share", "room rejoined");
|
||||
onRoomSelect(roomId, roomKey);
|
||||
} catch (error) {
|
||||
console.error("Failed to update room access:", error);
|
||||
onRoomSelect(roomId, roomKey);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearAll = async () => {
|
||||
if (window.confirm(t("roomDialog.deleteAllRoomsConfirm"))) {
|
||||
try {
|
||||
await roomManager.clearAllRooms();
|
||||
setRooms([]);
|
||||
trackEvent("share", "all rooms cleared");
|
||||
} catch (error) {
|
||||
console.error("Failed to clear all rooms:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="RoomList">
|
||||
<div className="RoomList__header">
|
||||
<h3>{t("roomDialog.roomListTitle")}</h3>
|
||||
</div>
|
||||
<div className="RoomList__loading">
|
||||
{t("roomDialog.roomListLoading")}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="RoomList">
|
||||
<div className="RoomList__header">
|
||||
<h3>{t("roomDialog.roomListTitle")}</h3>
|
||||
{rooms.length > 0 && (
|
||||
<button
|
||||
className="RoomList__clearAll"
|
||||
onClick={handleClearAll}
|
||||
title={t("roomDialog.deleteAllRooms")}
|
||||
>
|
||||
{t("roomDialog.deleteAllRooms")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="RoomList__description">
|
||||
{t("roomDialog.roomListDescription")}
|
||||
</p>
|
||||
|
||||
{rooms.length === 0 ? (
|
||||
<div className="RoomList__empty">
|
||||
<p>{t("roomDialog.roomListEmpty")}</p>
|
||||
<p>{t("roomDialog.roomListEmptySubtext")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="RoomList__items">
|
||||
{rooms.map((room) => (
|
||||
<RoomItem
|
||||
key={room.id}
|
||||
room={room}
|
||||
onDelete={handleDeleteRoom}
|
||||
onSelect={handleRoomSelect}
|
||||
onRename={handleRenameRoom}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user