From bb11e8c07f86b1ba0148f1e406a070c14e9abc7c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 20 May 2024 15:59:52 -0400
Subject: lint cleanup and some flashcard fixes

---
 src/client/views/nodes/ComparisonBox.tsx | 162 +++++++++++++------------------
 1 file changed, 67 insertions(+), 95 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 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>
+        );
     }
 }
 
-- 
cgit v1.2.3-70-g09d2

