+
+ {/* RIGHT: ICONS AND USER */}
+
+ {/* SEARCH BAR */}
+
+
+
+
+
+
-
+
- John Doe
+
+ {userMetadata?.firstName} {userMetadata?.lastName}
+
- {user?.publicMetadata?.role as string}
+ {role}
- {/*
*/}
diff --git a/src/components/Whiteboard/WhiteboardCore.tsx b/src/components/Whiteboard/WhiteboardCore.tsx
new file mode 100644
index 0000000..e1b0dd2
--- /dev/null
+++ b/src/components/Whiteboard/WhiteboardCore.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { useEffect, useState, useRef, createContext, useContext } from "react";
+import {
+ Tldraw,
+ createTLStore,
+ TLStore,
+ Editor,
+ getSnapshot,
+ loadSnapshot,
+ useDialogs,
+ TldrawUiButton,
+ TldrawUiButtonLabel,
+ TldrawUiButtonIcon,
+ TldrawUiDialogHeader,
+ TldrawUiDialogTitle,
+ TldrawUiDialogCloseButton,
+ TldrawUiDialogBody,
+ TldrawUiIcon
+} from "tldraw";
+import "tldraw/tldraw.css";
+import { getLessonWhiteboard, saveLessonSnapshot, SnapshotType } from "@/lib/whiteboardActions";
+import { toast } from "react-toastify";
+import { useUser } from "@clerk/nextjs";
+
+type WhiteboardContextType = {
+ activeState: SnapshotType;
+ isTeacherOrAdmin: boolean;
+ handleSave: (type: SnapshotType) => void;
+ handleLoadData: (type: SnapshotType) => void;
+ lessonId: number | null;
+ whiteboardRecord: any;
+ isFullscreen: boolean;
+};
+
+const WhiteboardContext = createContext
(null);
+
+const useWhiteboardContext = () => {
+ const ctx = useContext(WhiteboardContext);
+ if (!ctx) throw new Error("Missing WhiteboardContext.Provider");
+ return ctx;
+};
+
+function NativeFileManagerDialog({ onClose }: { onClose: () => void }) {
+ const { activeState, isTeacherOrAdmin, handleSave, handleLoadData, whiteboardRecord } = useWhiteboardContext();
+
+ const renderFileRow = (type: SnapshotType, title: string) => {
+ const hasData = whiteboardRecord && whiteboardRecord[`${type}SnapshotData`];
+ const isActive = activeState === type;
+
+ return (
+
+
+
+ {title}
+ {isActive && ACTIVE}
+
+
+ {hasData ? "Snapshot available" : "No snapshot saved"}
+
+
+
+ {isTeacherOrAdmin && (
+ { handleSave(type); }}>
+ Save Here
+
+ )}
+ { handleLoadData(type); onClose(); }}>
+ Load
+
+
+
+ Manage your lesson whiteboard snapshots below.
+ {!isTeacherOrAdmin && " As a student, you can only load available snapshots."}
+
+ {renderFileRow("planned", "Planned")}
+ {renderFileRow("live", "Live")}
+ {renderFileRow("final", "Final")}
+
+
+ )
+}
+
+const CustomSharePanel = () => {
+ const { addDialog } = useDialogs();
+ const { isFullscreen, lessonId } = useWhiteboardContext();
+
+ return (
+
+ {!isFullscreen && lessonId && (
+ {
+ window.open(`/board?lessonId=${lessonId}`, '_blank');
+ }}
+ >
+
+
+ )}
+ addDialog({ component: NativeFileManagerDialog })}
+ >
+
+
+
+ );
+};
+
+const WhiteboardCore = ({ lessonId, isFullscreen = false }: { lessonId: number | null, isFullscreen?: boolean }) => {
+ const { user } = useUser();
+ const role = user?.publicMetadata?.role as string | undefined;
+ const isTeacherOrAdmin = role === "teacher" || role === "admin";
+
+ const [store, setStore] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [activeState, setActiveState] = useState("planned");
+ const [whiteboardRecord, setWhiteboardRecord] = useState(null);
+ const editorRef = useRef(null);
+
+ useEffect(() => {
+ const fetchWhiteboard = async () => {
+ if (!lessonId) {
+ setLoading(false);
+ return;
+ }
+
+ const { success, data } = await getLessonWhiteboard(lessonId);
+ if (success && data) {
+ setWhiteboardRecord(data);
+
+ // Initialize store based on role
+ const newStore = createTLStore();
+
+ let defaultSnapshot = data.plannedSnapshotData;
+ let defaultState: SnapshotType = "planned";
+
+ // For students, default to live, or final if live doesn't exist. If neither, show empty.
+ if (!isTeacherOrAdmin) {
+ if (data.liveSnapshotData) {
+ defaultSnapshot = data.liveSnapshotData;
+ defaultState = "live";
+ } else if (data.finalSnapshotData) {
+ defaultSnapshot = data.finalSnapshotData;
+ defaultState = "final";
+ } else {
+ defaultSnapshot = null;
+ defaultState = "live"; // Wait for live
+ }
+ }
+
+ if (defaultSnapshot) {
+ try {
+ loadSnapshot(newStore, defaultSnapshot as any);
+ } catch (e) {
+ console.error("Failed to load snapshot", e);
+ }
+ }
+ setStore(newStore);
+ setActiveState(defaultState);
+ }
+ setLoading(false);
+ };
+
+ if (role !== undefined) {
+ fetchWhiteboard();
+ }
+ }, [lessonId, role]);
+
+ const handleSave = async (type: SnapshotType) => {
+ if (!lessonId || !editorRef.current || !isTeacherOrAdmin) return;
+
+ const snapshot = getSnapshot(editorRef.current.store);
+ const { success } = await saveLessonSnapshot(lessonId, type, snapshot);
+
+ if (success) {
+ toast.success(`Successfully saved ${type} snapshot!`);
+ setActiveState(type);
+ setWhiteboardRecord((prev: any) => ({
+ ...prev,
+ [`${type}SnapshotData`]: snapshot
+ }));
+ } else {
+ toast.error("Failed to save snapshot.");
+ }
+ };
+
+ const handleLoadData = (type: SnapshotType) => {
+ if (!whiteboardRecord || !editorRef.current) return;
+
+ let snapshotData = null;
+ if (type === "planned") snapshotData = whiteboardRecord.plannedSnapshotData;
+ if (type === "live") snapshotData = whiteboardRecord.liveSnapshotData;
+ if (type === "final") snapshotData = whiteboardRecord.finalSnapshotData;
+
+ if (snapshotData) {
+ try {
+ loadSnapshot(editorRef.current.store, snapshotData as any);
+ toast.success(`Loaded ${type} snapshot.`);
+ setActiveState(type);
+ } catch (e) {
+ console.error("Failed to load snapshot", e);
+ toast.error("Snapshot data is invalid or corrupted.");
+ }
+ } else {
+ toast.info(`No data found for ${type} snapshot.`);
+ }
+ };
+
+ return (
+
+ {loading || role === undefined ? (
+
+ Loading whiteboard...
+
+ ) : !lessonId ? (
+
+ Please provide a ?lessonId URL parameter.
+
+ ) : store ? (
+
+
+ {
+ editorRef.current = editor;
+ if (!isTeacherOrAdmin) {
+ editor.updateInstanceState({ isReadonly: true });
+ }
+ }}
+ />
+
+
+ ) : (
+
+ Failed to initialize whiteboard.
+
+ )}
+