lint cleanup and some flashcard fixes

6 files changed, 80 insertions, 106 deletions

diff --git a/src/client/apis/gpt/setup.ts b/src/client/apis/gpt/setup.ts
index 831c97eaa..7084f38bf 100644
--- a/src/client/apis/gpt/setup.ts
+++ b/src/client/apis/gpt/setup.ts
@@ -5,6 +5,7 @@ export enum GPTCallType {
     SUMMARY = 'summary',
     COMPLETION = 'completion',
     EDIT = 'edit',
+    FLASHCARD = 'flashcard',
 }
 
 export type GPTCallOpts = {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b9c4d8b5f..e095bc659 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -354,8 +354,7 @@ pie title Minerals in my tap water
                           creator:(opts:DocumentOptions)=> any // how to create the empty thing if it doesn't exist
               }[] = [
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true }},
-            {key: "Flashcard", creator: opts => Docs.Create.ComparisonDocument("", opts), opts: { _layout_isFlashcard: true, _width: 300, _height: 300}},
-            // {key: "Flashcard",  creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true, _layout_enableAltContentUI: true}},
+            {key: "Flashcard",  creator: opts => Docs.Create.ComparisonDocument("", opts),  opts: { _layout_isFlashcard: true, _width: 300, _height: 300}},
             {key: "Image",      creator: opts => Docs.Create.ImageDocument("", opts),       opts: { _width: 400, _height:400 }},
             {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 300, _height: 35, }},
             {key: "Noteboard",  creator: opts => Docs.Create.NoteTakingDocument([], opts),  opts: { _width: 250, _height: 200, _layout_fitWidth: true}},
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 84d14d4ef..5dd3cc9b0 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -170,9 +170,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             e,
             moveEv => {
                 const de = new DragManager.DocumentDragData([DocCast(this.dataDoc[which])], dropActionType.move);
-                de.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
-                    return addDocument(doc);
-                };
+                de.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => addDocument(doc);
                 de.canEmbed = true;
                 DragManager.StartDocumentDrag([this._closeRef.current!], de, moveEv.clientX, moveEv.clientY);
                 return true;
