From f75f15ae58b57644c28d42446c176289bbe55dd4 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 10 Oct 2024 18:27:25 -0400
Subject: adjusted hiding chrome for carousel.  cleaned up some comparisonBox
 quiz code.  removed create flashcard pile button from flashcard - would
 prefer carousel being added to marquee menu.

---
 src/client/views/nodes/ComparisonBox.tsx | 109 +++++++++++++++----------------
 1 file changed, 52 insertions(+), 57 deletions(-)

(limited to 'src/client/views/nodes/ComparisonBox.tsx')

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 9852228fa..ccbe98257 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
 import axios from 'axios';
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
@@ -30,6 +30,7 @@ import './ComparisonBox.scss';
 import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
+import { practiceMode } from '../collections/FlashcardPracticeUI';
 
 const API_URL = 'https://api.unsplash.com/search/photos';
 
@@ -122,18 +123,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             </Tooltip>
                         )}
                         {DocCast(this.Document.embedContainer)?.type_collection !== CollectionViewType.Freeform ? null : (
-                            <>
-                                <Tooltip title={<div>Create a flashcard pile</div>}>
-                                    <div className="comparisonBox-button" onPointerDown={() => this.createFlashcardPile([this.Document], false)}>
-                                        <FontAwesomeIcon icon="folder-plus" size="xl" />
-                                    </div>
-                                </Tooltip>
-                                <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
-                                    <div className="comparisonBox-button" onClick={this.gptFlashcardPile}>
-                                        <FontAwesomeIcon icon="layer-group" size="xl" />
-                                    </div>
-                                </Tooltip>
-                            </>
+                            <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
+                                <div className="comparisonBox-button" onClick={this.gptFlashcardPile}>
+                                    <FontAwesomeIcon icon="layer-group" size="xl" />
+                                </div>
+                            </Tooltip>
                         )}
                     </>
                 )}
@@ -153,7 +147,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         this._frontSide = !this._frontSide;
     };
 
