From abacdb311ee658b74f009106f4e7751fc216af4b Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Thu, 18 Jul 2024 11:24:12 -0400
Subject: boutta get silly

---
 src/client/views/pdf/GPTPopup/GPTPopup.scss |  23 ++-
 src/client/views/pdf/GPTPopup/GPTPopup.tsx  | 277 ++++++++++++++++------------
 2 files changed, 178 insertions(+), 122 deletions(-)

(limited to 'src/client/views/pdf')

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 291f272ce..57973ef34 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -71,10 +71,12 @@ $highlightedText: #82e0ff;
     }
 
     .btns-wrapper-gpt {
-        height: 50px;
+        height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
+        flex-direction: column;
+
         transform: translateY(30px);
 
 
@@ -93,17 +95,20 @@ $highlightedText: #82e0ff;
         }
 
         
-    }
 
-    button {
-        font-size: 9px;
-        padding: 10px;
-        color: #ffffff;
-        width: 100%;
-        background-color: $button;
-        border-radius: 5px;
+        
     }
 
+    // button {
+    //     font-size: 9px;
+    //     padding: 10px;
+    //     color: #ffffff;
+    //     width: 100%;
+    //     background-color: $button;
+    //     border-radius: 5px;
+
+    // }
+
     .text-btn {
         &:hover {
             background-color: $button;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 71d437c3d..bbd5ea630 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -4,7 +4,7 @@ import { Button, IconButton, Type } from 'browndash-components';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { CgClose } from 'react-icons/cg';
+import { CgClose, CgPathBack, CgArrowLeftO, CgCornerUpLeft } from 'react-icons/cg';
 import ReactLoading from 'react-loading';
 import { TypeAnimation } from 'react-type-animation';
 import { ClientUtils } from '../../../../ClientUtils';
@@ -33,6 +33,10 @@ export enum GPTPopupMode {
 }
 
 
+
+
+
+
 interface GPTPopupProps {}
 
 @observer
@@ -166,6 +170,15 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.chatSortPrompt = e.target.value;
     });
 
+
+    @observable quizAnswer: string = ""
+
+    quizAnswerChanged = action((e: React.ChangeEvent<HTMLInputElement>) => {
+        this.quizAnswer = e.target.value;
+    });
+
+
+
     @observable private regenerateCallback: (() => Promise<void>) | null = null;
 
     @action public setRegenerateCallback(callback: () => Promise<void>) {
@@ -359,81 +372,133 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
             <Button
                 tooltip="Have ChatGPT sort your cards for you!"
                 text="Sort Cards!"
-                onClick={this.generateSort}
+                onClick={() => this.setMode(GPTPopupMode.SORT)}
                 color={StrCast(Doc.UserDoc().userVariantColor)}
                 type={Type.TERT}
                 style={{
-                    width: '90%',
+                    width: '100%',
+                    height: '40%',
                     textAlign: 'center',
                     color: '#ffffff',
                     fontSize: '16px',
+                    marginBottom: '10px'
                 }}
             />
             <Button
                 tooltip="Test your knowledge with ChatGPT!"
                 text="Quiz Cards!"
-                onClick={this.generateSort}
+                onClick={() => this.setMode(GPTPopupMode.QUIZ)}
                 color={StrCast(Doc.UserDoc().userVariantColor)}
                 type={Type.TERT}
                 style={{
-                    width: '90%',
+                    width: '100%',
                     textAlign: 'center',
                     color: '#ffffff',
                     fontSize: '16px',
+                    height: '40%',
+
                 }}
             />
         </div>
-
     )
