From 6c7615110dcf8334196bbfddfd89b684e4ceee4f Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Fri, 17 May 2024 21:30:02 -0400
Subject: GOD IS GOOD

---
 src/client/views/pdf/GPTPopup/GPTPopup.scss |   6 +-
 src/client/views/pdf/GPTPopup/GPTPopup.tsx  | 102 +++++++++++++++++-----------
 2 files changed, 65 insertions(+), 43 deletions(-)

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

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 4425cf158..551c8e5af 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -55,10 +55,10 @@ $highlightedText: #82e0ff;
         overflow-y: auto;
     }
 
-    .btns-wrapper {
+    .btns-wrapper-gpt {
         height: 50px;
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
         transform: translateY(30px);
 
@@ -76,6 +76,8 @@ $highlightedText: #82e0ff;
             display: flex;
             align-items: center;
         }
+
+        
     }
 
     button {
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index faf66af85..d94be1860 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -154,6 +154,13 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     }
 
     @observable onSortComplete?: (sortResult: string) => void;
+    @observable cardsDoneLoading = false;
+
+    @action setCardsDoneLoading(done: boolean) {
+        console.log(done + "HI HIHI")
+        this.cardsDoneLoading = done;
+    }
+
 
 
 
@@ -169,12 +176,14 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.setSortDone(false);
 
         try {
-            const res = await gptAPICall(this.sortPrompt + this.sortDesc, GPTCallType.SORT);
+
+            const res = await gptAPICall(this.sortDesc, GPTCallType.SORT);
             this.setSortText(res || 'Something went wrong :(');
 
             // Trigger the callback with the result
             if (this.onSortComplete) {
                 this.onSortComplete(res || 'Something went wrong :(');
+                console.log(res)
             }
         } catch (err) {
             console.error(err);
@@ -313,52 +322,63 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                 {this.heading("SORTING")}
                 {this.loading ? (
                     <div className="content-wrapper">
-                        <div className="loading-spinner">
-                            <ReactLoading type="spin" color="#000" height={30} width={30} />
-                            <span>Loading...</span>
-                        </div>
-                    </div>
-                ) : !this.sortDone && (
-                    <div className="btns-wrapper">
-                        <input
-                            defaultValue=""
-                            autoComplete="off"
-                            onChange={this.setSortPrompt}
-                            onKeyDown={e => {
-                                if (e.key === 'Enter') {
-                                    this.generateSort();
-                                }
-                                e.stopPropagation();
-                            }}
-                            type="text"
-                            placeholder="Enter sorting instructions..."
-                            id="search-input"
-                            className="searchBox-input"
-                            style={{ width: "100%" }}
-                        />
+                    <div className="loading-spinner">
+                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                        <span>Loading...</span>
                     </div>
-                )}
+                </div>
+                ) : (
+                    <>
+                        {!this.cardsDoneLoading ? (
+                            <div className="content-wrapper">
+                                <div className="loading-spinner">
+                                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                                    <span>Reading Cards...</span>
+                                </div>
+                            </div>
+                        ) : (
+                            !this.sortDone && (
+                                <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%', // Almost as wide as the container
+                                            textAlign: 'center',
+                                            color: '#ffffff', // White text
+                                            fontSize: '16px' // Adjust font size as needed
+                                        }}
+                                    />
+                                </div>
+                            )
+                        )}
     
-                {this.sortDone && (
-                    <div>
-                        <div className="content-wrapper">
-
-                        <p>{this.text== "Something went wrong :(" ? "Something went wrong :(" : "Sorting done! Feel free to move things around / regenerate :) !"}</p>
-                       
-
-                            <IconButton
-                                tooltip="Generate Again"
-                                onClick={() => this.setSortDone(false)}
-                                icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
-                                color={StrCast(Doc.UserDoc().userVariantColor)}
-                            />
-
-                    </div>  
-                    </div>
+                        {this.sortDone && (
+                            <div>
+                                <div className="content-wrapper">
+                                    <p>
+                                        {this.text === "Something went wrong :(" ? 
+                                        "Something went wrong :(" : 
+                                        "Sorting done! Feel free to move things around / regenerate :) !"}
+                                    </p>
+                                    <IconButton
+                                        tooltip="Generate Again"
+                                        onClick={() => this.setSortDone(false)}
+                                        icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
+                                        color={StrCast(Doc.UserDoc().userVariantColor)}
+                                    />
+                                </div>
+                            </div>
+                        )}
+                    </>
                 )}
             </div>
         </>
     );
+
     
     
 
-- 
cgit v1.2.3-70-g09d2