Fix comments

hpi-schul-cloud · Nov 17, 2023 · b4103be · b4103be
1 parent 0972749
commit b4103be
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
 		"y-presence": "^0.2.3"
 	},
 	"jest": {
+		"testRegex": "(/__tests__/.*|(\\.|/)(unit|spec))\\.ts?$",
 		"setupFilesAfterEnv": [
 			"<rootDir>/src/tests/setupTests.ts"
 		],

diff --git a/public/index.html b/public/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" type="image/png" href="icon.png">
+		<link rel="icon" type="image/png" href="icon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
 		<meta

diff --git a/src/hooks/useMultiplayerState.ts b/src/hooks/useMultiplayerState.ts
@@ -22,33 +22,47 @@ import { TldrawPresence } from '../types';
 
 export const room = new Room<TldrawPresence>(awareness, {});
 
+const STORAGE_SETTINGS_KEY = 'sc_tldraw_settings';
+
+const getUserSettings = (): TDSnapshot['settings'] | undefined => {
+	const settingsString = localStorage.getItem(STORAGE_SETTINGS_KEY);
+	return settingsString ? JSON.parse(settingsString) : undefined;
+};
+
+const setDefaultState = () => {
+	const userSettings = getUserSettings();
+	if (userSettings) {
+		TldrawApp.defaultState.settings = userSettings;
+	} else {
+		TldrawApp.defaultState.settings.language = 'de';
+	}
+};
+
 export function useMultiplayerState(roomId: string) {
 	const [appInstance, setAppInstance] = useState<TldrawApp | undefined>(
 		undefined,
 	);
 	const [loading, setLoading] = useState<boolean>(true);
-	const STORAGE_SETTINGS_KEY = 'sc_tldraw_settings';
-
-	const setDefaultState = () => {
-		const settingsString = localStorage.getItem(STORAGE_SETTINGS_KEY);
-		if (settingsString) {
-			TldrawApp.defaultState.settings = JSON.parse(settingsString);
-		} else {
-			TldrawApp.defaultState.settings.language = 'de';
-		}
-	};
 
 	setDefaultState();
 
-	const getDarkMode = (): boolean | undefined => {
-		const settingsString = localStorage.getItem(STORAGE_SETTINGS_KEY);
-		if (settingsString) {
-			const settings: TDSnapshot['settings'] = JSON.parse(settingsString);
-			return settings.isDarkMode;
-		}
-		return undefined;
+	const getDarkMode = (): boolean | false => {
+		const settings = getUserSettings();
+		return settings ? settings.isDarkMode : false;
 	};
 
+	const saveUserSettings = useCallback(
+		(app: TldrawApp, _patch: TldrawPatch, reason: string | undefined) => {
+			if (reason?.includes('settings')) {
+				localStorage.setItem(
+					STORAGE_SETTINGS_KEY,
+					JSON.stringify(app.settings),
+				);
+			}
+		},
+		[],
+	);
+
 	const onMount = useCallback(
 		(app: TldrawApp) => {
 			app.loadRoom(roomId);
@@ -106,17 +120,6 @@ export function useMultiplayerState(roomId: string) {
 		room.setPresence({ id: app.room.userId, tdUser: user });
 	}, []);
 
-	const saveUserSettings = useCallback(
-		(app: TldrawApp, _patch: TldrawPatch, reason: string | undefined) => {
-			if (reason?.includes('settings')) {
-				localStorage.setItem(
-					STORAGE_SETTINGS_KEY,
-					JSON.stringify(app.settings),
-				);
-			}
-		},
-		[],
-	);
 	/**
 	 * Update app users whenever there is a change in the room users
 	 */

diff --git a/src/store/store.ts b/src/store/store.ts
@@ -12,6 +12,16 @@ async function fetchTldrawServerURL() {
 		const response = await fetch(
 			`${window.location.origin}/tldraw-client-runtime.config.json`,
 		);
+
+		if (!response.ok) {
+			console.error(
+				'Error fetching tldrawServerURL:',
+				response.status,
+				response.statusText,
+			);
+			return null;
+		}
+
 		const data = await response.json();
 		return data.tldrawServerURL;
 	} catch (error) {

diff --git a/src/tests/hooks/useMultiplayerState.test.ts → src/tests/hooks/useMultiplayerState.unit.ts b/src/tests/hooks/useMultiplayerState.test.ts → src/tests/hooks/useMultiplayerState.unit.ts
@@ -1,4 +1,11 @@
-import { ShapeStyles, TDAsset, TDShape, TDUser } from '@tldraw/tldraw';
+import {
+	ArrowBinding,
+	ShapeStyles,
+	TDAsset,
+	TDShape,
+	TDUser,
+	TDVideoAsset,
+} from '@tldraw/tldraw';
 import { TldrawApp } from '@tldraw/tldraw';
 import { room, useMultiplayerState } from '../../hooks/useMultiplayerState';
 import { undoManager, yBindings, yShapes } from '../../store/store';
@@ -16,6 +23,12 @@ describe('useMultiplayerState', () => {
 
 	jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
 
+	type CommonType = ArrowBinding | TDShape;
+
+	type MultiplayerShapes = Record<string, TDShape | undefined>;
+	type MultiplayerBindings = Record<string, ArrowBinding | undefined>;
+	type MultiplayerAssets = Record<string, TDAsset | TDVideoAsset | undefined>;
+
 	describe('onUndo', () => {
 		it('should call undoManager.undo function', () => {
 			const spy = jest
@@ -83,13 +96,13 @@ describe('useMultiplayerState', () => {
 	describe('onChangePage', () => {
 		it('should delete shapes and bindings if they are falsy', () => {
 			const tldrawApp = new TldrawApp('1');
-			const shapes = {
+			const shapes: MultiplayerShapes = {
 				shape1: undefined,
 			};
-			const bindings = {
+			const bindings: MultiplayerBindings = {
 				binding1: undefined,
 			};
-			const assets = {
+			const assets: MultiplayerAssets = {
 				asset1: undefined,
 			};
 			const deleteShapeSpy = jest.spyOn(yShapes, 'delete');
@@ -100,39 +113,44 @@ describe('useMultiplayerState', () => {
 			onChangePage(tldrawApp, shapes, bindings, assets);
 
 			expect(deleteShapeSpy).toHaveBeenCalledWith('shape1');
-
 			expect(deleteBindingSpy).toHaveBeenCalledWith('binding1');
-
 			expect(undoManager.stopCapturing).toHaveBeenCalledTimes(1);
 		});
 
 		it('should set shapes add them if they are truthy', () => {
 			const tldrawApp = new TldrawApp('1');
-			const shapes: Record<string, TDShape | undefined> = {
+			const shapes: MultiplayerShapes = {
 				test: {
 					id: 'test',
 					style: {} as ShapeStyles,
 				} as TDShape,
 			};
-			const bindings: Record<string, TDShape | undefined> = {
+			const bindings: MultiplayerBindings = {
 				test: {
 					id: 'test',
 					style: {} as ShapeStyles,
-				} as TDShape,
+				} as unknown as ArrowBinding,
 			};
-			const assets: Record<string, TDShape | undefined> = {
+			const assets: MultiplayerAssets = {
 				test: {
 					id: 'test',
 					style: {} as ShapeStyles,
-				} as TDShape,
+				} as unknown as TDAsset,
+				videoTest: {
+					id: 'videoTest',
+					type: 'video',
+					fileName: 'example.mp4',
+					src: 'path/to/video',
+					size: 12345,
+				} as unknown as TDVideoAsset,
 			};
 
 			const setShapeSpy = jest.spyOn(yShapes, 'set');
 			const setBindingSpy = jest.spyOn(yBindings, 'set');
 
 			const { onChangePage } = useMultiplayerState('1');
 
-			onChangePage(tldrawApp, shapes, bindings as any, assets as any);
+			onChangePage(tldrawApp, shapes, bindings, assets);
 			expect(setShapeSpy).toHaveBeenCalledWith('test', shapes.test);
 			expect(setBindingSpy).toHaveBeenCalledWith('test', bindings.test);
 		});