refactored imageUrlToBase64 into clientUtils. lint fixes.

8 files changed, 59 insertions, 108 deletions

diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts
index 972910071..e8165d5ab 100644
--- a/src/ClientUtils.ts
+++ b/src/ClientUtils.ts
@@ -655,6 +655,27 @@ export function dateRangeStrToDates(dateStr: string) {
     return { start: new Date(dateRangeParts[0]), end: new Date(dateRangeParts[1]) };
 }
 
+/**
+ * converts the image to base url formate
+ * @param imageUrl imageurl taken from the collection icon
+ */
+export async function imageUrlToBase64(imageUrl: string): Promise<string> {
+    try {
+        const response = await fetch(imageUrl);
+        const blob = await response.blob();
+
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            reader.onloadend = () => resolve(reader.result as string);
+            reader.onerror = error => reject(error);
+        });
+    } catch (error) {
+        console.error('Error:', error);
+        throw error;
+    }
+}
+
 function replaceCanvases(oldDiv: HTMLElement, newDiv: HTMLElement) {
     if (oldDiv.childNodes && newDiv) {
         for (let i = 0; i < oldDiv.childNodes.length; i++) {
diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index 24d53a8c8..c5a9d3ba4 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -1,19 +1,19 @@
 import * as iink from 'iink-ts';
 import { action, observable } from 'mobx';
 import * as React from 'react';
+import { imageUrlToBase64 } from '../../ClientUtils';
+import { aggregateBounds } from '../../Utils';
 import { Doc, DocListCast } from '../../fields/Doc';
 import { InkData, InkField, InkTool } from '../../fields/InkField';
 import { Cast, DateCast, ImageCast, NumCast } from '../../fields/Types';
-import { aggregateBounds } from '../../Utils';
+import { ImageField, URLField } from '../../fields/URLField';
+import { gptHandwriting } from '../apis/gpt/GPT';
 import { DocumentType } from '../documents/DocumentTypes';
-import { CollectionFreeFormView, MarqueeView } from './collections/collectionFreeForm';
-import { InkingStroke } from './InkingStroke';
-import './InkTranscription.scss';
 import { Docs } from '../documents/Documents';
+import './InkTranscription.scss';
+import { InkingStroke } from './InkingStroke';
+import { CollectionFreeFormView, MarqueeView } from './collections/collectionFreeForm';
 import { DocumentView } from './nodes/DocumentView';
-import { ImageField } from '../../fields/URLField';
-import { gptHandwriting } from '../apis/gpt/GPT';
-import { URLField } from '../../fields/URLField';
 /**
  * Class component that handles inking in writing mode
  */
@@ -260,7 +260,7 @@ export class InkTranscription extends React.Component {
                     const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
                     let response;
                     try {
-                        const hrefBase64 = await this.imageUrlToBase64(hrefComplete);
+                        const hrefBase64 = await imageUrlToBase64(hrefComplete);
                         response = await gptHandwriting(hrefBase64);
                     } catch {
                         console.error('Error getting image');
@@ -291,26 +291,6 @@ export class InkTranscription extends React.Component {
         }
         return undefined;
     }
-    /**
-     * converts the image to base url formate
-     * @param imageUrl imageurl taken from the collection icon
-     */
-    imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => resolve(reader.result as string);
-                reader.onerror = error => reject(error);
-            });
-        } catch (error) {
-            console.error('Error:', error);
-            throw error;
-        }
-    };
 
     /**
      * Creates the ink grouping once the user leaves the writing mode.
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 842724e39..c61b0b4dd 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -1,7 +1,8 @@
 import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
+import { computedFn } from 'mobx-utils';
 import * as React from 'react';
-import { ClientUtils, DashColor, returnFalse, returnZero } from '../../../ClientUtils';
+import { ClientUtils, DashColor, imageUrlToBase64, returnFalse, returnZero } from '../../../ClientUtils';
 import { Doc } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
@@ -21,7 +22,6 @@ import { DocumentView } from '../nodes/DocumentView';
 import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
-import { computedFn } from 'mobx-utils';
 
 enum cardSortings {
     Time = 'time',
@@ -52,23 +52,6 @@ export class CollectionCardView extends CollectionSubView() {
     @observable _maxRowCount = 10;
     @observable _docDraggedIndex: number = -1;
 
-    static imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => resolve(reader.result as string);
-                reader.onerror = error => reject(error);
-            });
-        } catch (error) {
-            console.error('Error:', error);
-            throw error;
-        }
-    };
-
     constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
@@ -462,7 +445,7 @@ export class CollectionCardView extends CollectionSubView() {
         const hrefParts = href.split('.');
         const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
         try {
-            const hrefBase64 = await CollectionCardView.imageUrlToBase64(hrefComplete);
+            const hrefBase64 = await imageUrlToBase64(hrefComplete);
             const response = await gptImageLabel(hrefBase64, 'Give three to five labels to describe this image.');
             image[DocData].description = response.trim();
             return response; // Return the response from gptImageLabel
diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
index 753685b97..583f2e656 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
@@ -6,6 +6,7 @@ import 'ldrs/ring';
 import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
+import { imageUrlToBase64 } from '../../../../ClientUtils';
 import { Utils, numberRange } from '../../../../Utils';
 import { Doc, NumListCast, Opt } from '../../../../fields/Doc';
 import { DocData } from '../../../../fields/DocSymbols';
@@ -22,13 +23,13 @@ import { MainView } from '../../MainView';
 import { DocumentView } from '../../nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../../nodes/FieldView';
 import { OpenWhere } from '../../nodes/OpenWhere';
-import { CollectionCardView } from '../CollectionCardDeckView';
 import './ImageLabelBox.scss';
 import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
 
 export class ImageInformationItem {}
 
 export class ImageLabelBoxData {
+    // eslint-disable-next-line no-use-before-define
     static _instance: ImageLabelBoxData;
     @observable _docs: Doc[] = [];
     @observable _labelGroups: string[] = [];
@@ -47,8 +48,8 @@ export class ImageLabelBoxData {
     };
 
     @action
-    addLabel = (label: string) => {
-        label = label.toUpperCase().trim();
+    addLabel = (labelIn: string) => {
+        const label = labelIn.toUpperCase().trim();
         if (label.length > 0) {
             if (!this._labelGroups.includes(label)) {
                 this._labelGroups = [...this._labelGroups, label.startsWith('#') ? label : '#' + label];
@@ -68,9 +69,10 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(ImageLabelBox, fieldKey);
     }
+    // eslint-disable-next-line no-use-before-define
+    public static Instance: ImageLabelBox;
 
     private _dropDisposer?: DragManager.DragDropDisposer;
-    public static Instance: ImageLabelBox;
     private _inputRef = React.createRef<HTMLInputElement>();
     @observable _loading: boolean = false;
     private _currentLabel: string = '';
@@ -99,7 +101,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     @observable _displayImageInformation: boolean = false;
 
-    constructor(props: any) {
+    constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
         ring.register();
@@ -165,7 +167,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const imageInfos = this._selectedImages.map(async doc => {
             if (!doc[DocData].tags_chat) {
                 const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)]).url.href.split('.');
-                return CollectionCardView.imageUrlToBase64(`${name}_o.${type}`).then(hrefBase64 =>
+                return imageUrlToBase64(`${name}_o.${type}`).then(hrefBase64 =>
                 !hrefBase64 ? undefined : 
                     gptImageLabel(hrefBase64,'Give three labels to describe this image.').then(labels => 
                         ({ doc, labels }))) ; // prettier-ignore
@@ -178,13 +180,13 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
                 const labels = imageInfo.labels.split('\n');
                 labels.forEach(label => {
-                    label =
+                    const hashLabel =
                         '#' +
                         label
                             .replace(/^\d+\.\s*|-|f\*/, '')
                             .replace(/^#/, '')
                             .trim();
-                    (imageInfo.doc[DocData].tags_chat as List<string>).push(label);
+                    (imageInfo.doc[DocData].tags_chat as List<string>).push(hashLabel);
                 });
             }
         });