-    @action handleRenderGPTClick = async () => {
+    @action handleRenderGPTClick = () => {
         const phonTrans = DocCast(this.Document.audio) ? DocCast(this.Document.audio).phoneticTranscription : undefined;
         if (phonTrans) {
             this._inputValue = StrCast(phonTrans);
@@ -490,20 +484,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         }
         try {
             const res = await gptAPICall(questionText, GPTCallType.FLASHCARD);
-            if (!res) {
-                console.error('GPT call failed');
-                return;
-            }
-            if (callType == GPTCallType.CHATCARD) {
-                DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
-            } else if (callType == GPTCallType.QUIZ) {
-                this._frontSide = true;
-                this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric');
-            } else if (callType === GPTCallType.FLASHCARD) {
+            runInAction(() => {
+                if (!res) {
+                    console.error('GPT call failed');
+                    return;
+                }
+                if (callType == GPTCallType.CHATCARD) {
+                    DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
+                } else if (callType == GPTCallType.QUIZ) {
+                    this._frontSide = true;
+                    this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric');
+                } else if (callType === GPTCallType.FLASHCARD) {
+                    this._loading = false;
+                    return res;
+                }
                 this._loading = false;
-                return res;
-            }
-            this._loading = false;
+            });
             return res;
         } catch (err) {
             console.error('GPT call failed', err);
@@ -725,24 +721,33 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
         if (this.Document._layout_isFlashcard) {
             const side = this._frontSide ? 1 : 0;
+            const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
+            const textCreator = (which: number, title: string, text: string) => {
+                const newDoc = Docs.Create.TextDocument(text, {
+                    title, //
+                    _layout_autoHeight: true,
+                    _layout_centered: true,
+                    text_align: 'center',
+                    _layout_fitWidth: true,
+                });
+                this.addDoc(newDoc, this.fieldKey + '_' + which);
+                return newDoc;
+            };
 
             // add text box to each side when comparison box is first created
             if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) {
-                const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
-                const newDoc = Docs.Create.TextDocument(dataSplit[1], { title: 'answer', _layout_autoHeight: true, _layout_centered: true, text_align: 'center', _layout_fitWidth: true });
-                this.addDoc(newDoc, this.fieldKey + '_0');
+                textCreator(0, 'answer', dataSplit[1]);
             }
 
             if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) {
-                const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
-                const newDoc = Docs.Create.TextDocument(dataSplit[0], { title: 'question', _layout_autoHeight: true, _layout_centered: true, text_align: 'center', _layout_fitWidth: true });
-                this.addDoc(newDoc, this.fieldKey + '_1');
+                const question = textCreator(1, 'question', dataSplit[0] || 'hint: Enter a topic, select this document and click the stack button to have GPT create a deck of cards');
+                Doc.SelectOnLoad = dataSplit[0] ? undefined : question;
             }
 
-            if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).practiceMode === 'quiz') {
+            if (DocCast(this.Document.embedContainer).practiceMode === practiceMode.QUIZ) {
                 const text = StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
                 return (
-                    <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
+                    <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`}>
                         <p style={{ color: 'white', padding: 10 }}>{text}</p>
                         <p style={{ display: text === '' ? 'flex' : 'none', color: 'white', marginLeft: '10px' }}>Return to all flashcards and add text to both sides. </p>
                         <div className="input-box">
@@ -757,38 +762,28 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 readOnly={this._frontSide}></textarea>
 
                             {this._loading ? (
-                                <div className="loading-spinner" style={{ position: 'absolute' }}>
+                                <div className="loading-spinner">
                                     <ReactLoading type="spin" height={30} width={30} color={'blue'} />
                                 </div>
                             ) : null}
                         </div>
                         <div>
-                            <div className="submit-button" style={{ overflow: 'hidden', display: 'flex', width: '100%' }}>
-                                <div
-                                    className="submit-buttonschema-header-button"
-                                    onPointerDown={e => this.openContextMenu(e.clientX, e.clientY, false)}
-                                    style={{ position: 'absolute', top: '5px', left: '11px', zIndex: '100', width: '5px', height: '5px', cursor: 'pointer' }}>
-                                    <FontAwesomeIcon color={'white'} icon="caret-down" />
+                            <div className="submit-button">
+                                <div className="submit-buttonschema-header-button" onPointerDown={e => this.openContextMenu(e.clientX, e.clientY, false)}>
+                                    <FontAwesomeIcon color="white" icon="caret-down" />
                                 </div>
-                                <button className="submit-buttonrecord" onClick={this._listening ? this.stopListening : this.startListening} style={{ background: this._listening ? 'lightgray' : '', borderRadius: '2px' }}>
+                                <button className="submit-buttonrecord" onClick={this._listening ? this.stopListening : this.startListening} style={{ background: this._listening ? 'lightgray' : '' }}>
                                     {<FontAwesomeIcon icon="microphone" size="lg" />}
                                 </button>
-                                <div className="submit-buttonschema-header-button" onPointerDown={e => this.openContextMenu(e.clientX, e.clientY, true)} style={{ position: 'absolute', top: '5px', left: '50px', zIndex: '100', cursor: 'pointer' }}>
-                                    <FontAwesomeIcon color={'white'} icon="caret-down" />
+                                <div className="submit-buttonschema-header-button" onPointerDown={e => this.openContextMenu(e.clientX, e.clientY, true)} style={{ left: '50px', zIndex: '100' }}>
+                                    <FontAwesomeIcon color="white" icon="caret-down" />
                                 </div>
-                                <button className="submit-buttonpronunciation" onClick={this.evaluatePronunciation} style={{ display: 'inline-flex', alignItems: 'center' }}>
+                                <button className="submit-buttonpronunciation" onClick={this.evaluatePronunciation}>
                                     Evaluate Pronunciation
                                 </button>
-
-                                {!this._frontSide ? (
-                                    <button className="submit-buttonsubmit" type="button" onClick={this.handleRenderGPTClick} style={{ borderRadius: '2px', marginBottom: '3px', width: '100%' }}>
-                                        Submit
-                                    </button>
-                                ) : (
-                                    <button className="submit-buttonsubmit" type="button" onClick={this.handleRenderClick} style={{ display: 'inline-flex', alignItems: 'center', borderRadius: '2px', marginBottom: '3px', width: '100%' }}>
-                                        Redo the Question
-                                    </button>
-                                )}
+                                <button className="submit-buttonsubmit" type="button" onClick={this._frontSide ? this.handleRenderClick : this.handleRenderGPTClick}>
+                                    {this._frontSide ? 'Redo the Question' : 'Submit'}
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -804,7 +799,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                     onMouseLeave={() => this.hoverFlip(false)}>
                     {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
                     {this._loading ? (
-                        <div className="loading-spinner" style={{ position: 'absolute' }}>
+                        <div className="loading-spinner">
                             <ReactLoading type="spin" height={30} width={30} color={'blue'} />
                         </div>
                     ) : null}
-- 
cgit v1.2.3-70-g09d2