+    
+    cardActual = (opt: GPTPopupMode) => {
+        if (opt === GPTPopupMode.SORT) {
+            return (
+                !this.sortDone ? (
+                    <>
+                        <div className="btns-wrapper-gpt">
+                            <input
+                                className="searchBox-input"
+                                defaultValue=""
+                                autoComplete="off"
+                                onChange={this.sortPromptChanged}
+                                onKeyDown={e => {
+                                    if (e.key === 'Enter') {
+                                        this.generateSort();
+                                    }
+                                    e.stopPropagation();
+                                }}
+                                type="text"
+                                placeholder="How do you want to sort your cards?"
+                                id="search-input"
+                                style={{ width: '100%' }}
+                            />
+                        {/* </div>
+                        <div className="btns-wrapper-gpt"> */}
+                            <Button
+                                tooltip="Have ChatGPT sort your cards for you!"
+                                text="Sort!"
+                                onClick={this.generateSort}
+                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                                type={Type.TERT}
+                                style={{
+                                    width: '100%',
+                                    textAlign: 'center',
+                                    color: '#ffffff',
+                                    fontSize: '16px',
+                                    height: '40%',
 
-    cardActual = (opt: string) => {
-        const isSort = opt === 'sort'
-
-        if (opt === 'sort'){
+                                }}
+                            />
+                        </div>
+                    </>
+                ) : (
+                    <div>
+                        <div className="content-wrapper">
+                            <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p>
+                            <IconButton
+                                tooltip="Generate Again"
+                                onClick={() => this.setSortDone(false)}
+                                icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
+                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                            />
+                        </div>
+                    </div>
+                )
+            );
+        } else if (opt === GPTPopupMode.QUIZ) {
             return (
                 <>
-                            <div className="btns-wrapper-gpt">
-                                <input
-                                    className="searchBox-input"
-                                    defaultValue=""
-                                    autoComplete="off"
-                                    onChange={this.sortPromptChanged}
-                                    onKeyDown={e => {
-                                        if (e.key === 'Enter') {
-                                            this.generateSort();
-                                        }
-                                        e.stopPropagation();
-                                    }}
-                                    type="text"
-                                    placeholder= {`How do you want to sort your cards ?` }
-                                    id="search-input"
-                                    style={{ width: '100%' }}
-                                />
-                            </div>
-                            <div className="btns-wrapper-gpt">
-                                <Button
-                                    tooltip="Have ChatGPT sort your cards for you!"
-                                    text="Sort!"
-                                    onClick={this.generateSort}
-                                    color={StrCast(Doc.UserDoc().userVariantColor)}
-                                    type={Type.TERT}
-                                    style={{
-                                        width: '90%',
-                                        textAlign: 'center',
-                                        color: '#ffffff',
-                                        fontSize: '16px',
-                                    }}
-                                />
-                            </div>
-                        </>
-            )
-
+                    <div className="btns-wrapper-gpt">
+                        <input
+                            className="searchBox-input"
+                            defaultValue=""
+                            autoComplete="off"
+                            onChange={this.quizAnswerChanged}
+                            onKeyDown={e => {
+                                if (e.key === 'Enter') {
+                                    this.generateSort();
+                                }
+                                e.stopPropagation();
+                            }}
+                            type="text"
+                            placeholder="What is the selected card?"
+                            id="search-input"
+                            style={{ width: '100%' }}
+                        />
+                    </div>
+                    <div className="btns-wrapper-gpt">
+                        <Button
+                            tooltip="See how close you got to the right answer!"
+                            text="Check!"
+                            onClick={this.generateSort}
+                            color={StrCast(Doc.UserDoc().userVariantColor)}
+                            type={Type.TERT}
+                            style={{
+                                width: '90%',
+                                textAlign: 'center',
+                                color: '#ffffff',
+                                fontSize: '16px',
+                            }}
+                        />
+                    </div>
+                </>
+            );
         }
-
-}
-
+    };
+    
     sortBox = () => (
-    <>
         <div>
             {this.heading('SORTING')}
             <>
@@ -445,62 +510,13 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                         </div>
                     </div>
                 ) : (
-                    !this.sortDone && (
-                        <>
-                            <div className="btns-wrapper-gpt">
-                                <input
-                                    className="searchBox-input"
-                                    defaultValue=""
-                                    autoComplete="off"
-                                    onChange={this.sortPromptChanged}
-                                    onKeyDown={e => {
-                                        if (e.key === 'Enter') {
-                                            this.generateSort();
-                                        }
-                                        e.stopPropagation();
-                                    }}
-                                    type="text"
-                                    placeholder="How do you want to sort your cards ?"
-                                    id="search-input"
-                                    style={{ width: '100%' }}
-                                />
-                            </div>
-                            <div className="btns-wrapper-gpt">
-                                <Button
-                                    tooltip="Have ChatGPT sort your cards for you!"
-                                    text="Sort!"
-                                    onClick={this.generateSort}
-                                    color={StrCast(Doc.UserDoc().userVariantColor)}
-                                    type={Type.TERT}
-                                    style={{
-                                        width: '90%',
-                                        textAlign: 'center',
-                                        color: '#ffffff',
-                                        fontSize: '16px',
-                                    }}
-                                />
-                            </div>
-                        </>
-                    )
-                )}
-
-                {this.sortDone && (
-                    <div>
-                        <div className="content-wrapper">
-                            <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p>
-                            <IconButton
-                                tooltip="Generate Again"
-                                onClick={() => this.setSortDone(false)}
-                                icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
-                                color={StrCast(Doc.UserDoc().userVariantColor)}
-                            />
-                        </div>
-                    </div>
+                    (this.mode === GPTPopupMode.CARD ? this.cardMenu() : this.cardActual(this.mode)) // Call the functions to render JSX
                 )}
             </>
         </div>
