Load existing notation when editing cards (#248)

Author: rednebmas

apps/react/src/components/notation/NotationPreviewList.tsx

@@ -36,22 +36,27 @@ export const NotationPreviewList: React.FC<NotationPreviewListProps> = ({
 	keySig,
 }) => {
 	const base = previews.find((p) => p.key === keySig);
+	const baseStackLength = base?.voices?.[0]?.stack?.length ?? 0;
 	const others = previews.filter((p) => p.key !== keySig);
 	const showText = !!previewTextCard && cardType === 'Text Prompt';
 	const prompt = textPrompt ?? '';
 	return (
-		<div className="flex flex-col items-center gap-5">
+		<div
+			className="flex flex-col items-center gap-5"
+			data-base-key={base?.key ?? ''}
+			data-base-stack-length={baseStackLength}
+		>
 			<PreviewCard
 				notation={<ScoreEditor />}
-				total={base?.voices[0].stack.length ?? 0}
+				total={baseStackLength}
 				showText={showText}
 				text={prompt}
 			/>
 			{others.map((p, i) => (
 				<PreviewCard
 					key={i}
 					notation={<MusicNotation data={p} />}
-					total={p.voices[0].stack.length}
+					total={p.voices?.[0]?.stack?.length ?? 0}
 					showText={showText}
 					text={prompt}
 				/>

apps/react/src/components/notation/ScoreEditor.tsx

@@ -10,7 +10,7 @@ import React, {
 import { shallowEqual } from 'react-redux';
 import { MusicNotation } from '../MusicNotation';
 import { StepTimeController } from 'MemoryFlashCore/src/lib/stepTimeController';
-import { scoreToQuestion } from 'MemoryFlashCore/src/lib/scoreBuilder';
+import { questionToScore, scoreToQuestion } from 'MemoryFlashCore/src/lib/scoreBuilder';
 import { Duration, BaseDuration } from 'MemoryFlashCore/src/lib/measure';
 import { StaffEnum } from 'MemoryFlashCore/src/types/Cards';
 import { SheetNote, MultiSheetQuestion } from 'MemoryFlashCore/src/types/MultiSheetCard';
@@ -66,8 +66,20 @@ const isFull = (score: Score) => {
 	});
 };
 
-function useStepCtrl(keySig: string, resetSignal: number, notify: ScoreChangeHandler) {
-	const ctrlRef = useRef(new StepTimeController());
+function useStepCtrl(
+	keySig: string,
+	resetSignal: number,
+	notify: ScoreChangeHandler,
+	initialQuestion?: MultiSheetQuestion,
+) {
+	const controllerFactory = useMemo(
+		() => () =>
+			new StepTimeController(
+				initialQuestion ? questionToScore(initialQuestion) : new Score(),
+			),
+		[initialQuestion],
+	);
+	const ctrlRef = useRef(controllerFactory());
 	const [dur, setDurState] = useState<BaseDuration>('q');
 	const [dotted, setDotted] = useState(false);
 	const [extraDurations, setExtraDurations] = useState<Duration[]>([]);
@@ -80,7 +92,7 @@ function useStepCtrl(keySig: string, resetSignal: number, notify: ScoreChangeHan
 	const midi = useAppSelector((s) => s.midi.notes.map((n) => n.number), shallowEqual);
 	const prev = useRef<number[]>([]);
 	const maxChord = useRef<number[]>([]);
-	const [question, setQuestion] = useState(() => scoreToQuestion(new Score(), keySig));
+	const [question, setQuestion] = useState(() => scoreToQuestion(ctrlRef.current.score, keySig));
 
 	const emit = useCallback(() => {
 		const ctrl = ctrlRef.current;
@@ -144,6 +156,15 @@ function useStepCtrl(keySig: string, resetSignal: number, notify: ScoreChangeHan
 		emitRef.current();
 	}, [resetSignal]);
 
+	useEffect(() => {
+		ctrlRef.current = controllerFactory();
+		applyDurRef.current();
+		ctrlRef.current.setStaff(staffRef.current);
+		maxChord.current = [];
+		prev.current = [];
+		emitRef.current();
+	}, [controllerFactory]);
+
 	useEffect(() => {
 		applyDur();
 		emit();
@@ -199,16 +220,18 @@ interface ProviderProps {
 	keySig: string;
 	resetSignal: number;
 	onChange: ScoreChangeHandler;
+	initialQuestion?: MultiSheetQuestion;
 	children: React.ReactNode;
 }
 
 export const ScoreEditorProvider: React.FC<ProviderProps> = ({
 	keySig,
 	resetSignal,
 	onChange,
+	initialQuestion,
 	children,
 }) => {
-	const value = useStepCtrl(keySig, resetSignal, onChange);
+	const value = useStepCtrl(keySig, resetSignal, onChange, initialQuestion);
 	return <ScoreEditorContext.Provider value={value}>{children}</ScoreEditorContext.Provider>;
 };
 

apps/react/src/screens/NotationInputScreen.tsx

@@ -33,6 +33,7 @@ export const NotationInputScreen = () => {
 	const { deckId } = useDeckIdPath();
 	const { cardId } = useParams();
 	const card = useAppSelector((state) => (cardId ? state.cards.entities[cardId] : undefined));
+	const initialQuestion = card?.type === CardTypeEnum.MultiSheet ? card.question : undefined;
 	const { isLoading: isUpdating, error: updateError } = useNetworkState('updateCard');
 	const { isLoading: isAdding, error: addError } = useNetworkState('addCardsToDeck');
 	useEffect(() => {
@@ -48,6 +49,8 @@ export const NotationInputScreen = () => {
 				// If editing a Text Prompt card, default to previewing the text prompt
 				preview: !!text,
 			}));
+			setQuestion(card.question);
+			setComplete(true);
 		}
 	}, [card]);
 	const previewsAll = questionsForAllMajorKeys(question, settings.lowest, settings.highest);
@@ -96,6 +99,7 @@ export const NotationInputScreen = () => {
 				keySig={settings.keySig}
 				resetSignal={resetCount}
 				onChange={handleScoreChange}
+				initialQuestion={initialQuestion}
 			>
 				<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
 					<div>

apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-midi-step-4.png

@@ -0,0 +1,39 @@
+import { test, expect } from './helpers';
+
+// ensure edit mode loads the existing question into previews
+
+test('NotationInputScreen preloads existing card notation', async ({ page }) => {
+	await page.goto('/tests/notation-input-edit-test.html');
+	await page.locator('#root').waitFor();
+
+	const cardPayload = {
+		_id: 'card1',
+		deckId: 'deck1',
+		type: 'MultiSheet',
+		question: {
+			key: 'C',
+			voices: [
+				{
+					staff: 'Treble',
+					stack: [
+						{ notes: [{ name: 'C', octave: 4 }], duration: 'q' },
+						{ notes: [{ name: 'D', octave: 4 }], duration: 'q' },
+						{ notes: [{ name: 'E', octave: 4 }], duration: 'q' },
+						{ notes: [{ name: 'F', octave: 4 }], duration: 'q' },
+					],
+				},
+			],
+			presentationModes: [{ id: 'Sheet Music' }],
+		},
+		answer: { type: 'ExactMulti' },
+	};
+
+	await page.evaluate((c) => {
+		(window as any).store.dispatch({ type: 'cards/upsert', payload: [c] });
+	}, cardPayload);
+
+	await expect(page.locator('[data-base-stack-length]')).toHaveAttribute(
+		'data-base-stack-length',
+		'4',
+	);
+});