@@ -214,7 +216,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         // most similar one.
         this._selectedImages.forEach(doc => {
             const embedLists = numberRange((doc[DocData].tags_chat as List<string>).length).map(n => Array.from(NumListCast(doc[DocData][`tags_embedding_${n + 1}`])));
-            const bestEmbedScore = (embedding: Opt<number[]>) => Math.max(...embedLists.map((l, index) => (embedding && similarity(Array.from(embedding), l)!) || 0));
+            const bestEmbedScore = (embedding: Opt<number[]>) => Math.max(...embedLists.map(l => (embedding && similarity(Array.from(embedding), l)!) || 0));
             const {label: mostSimilarLabelCollect} = 
                 this._labelGroups.map(label => ({ label, similarityScore: bestEmbedScore(labelToEmbedding.get(label)) }))
                            .reduce((prev, cur) => cur.similarityScore < 0.3 || cur.similarityScore <= prev.similarityScore ? prev: cur,
@@ -243,7 +245,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (this._selectedImages.length === 0) {
             return (
                 <div className="searchBox-container" style={{ pointerEvents: 'all', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }} ref={ele => this.createDropTarget(ele!)}>
-                    <p style={{ fontSize: 'large' }}>In order to classify and sort images, marquee select the desired images and press the 'Classify and Sort Images' button. Then, add the desired groups for the images to be put in.</p>
+                    <p style={{ fontSize: 'large' }}>In order to classify and sort images, marquee select the desired images and press the &apos;Classify and Sort Images&apos; button. Then, add the desired groups for the images to be put in.</p>
                 </div>
             );
         }
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index c32bbc803..f7c478729 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -5,7 +5,7 @@ import { IReactionDisposer, action, computed, makeObservable, observable, reacti
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
-import { returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents } from '../../../ClientUtils';
+import { imageUrlToBase64, returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents } from '../../../ClientUtils';
 import { emptyFunction } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
@@ -365,7 +365,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 'Content-Type': 'application/json',
             },
         });
-        this.Document.phoneticTranscription = response.data['transcription'];
+        this.Document.phoneticTranscription = response.data.transcription;
     };
 
     /**
@@ -374,7 +374,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
      * @returns
      */
     getYouTubeVideoId = (url: string) => {
-        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
+        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=|\?v=)([^#&?]*).*/;
         const match = url.match(regExp);
         return match && match[2].length === 11 ? match[2] : null;
     };
@@ -392,7 +392,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 'Content-Type': 'application/json',
             },
         });