@@ -235,7 +233,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
      * Changes the view option to hover for a flashcard.
      */
     hoverFlip = (side: string | undefined) => {
-        if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = side;
+        if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = side;
     };
 
     /**
@@ -248,12 +246,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 <div
                     className="formattedTextBox-alternateButton"
                     onPointerDown={e =>
-                        setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => {
+                        setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => {
                             console.log(this.layoutDoc[`_${this._props.fieldKey}_revealOp`]);
-                            if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'flip') {
+                            if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'flip') {
                                 this.flipFlashcard();
-                                console.log('Print Front of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
-                                console.log('Print Back of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
+                                console.log('Print Front of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text ?? ''));
+                                console.log('Print Back of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text ?? ''));
                             }
                         })
                     }
@@ -289,7 +287,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const queryText = questionText + ' UserAnswer: ' + this.inputValue + '. ' + rubricText;
 
         try {
-            let res = await gptAPICall(queryText, GPTCallType.QUIZ);
+            const res = await gptAPICall(queryText, GPTCallType.QUIZ);
             if (!res) {
                 console.error('GPT call failed');
                 return;
@@ -302,19 +300,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     render() {
-        const clearButton = (which: string) => {
-            return (
-                <Tooltip title={<div className="dash-tooltip">remove</div>}>
-                    <div
-                        ref={this._closeRef}
-                        className={`clear-button ${which}`}
-                        onPointerDown={e => this.closeDown(e, which)} // prevent triggering slider movement in registerSliding
-                    >
-                        <FontAwesomeIcon className={`clear-button ${which}`} icon="times" size="sm" />
-                    </div>
-                </Tooltip>
-            );
-        };
+        const clearButton = (which: string) => (
+            <Tooltip title={<div className="dash-tooltip">remove</div>}>
+                <div
+                    ref={this._closeRef}
+                    className={`clear-button ${which}`}
+                    onPointerDown={e => this.closeDown(e, which)} // prevent triggering slider movement in registerSliding
+                >
+                    <FontAwesomeIcon className={`clear-button ${which}`} icon="times" size="sm" />
+                </div>
+            </Tooltip>
+        );
         const displayDoc = (whichSlot: string) => {
             const whichDoc = DocCast(this.dataDoc[whichSlot]);
             const targetDoc = DocCast(whichDoc?.annotationOn, whichDoc);
@@ -334,9 +330,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         moveDocument={whichSlot.endsWith('1') ? this.moveDoc1 : this.moveDoc2}
                         removeDocument={whichSlot.endsWith('1') ? this.remDoc1 : this.remDoc2}
                         NativeWidth={() => NumCast(this.layoutDoc.width, 200)}
-                        NativeHeight={(): number => {
-                            return NumCast(this.layoutDoc.height, 200);
-                        }}
+                        NativeHeight={(): number => NumCast(this.layoutDoc.height, 200)}
                         isContentActive={emptyFunction}
                         isDocumentActive={returnFalse}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
@@ -358,112 +352,90 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             </div>
         );
 
-        const displayBoxReveal = (which: string, which2: string, index: number, cover: number) => {
-            return (
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                    <div
-                        className={`beforeBox-cont`}
-                        key={which}
-                        style={{ width: this._props.PanelWidth(), height: NumCast(this.layoutDoc.height, 200) / 2 }}
-                        onPointerDown={e => this.registerSliding(e, cover)}
-                        ref={ele => this.createDropTarget(ele, which, 0)}>
-                        {displayDoc(which)}
-                    </div>
-                    <div
-                        className={`afterBox-cont`}
-                        key={which2}
-                        style={{ width: this._props.PanelWidth(), height: NumCast(this.layoutDoc.height, 200) / 2 }}
-                        onPointerDown={e => this.registerSliding(e, cover)}
-                        ref={ele => this.createDropTarget(ele, which2, 1)}>
-                        {displayDoc(which2)}
-                    </div>
-                </div>
-            );
-        };
-
         if (this.Document._layout_isFlashcard) {
             const side = this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 1 : 0;
 
             // add text box to each side when comparison box is first created
-            if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] == 'empty')) {
+            if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] === 'empty')) {
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[1]);
                 // if there is text from the pdf ai cards, put the question on the front side.
+                // eslint-disable-next-line prefer-destructuring
                 newDoc[DocData].text = dataSplit[1];
                 this.addDoc(newDoc, this.fieldKey + '_0');
             }
-            if (!(this.dataDoc[this.fieldKey + '_1'] || this.dataDoc[this.fieldKey + '_1'] == 'empty')) {
+            if (!(this.dataDoc[this.fieldKey + '_1'] || this.dataDoc[this.fieldKey + '_1'] === 'empty')) {
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[0]);
                 // if there is text from the pdf ai cards, put the answer on the alternate side.
+                // eslint-disable-next-line prefer-destructuring
                 newDoc[DocData].text = dataSplit[0];
                 this.addDoc(newDoc, this.fieldKey + '_1');
             }
 
             // render the QuizCards
-            if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer)[`filterOp`] == 'quiz') {
+            if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).filterOp === 'quiz') {
                 return (
                     <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
                         <p style={{ color: 'white', padding: 10 }}>{StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)}</p>
                         {/* {StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)} */}
-                        <div className={'input-box'}>
-                            {
-                                <textarea
-                                    value={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.outputValue : this.inputValue}
-                                    onChange={this.handleInputChange}
-                                    readOnly={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate'}
-                                />
-                            }
+                        <div className="input-box">
+                            <textarea
+                                value={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.outputValue : this.inputValue}
+                                onChange={this.handleInputChange}
+                                readOnly={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate'}
+                            />
                         </div>
                         <div className="submit-button" style={{ display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'none' : 'flex' }}>
-                            <button onClick={this.handleRenderGPTClick}>Submit</button>
+                            <button type="button" onClick={this.handleRenderGPTClick}>
+                                Submit
+                            </button>
                         </div>
                         <div className="submit-button" style={{ display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'flex' : 'none' }}>
-                            <button onClick={this.handleRenderClick}>Edit Your Response</button>
+                            <button type="button" onClick={this.handleRenderClick}>
+                                Edit Your Response
+                            </button>
                         </div>
                     </div>
                 );
             }
 
             // render a normal flashcard when not a QuizCard
