cleaned up updateIcon to use promises to avoid a bunch of setTimeouts

2 files changed, 14 insertions, 40 deletions

diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/AnnotationPalette.tsx
index 72364be09..2ebe5bca5 100644
--- a/src/client/views/smartdraw/AnnotationPalette.tsx
+++ b/src/client/views/smartdraw/AnnotationPalette.tsx
@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 import ReactLoading from 'react-loading';
-import { returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils';
+import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils';
 import { emptyFunction } from '../../../Utils';
 import { Doc, DocListCast, returnEmptyDoclist } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
@@ -25,6 +25,7 @@ import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
 import { FieldView } from '../nodes/FieldView';
 import './AnnotationPalette.scss';
 import { DrawingOptions, SmartDrawHandler } from './SmartDrawHandler';
+import { setTime } from 'react-datepicker/dist/date_utils';
 
 interface AnnotationPaletteProps {
     Document: Doc;
@@ -109,26 +110,20 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
      */
     public static addToPalette = async (doc: Doc) => {
         if (!doc.savedAsAnno) {
-            const clone = await Doc.MakeClone(doc);
-            clone.clone.title = doc.title;
-            const image = ((await AnnotationPalette.getIcon(doc)) ?? ImageCast(doc[Doc.LayoutFieldKey(doc)]))?.[Copy]();
-            if (image) {
-                const imageTemplate = makeUserTemplateImage(clone.clone, image);
-                Doc.AddDocToList(Doc.MyAnnos, 'data', imageTemplate);
-                doc.savedAsAnno = true;
-            }
+            Doc.MakeClone(doc).then(cloneMap =>
+                DocumentView.getDocumentView(doc)
+                    ?.ComponentView?.updateIcon?.(true)
+                    .then(() => {
+                        const { clone } = cloneMap;
+                        clone.title = doc.title;
+                        const image = ImageCast(doc.icon, ImageCast(clone[Doc.LayoutFieldKey(clone)]))?.url?.href;
+                        Doc.AddDocToList(Doc.MyAnnos, 'data', makeUserTemplateImage(clone, image));
+                        doc.savedAsAnno = true;
+                    })
+            );
         }
     };
 
-    public static getIcon(group: Doc) {
-        const docView = DocumentView.getDocumentView(group);
-        if (docView) {
-            docView.ComponentView?.updateIcon?.(true);
-            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000));
-        }
-        return undefined;
-    }
-
     /**
      * Calls the draw with GPT functions in SmartDrawHandler to allow users to generate drawings straight from
      * the annotation palette.
@@ -184,15 +179,6 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
         this.resetPalette(true);
     };
 
-    async getIcon(group: Doc) {
-        const docView = DocumentView.getDocumentView(group);
-        if (docView) {
-            docView.ComponentView?.updateIcon?.(true);
-            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000));
-        }
-        return undefined;
-    }
-
     render() {
         return (
             <div className="annotation-palette" style={{ zIndex: 1000 }} onClick={e => e.stopPropagation()}>
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 879358742..8271c0959 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -249,7 +249,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      * Sends request to GPT API to recolor a selected ink document or group of ink documents.
      */
     colorWithGPT = async (drawing: Doc) => {
-        const img = await this.getIcon(drawing);
+        const img = await DocumentView.GetDocImage(drawing);
         const { href } = ImageCast(img).url;
         const hrefParts = href.split('.');
         const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
@@ -286,18 +286,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         });
     }, 'color strokes');
 
-    /**
-     * Gets an image snapshot of a doc. In this class, it's used to snapshot a selected ink stroke/group to use for GPT color.
-     */
-    async getIcon(doc: Doc) {
-        const docView = DocumentView.getDocumentView(doc);
-        if (docView) {
-            docView.ComponentView?.updateIcon?.();
-            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000));
-        }
-        return undefined;
-    }
-
     renderDisplay() {
         return (
             <div