-        return response.data['transcription'];
+        return response.data.transcription;
     };
 
     createFlashcardPile(collectionArr: Doc[], gpt: boolean) {
@@ -402,9 +402,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             _layout_fitWidth: false,
             _layout_autoHeight: true,
         });
-        newCol['x'] = this.layoutDoc['x'];
-        newCol['y'] = NumCast(this.layoutDoc['y']) + 50;
-        newCol.type_collection = 'carousel';
+        newCol.x = this.layoutDoc.x;
+        newCol.y = NumCast(this.layoutDoc.y) + 50;
+        newCol.type_collection = CollectionViewType.Carousel as string;
         for (let i = 0; i < collectionArr.length; i++) {
             DocCast(collectionArr[i])[DocData].embedContainer = newCol;
         }
@@ -606,34 +606,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 _height: 150,
                 title: '--snapshot' + NumCast(this.layoutDoc._layout_currentTimecode) + ' image-',
             });
-            imageSnapshot['x'] = this.layoutDoc['x'];
-            imageSnapshot['y'] = this.layoutDoc['y'];
+            imageSnapshot.x = this.layoutDoc.x;
+            imageSnapshot.y = this.layoutDoc.y;
             return imageSnapshot;
         } catch (error) {
             console.log(error);
         }
     };
 
