more refactoring to of collection flashcards into CollectioSubView to simplify using it in diferent collection views.

1 files changed, 13 insertions, 14 deletions

diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx
index a643c95b0..7bf4d86d1 100644
--- a/src/client/views/collections/FlashcardPracticeUI.tsx
+++ b/src/client/views/collections/FlashcardPracticeUI.tsx
@@ -23,15 +23,14 @@ enum practiceVal {
 interface PracticeUIProps {
     fieldKey: string;
     layoutDoc: Doc;
-    carouselItems: () => Doc[];
-    childDocs: Doc[];
+    filteredChildDocs: () => Doc[];
+    allChildDocs: () => Doc[];
     curDoc: () => Doc | undefined;
-    advance: (correct: boolean) => void;
+    advance?: (correct: boolean) => void;
     renderDepth: number;
     sideBtnWidth: number;
-    uiBtnScaleTransform: number;
+    uiBtnScaling: number;
     ScreenToLocalBoxXf: () => Transform;
-    maxWidgetScale: number;
     docViewProps: () => DocumentViewProps;
     setFilterFunc: (func?: (doc: Doc) => boolean) => void;
     practiceBtnOffset?: number;
@@ -51,7 +50,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
     get practiceField() { return this._props.fieldKey + "_practice"; } // prettier-ignore
 
     @computed get filterDoc() { return DocListCast(Doc.MyContextMenuBtns.data).find(doc => doc.title === 'Filter'); } // prettier-ignore
-    @computed get practiceMode() {  return this._props.childDocs.some(doc => doc._layout_isFlashcard) ? StrCast(this._props.layoutDoc.practiceMode) : ''; } // prettier-ignore
+    @computed get practiceMode() {  return this._props.allChildDocs().some(doc => doc._layout_isFlashcard) ? StrCast(this._props.layoutDoc.practiceMode) : ''; } // prettier-ignore
 
     btnHeight = () => NumCast(this.filterDoc?.height) * Math.min(1, this._props.ScreenToLocalBoxXf().Scale);
     btnWidth = () => (!this.filterDoc ? 1 : (this.btnHeight() * NumCast(this.filterDoc._width)) / NumCast(this.filterDoc._height));
@@ -62,12 +61,12 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
      */
     setPracticeMode = (mode: practiceMode | undefined) => {
         this._props.layoutDoc.practiceMode = mode;
-        this._props.carouselItems().map(doc => (doc[this.practiceField] = undefined));
+        this._props.allChildDocs().map(doc => (doc[this.practiceField] = undefined));
     };
 
     @computed get emptyMessage() {
-        const cardCount = this._props.carouselItems().length;
-        const practiceMessage = this.practiceMode && !Doc.hasDocFilter(this._props.layoutDoc, 'tags', Doc.FilterAny) && !this._props.carouselItems().length ? 'Finished! Click here to view all flashcards.' : '';
+        const cardCount = this._props.filteredChildDocs().length;
+        const practiceMessage = this.practiceMode && !Doc.hasDocFilter(this._props.layoutDoc, 'tags', Doc.FilterAny) && !cardCount ? 'Finished! Click here to view all flashcards.' : '';
         const filterMessage = practiceMessage
             ? ''
             : Doc.hasDocFilter(this._props.layoutDoc, 'tags', Doc.FilterAny) && !cardCount
@@ -78,7 +77,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
         return !practiceMessage && !filterMessage ? null : (
             <p
                 className="FlashcardPracticeUI-message"
-                style={{ transform: `scale(${this._props.uiBtnScaleTransform})` }}
+                style={{ transform: `scale(${this._props.uiBtnScaling})` }}
                 onClick={() => {
                     if (filterMessage || practiceMessage) {
                         this.setPracticeMode(undefined);
@@ -102,7 +101,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
         };
 
         return this.practiceMode == practiceMode.PRACTICE && this._props.curDoc() ? (
-            <div className="FlashcardPracticeUI-practice" style={{ transform: `scale(${this._props.uiBtnScaleTransform})`, bottom: `${this._props.practiceBtnOffset ?? this._props.sideBtnWidth}px`, height: `${this._props.sideBtnWidth}px` }}>
+            <div className="FlashcardPracticeUI-practice" style={{ transform: `scale(${this._props.uiBtnScaling})`, bottom: `${this._props.practiceBtnOffset ?? this._props.sideBtnWidth}px`, height: `${this._props.sideBtnWidth}px` }}>
                 <Tooltip title="Incorrect. View again later.">
                     <div key="remove" className="FlashcardPracticeUI-remove" onClick={e => setPracticeVal(e, practiceVal.MISSED)}>
                         <FontAwesomeIcon icon="xmark" color="red" size="1x" />
@@ -120,12 +119,12 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
         const setColor = (mode: practiceMode) => (StrCast(this.practiceMode) === mode ? 'white' : 'light gray');
         const togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode);
 
-        return !this._props.childDocs.some(doc => doc._layout_isFlashcard) ? null : (
+        return !this._props.allChildDocs().some(doc => doc._layout_isFlashcard) ? null : (
             <div
                 className="FlashcardPracticeUI-practiceModes"
                 style={{
                     transformOrigin: `0px ${-this.btnHeight()}px`,
-                    transform: `scale(${Math.max(1, 1 / this._props.ScreenToLocalBoxXf().Scale / this._props.maxWidgetScale)})`,
+                    transform: `scale(${Math.max(1, 1 / this._props.ScreenToLocalBoxXf().Scale)})`,
                 }}>
                 <Tooltip title="Practice flashcards using GPT">
                     <div key="back" className="FlashcardPracticeUI-quiz" style={{ width: this.btnWidth(), height: this.btnHeight() }} onClick={() => togglePracticeMode(practiceMode.QUIZ)}>
@@ -146,7 +145,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
             <>
                 {this.emptyMessage}
                 {this.practiceButtons}
-                <div className="FlashcardPracticeUI-menu" style={{ height: this.btnHeight(), width: this.btnHeight(), transform: `scale(${this._props.uiBtnScaleTransform})` }}>
+                <div className="FlashcardPracticeUI-menu" style={{ height: this.btnHeight(), width: this.btnHeight(), transform: `scale(${this._props.uiBtnScaling})` }}>
                     {!this.filterDoc || this._props.layoutDoc._chromeHidden ? null : (
                         <DocumentView
                             {...this._props.docViewProps()}