From 91e465c9ba542b637e66c7091c444a44fdbe4f0c Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Thu, 13 Jun 2024 14:37:37 -0400
Subject: create flashcard stack and ui fixes

---
 src/client/views/pdf/AnchorMenu.tsx  | 13 +++++++++++--
 src/client/views/pdf/Annotation.scss | 19 ++++++++++++++++++-
 src/client/views/pdf/PDFViewer.tsx   |  1 +
 3 files changed, 30 insertions(+), 3 deletions(-)

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

diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index cedd3c7c3..c1198b4f7 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -15,6 +15,7 @@ import { LinkPopup } from '../linking/LinkPopup';
 import { DocumentView } from '../nodes/DocumentView';
 import './AnchorMenu.scss';
 import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
+import ReactLoading from 'react-loading';
 
 @observer
 export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -24,6 +25,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     private _disposer: IReactionDisposer | undefined;
     private _commentRef = React.createRef<HTMLDivElement>();
     private _cropRef = React.createRef<HTMLDivElement>();
+    @observable private _loading = false;
     // @observable protected _top: number = -300;
     // @observable protected _left: number = -300;
 
@@ -110,15 +112,16 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      */
     gptFlashcards = async (e: React.PointerEvent) => {
         const queryText = this._selectedText;
+        this._loading = true;
         try {
             const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
             console.log(res);
-            GPTPopup.Instance.setText(res || 'Something went wrong.');
+            // GPTPopup.Instance.setText(res || 'Something went wrong.');
             this.transferToFlashcard(res || 'Something went wrong');
         } catch (err) {
             console.error(err);
         }
-        GPTPopup.Instance.setLoading(false);
+        // GPTPopup.Instance.setLoading(false);
     };
 
     /*
@@ -147,6 +150,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         newCol.zIndex = 100;
 
         this.addToCollection?.(newCol);
+        this._loading = false;
     };
 
     pointerDown = (e: React.PointerEvent) => {
@@ -263,6 +267,11 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             />
                         </div>
                     )}
+                    {this._loading ? (
+                        <div className="loading-spinner" style={{ position: 'absolute' }}>
+                            <ReactLoading type="spin" height={30} width={30} color={'white'} />
+                        </div>
+                    ) : null}
                 </>
             ) : (
                 <>
diff --git a/src/client/views/pdf/Annotation.scss b/src/client/views/pdf/Annotation.scss
index 1de60ffed..329819ea2 100644
--- a/src/client/views/pdf/Annotation.scss
+++ b/src/client/views/pdf/Annotation.scss
@@ -7,4 +7,21 @@
     &:hover {
         cursor: pointer;
     }
-}
\ No newline at end of file
+}
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90%;
+    width: 93%;
+    left: 10;
+    font-size: 20px;
+    font-weight: bold;
+    color: #0b0a0a;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 92f890e70..af7a5774d 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -464,6 +464,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
             this._mainCont.current!.style.transform = '';
         }
         this._selectionContent = selRange.cloneContents();
+
         this._selectionText = this._selectionContent?.textContent || '';
 
         // clear selection
-- 
cgit v1.2.3-70-g09d2