-            else {
-                return (
-                    <div
-                        className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
-                        style={{ display: 'flex', flexDirection: 'column' }}
-                        onMouseEnter={() => {
-                            this.hoverFlip('alternate');
-                        }}
-                        onMouseLeave={() => {
-                            this.hoverFlip(undefined);
-                        }}>
-                        {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
-                        {this.overlayAlternateIcon}
-                    </div>
-                );
-            }
-        } else {
-            // render a comparison box that compares items side by side
             return (
-                <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
-                    {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}
-                    <div className="clip-div" style={{ width: this.clipWidth + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
-                        {displayBox(`${this.fieldKey}_1`, 0, 0)}
-                    </div>
-
-                    <div
-                        className="slide-bar"
-                        style={{
-                            left: `calc(${this.clipWidth + '%'} - 0.5px)`,
-                            cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined,
-                        }}
-                        onPointerDown={e => !this._isAnyChildContentActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
-                    >
-                        <div className="slide-handle" />
-                    </div>
+                <div
+                    className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
+                    style={{ display: 'flex', flexDirection: 'column' }}
+                    onMouseEnter={() => {
+                        this.hoverFlip('alternate');
+                    }}
+                    onMouseLeave={() => {
+                        this.hoverFlip(undefined);
+                    }}>
+                    {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
+                    {this.overlayAlternateIcon}
                 </div>
             );
         }
+        // render a comparison box that compares items side by side
+        return (
+            <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
+                {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}
+                <div className="clip-div" style={{ width: this.clipWidth + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
+                    {displayBox(`${this.fieldKey}_1`, 0, 0)}
+                </div>
+
+                <div
+                    className="slide-bar"
+                    style={{
+                        left: `calc(${this.clipWidth + '%'} - 0.5px)`,
+                        cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined,
+                    }}
+                    onPointerDown={e => !this._isAnyChildContentActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
+                >
+                    <div className="slide-handle" />
+                </div>
+            </div>
+        );
     }
 }
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index fca6cda81..7a1f94948 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -504,7 +504,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     askGPT = async (): Promise<string | undefined> => {
         const queryText = RTFCast(DocCast(this.dataDoc[this.props.fieldKey + '_1']).text)?.Text;
         try {
-            let res = await gptAPICall('Question: ' + StrCast(queryText), GPTCallType.CHATCARD);
+            const res = await gptAPICall('Question: ' + StrCast(queryText), GPTCallType.CHATCARD);
             if (!res) {
                 console.error('GPT call failed');
                 return;
@@ -585,8 +585,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             if (this.Document._layout_isFlashcard) {
                 const revealOptions = cm.findByDescription('Reveal Options');
                 const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
-                revealItems.push({ description: 'Hover', event: () => (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'), icon: 'hand-point-up' });
-                revealItems.push({ description: 'Flip', event: () => (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'), icon: 'rotate' });
+                revealItems.push({ description: 'Hover', event: () => { this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'; }, icon: 'hand-point-up' }); // prettier-ignore
+                revealItems.push({ description: 'Flip', event: () => { this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'; }, icon: 'rotate' }); // prettier-ignore
                 !revealOptions && cm.addItem({ description: 'Reveal Options', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
             }
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 9ccd95f24..9f2a9b8e1 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -925,7 +925,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             const usepath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
             appearanceItems.push({
                 description: (this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate:hover' ? 'no hover' : 'hover') + ' to show alt content',
-                event: () => (this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usepath === 'alternate' || usepath === undefined ? 'alternate:hover' : undefined),
+                event: () => {
+                    this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usepath === 'alternate' || usepath === undefined ? 'alternate:hover' : undefined;
+                },
                 icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye',
             });
         }
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index b7247a034..745e809db 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -78,13 +78,13 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      * Invokes the API with the selected text and stores it in the summarized text.
      * @param e pointer down event
      */
-    gptSummarize = async (e: React.PointerEvent) => {
+    gptSummarize = async () => {
         GPTPopup.Instance.setVisible(true);
         GPTPopup.Instance.setMode(GPTPopupMode.SUMMARY);
         GPTPopup.Instance.setLoading(true);
 
         try {
-            const res = await gptAPICall(this.selectedText, GPTCallType.SUMMARY);
+            const res = await gptAPICall(this._selectedText, GPTCallType.SUMMARY);
             GPTPopup.Instance.setText(res || 'Something went wrong.');
         } catch (err) {
             console.error(err);
@@ -100,8 +100,8 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      * Invokes the API with the selected text and stores it in the selected text.
      * @param e pointer down event
      */
-    gptFlashcards = async (e: React.PointerEvent) => {
-        const queryText = this.selectedText;
+    gptFlashcards = async () => {
+        const queryText = this._selectedText;
         try {
             const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
             console.log(res);
@@ -120,7 +120,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         // put each question generated by GPT on the front of the flashcard
         const senArr = text.split('Question');
         const collectionArr: Doc[] = [];
-        for (var i = 1; i < senArr.length; i++) {
+        for (let i = 1; i < senArr.length; i++) {
             console.log('Arr ' + i + ': ' + senArr[i]);
             const newDoc = Docs.Create.ComparisonDocument(senArr[i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
             newDoc.text = senArr[i];