moved some more quiz functions to styleProviderQuiz

2 files changed, 16 insertions, 17 deletions

diff --git a/src/client/views/StyleProviderQuiz.tsx b/src/client/views/StyleProviderQuiz.tsx
index 8973ada95..1f2ad1485 100644
--- a/src/client/views/StyleProviderQuiz.tsx
+++ b/src/client/views/StyleProviderQuiz.tsx
@@ -83,7 +83,7 @@ export namespace styleProviderQuiz {
         imgBox.Document._quizMode = quiz;
         const quizBoxes = DocListCast(imgBox.Document.quizBoxes);
         if (!quizBoxes.length) {
-            //    this._loading = true;
+            imgBox.Loading = true;
 
             const img = {
                 file: i ? i : imgBox.paths[0],
@@ -98,7 +98,7 @@ export namespace styleProviderQuiz {
             if (response.data['boxes'].length != 0) {
                 createBoxes(imgBox, response.data['boxes'], response.data['text']);
             } else {
-                // this._loading = false;
+                imgBox.Loading = false;
             }
         } else quizBoxes.forEach(box => (box.hidden = false));
     }
@@ -121,7 +121,7 @@ export namespace styleProviderQuiz {
      * Create flashcards from an image.
      */
     async function getImageDesc(img: ImageBox) {
-        // this._loading = true;
+        img.Loading = true;
         try {
             const hrefBase64 = await createCanvas(img);
             const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this image with each question and answer labeled as "question" and "answer". Do not label each flashcard and do not include asterisks: ');
@@ -129,7 +129,7 @@ export namespace styleProviderQuiz {
         } catch (error) {
             console.log('Error', error);
         }
-        // this._loading = false;
+        img.Loading = false;
     }
 
     /**
@@ -241,14 +241,21 @@ export namespace styleProviderQuiz {
             return { error: 'The input string does not match the expected format.' };
         }
     }
+    function imgQuizBoxes(img: ImageBox) {
+        return DocListCast(img.Document.quizBoxes);
+    }
+    function imgQuizMode(img: ImageBox) {
+        return StrCast(img.Document._quizMode);
+    }
+
     /**
      * Check whether the contents of the label boxes on an image are correct.
      */
     function check(img: ImageBox) {
         //this._loading = true;
-        img.quizBoxes.forEach(async doc => {
+        imgQuizBoxes(img).forEach(async doc => {
             const input = StrCast(doc[DocData].title);
-            if (img.quizMode == quizMode.SMART && input) {
+            if (imgQuizMode(img) == quizMode.SMART && input) {
                 const questionText = 'Question: What was labeled in this image?';
                 const rubricText = ' Rubric: ' + StrCast(doc.quiz);
                 const queryText =
@@ -271,7 +278,7 @@ export namespace styleProviderQuiz {
     }
 
     function redo(img: ImageBox) {
-        img.quizBoxes.forEach(doc => {
+        imgQuizBoxes(img).forEach(doc => {
             doc[DocData].title = '';
             doc.backgroundColor = '#e4e4e4';
         });
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 0b474076b..0827eb062 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -80,12 +80,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     imageRef: HTMLImageElement | null = null; // <video> ref
     marqueeref = React.createRef<MarqueeAnnotator>();
+    @observable Loading = false; // bcz: this should be migrated into StylProviderQuiz since it's not fundamental to the imageBox
 
     @observable private _searchInput = '';
     @observable private _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>();
     @observable private _curSuffix = '';
     @observable private _error = '';
-    @observable private _loading = false;
     @observable private _isHovering = false; // flag to switch between primary and alternate images on hover
 
     constructor(props: FieldViewProps) {
@@ -98,14 +98,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._dropDisposer?.();
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document));
     };
-
-    @computed get quizBoxes() {
-        return DocListCast(this.Document.quizBoxes);
-    }
-    @computed get quizMode() {
-        return StrCast(this.Document._quizMode);
-    }
-
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const visibleAnchor = this._getAnchor?.(this._savedAnnotations, true); // use marquee anchor, otherwise, save zoom/pan as anchor
         const anchor =
@@ -562,7 +554,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     addDocument={this.addDocument}>
                     {this.content}
                 </CollectionFreeFormView>
-                {this._loading ? (
+                {this.Loading ? (
                     <div className="loading-spinner" style={{ position: 'absolute' }}>
                         <ReactLoading type="spin" height={50} width={50} color={'blue'} />
                     </div>