-    </>
-);
+    );
+    
+    
 
     imageBox = () => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
@@ -647,25 +663,60 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     heading = (headingText: string) => (
         <div className="summary-heading">
             <label className="summary-text">{headingText}</label>
-            {this.loading ? <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> : <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={() => this.setVisible(false)} />}
+            {this.loading ? (
+                <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} />
+            ) : (
+                <>
+                {(this.mode === GPTPopupMode.SORT || this.mode === GPTPopupMode.QUIZ) && (
+                        <IconButton
+                            color={StrCast(SettingsManager.userVariantColor)}
+                            tooltip="back"
+                            icon={<CgCornerUpLeft size="16px" />}
+                            onClick={() => this.mode = GPTPopupMode.CARD}
+                            style = {{right: '-55px'}}
+                        />
+                    )}
+                    <IconButton
+                        color={StrCast(SettingsManager.userVariantColor)}
+                        tooltip="close"
+                        icon={<CgClose size="16px" />}
+                        onClick={() => this.setVisible(false)}
+                    />
+                    
+                </>
+            )}
         </div>
     );
+        
 
     render() {
+        let content;
+        
+        switch (this.mode) {
+            case GPTPopupMode.SUMMARY:
+                content = this.summaryBox();
+                break;
+            case GPTPopupMode.DATA:
+                content = this.dataAnalysisBox();
+                break;
+            case GPTPopupMode.IMAGE:
+                content = this.imageBox();
+                break;
+            case GPTPopupMode.SORT:
+            case GPTPopupMode.CARD:
+            case GPTPopupMode.QUIZ:
+                content = this.sortBox();
+                break;
+            default:
+                content = null;
+        }
+    
         return (
             <div
                 className="summary-box"
                 style={{ display: this.visible ? 'flex' : 'none' }}
             >
-                {this.mode === GPTPopupMode.SUMMARY
-                    ? this.summaryBox()
-                    : this.mode === GPTPopupMode.DATA
-                    ? this.dataAnalysisBox()
-                    : this.mode === GPTPopupMode.IMAGE
-                    ? this.imageBox()
-                    : this.mode === GPTPopupMode.SORT
-                    ? this.sortBox()
-                    : null}
+                {content}
                 <div className="resize-handle" />
             </div>
         );
-- 
cgit v1.2.3-70-g09d2