-    static imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => resolve(reader.result as string);
-                reader.onerror = error => reject(error);
-            });
-        } catch (error) {
-            console.error('Error:', error);
-            throw error;
-        }
-    };
-
     getImageDesc = async (u: string) => {
         try {
-            const hrefBase64 = await ComparisonBox.imageUrlToBase64(u);
+            const hrefBase64 = await imageUrlToBase64(u);
             const response = await gptImageLabel(hrefBase64, 'Answer the following question as a short flashcard response. Do not include a label.' + (this.dataDoc.text as RichTextField)?.Text);
 
             DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = response;
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 07c0a114a..696ba5697 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -1,5 +1,5 @@
 import { Property } from 'csstype';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as textfit from 'textfit';
@@ -22,7 +22,6 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     private dropDisposer?: DragManager.DragDropDisposer;
     private _timeout: NodeJS.Timeout | undefined;
-    @observable private _editLabel = false;
     _divRef: HTMLDivElement | null = null;
 
     constructor(props: FieldViewProps) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 037b6315c..c89737e1e 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -13,7 +13,7 @@ import { EditorState, NodeSelection, Plugin, Selection, TextSelection, Transacti
 import { EditorView, NodeViewConstructor } from 'prosemirror-view';
 import * as React from 'react';
 import { BsMarkdownFill } from 'react-icons/bs';
-import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivWidth, returnFalse, returnZero, setupMoveUpEvents, simMouseEvent, smoothScroll, StopEvent } from '../../../../ClientUtils';
+import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivWidth, imageUrlToBase64, returnFalse, returnZero, setupMoveUpEvents, simMouseEvent, smoothScroll, StopEvent } from '../../../../ClientUtils';
 import { DateField } from '../../../../fields/DateField';
 import { CreateLinkToActiveAudio, Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../../fields/Doc';
 import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, DocData, ForceServerWrite, UpdatingFromServer } from '../../../../fields/DocSymbols';
@@ -1008,30 +1008,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         // console.log('HI' + this.ProseRef?.getElementsByTagName('img'));
     };
 
-    static imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => resolve(reader.result as string);
-                reader.onerror = error => reject(error);
-            });
-        } catch (error) {
-            console.error('Error:', error);
-            throw error;
-        }
-    };
-
     getImageDesc = async (u: string) => {
         // if (StrCast(this.dataDoc.description)) return StrCast(this.dataDoc.description); // Return existing description
         // const { href } = (u as URLField).url;
         const hrefParts = u.split('.');
         const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
         try {
-            const hrefBase64 = await FormattedTextBox.imageUrlToBase64(u);
+            const hrefBase64 = await imageUrlToBase64(u);
             const response = await gptImageLabel(
                 hrefBase64,
                 'Make flashcards out of this text and image with each question and answer labeled as question and answer. Do not label each flashcard and do not include asterisks: ' + (this.dataDoc.text as RichTextField)?.Text
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 75ef55060..b4635673c 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 import ReactLoading from 'react-loading';
 import { INode, parse } from 'svgson';
+import { imageUrlToBase64 } from '../../../ClientUtils';
 import { unimplementedFunction } from '../../../Utils';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
@@ -19,7 +20,6 @@ import { undoable } from '../../util/UndoManager';
 import { SVGToBezier, SVGType } from '../../util/bezierFit';
 import { InkingStroke } from '../InkingStroke';
 import { ObservableReactComponent } from '../ObservableReactComponent';
-import { CollectionCardView } from '../collections/CollectionCardDeckView';
 import { MarqueeView } from '../collections/collectionFreeForm';
 import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, DocumentView } from '../nodes/DocumentView';
 import './SmartDrawHandler.scss';
@@ -310,7 +310,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         const hrefParts = href.split('.');
         const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
         try {
-            const hrefBase64 = await CollectionCardView.imageUrlToBase64(hrefComplete);
+            const hrefBase64 = await imageUrlToBase64(hrefComplete);
             const strokes = DocListCast(drawing[DocData].data);
             const coords: string[] = [];
             strokes.forEach((stroke, i) => {