From 2a313f28fcb8675223708b0657de7517a3281095 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 17 Apr 2024 12:27:21 -0400
Subject: restoring eslint - updates not complete yet

---
 src/client/views/MainView.tsx | 132 ++++++++++++++++++++++++++++--------------
 1 file changed, 88 insertions(+), 44 deletions(-)

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 58b8d255a..8a060d0e0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -7,7 +7,8 @@ import { action, computed, configure, makeObservable, observable, reaction, runI
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import '../../../node_modules/browndash-components/dist/styles/global.min.css';
-import { Utils, emptyFunction, lightOrDark, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../Utils';
+import { ClientUtils, lightOrDark, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../ClientUtils';
+import { emptyFunction } from '../../Utils';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { DocData } from '../../fields/DocSymbols';
 import { DocCast, StrCast } from '../../fields/Types';
@@ -18,10 +19,12 @@ import { Docs } from '../documents/Documents';
 import { CalendarManager } from '../util/CalendarManager';
 import { CaptureManager } from '../util/CaptureManager';
 import { DocumentManager } from '../util/DocumentManager';
-import { DragManager, dropActionType } from '../util/DragManager';
+import { DragManager } from '../util/DragManager';
+import { dropActionType } from '../util/DropActionTypes';
 import { GroupManager } from '../util/GroupManager';
 import { HistoryUtil } from '../util/History';
 import { Hypothesis } from '../util/HypothesisUtils';
+import { UPDATE_SERVER_CACHE } from '../util/LinkManager';
 import { RTFMarkup } from '../util/RTFMarkup';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
 import { SelectionManager } from '../util/SelectionManager';
@@ -57,7 +60,7 @@ import { AudioBox } from './nodes/AudioBox';
 import { SchemaCSVPopUp } from './nodes/DataVizBox/SchemaCSVPopUp';
 import { DocButtonState } from './nodes/DocumentLinksButton';
 import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod, returnEmptyDocViewList } from './nodes/DocumentView';
-import { ImageBox, ImageEditorData as ImageEditor } from './nodes/ImageBox';
+import { ImageEditorData as ImageEditor } from './nodes/ImageBox';
 import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import { LinkDocPreview, LinkInfo } from './nodes/LinkDocPreview';
 import { DirectionsAnchorMenu } from './nodes/MapBox/DirectionsAnchorMenu';
@@ -71,11 +74,13 @@ import { PresBox } from './nodes/trails';
 import { AnchorMenu } from './pdf/AnchorMenu';
 import { GPTPopup } from './pdf/GPTPopup/GPTPopup';
 import { TopBar } from './topbar/TopBar';
-const { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
+
 const _global = (window /* browser */ || global) /* node */ as any;
+const { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
 
 @observer
 export class MainView extends ObservableReactComponent<{}> {
+    // eslint-disable-next-line no-use-before-define
     public static Instance: MainView;
     public static Live: boolean = false;
     private _docBtnRef = React.createRef<HTMLDivElement>();
@@ -117,8 +122,12 @@ export class MainView extends ObservableReactComponent<{}> {
     }
     @observable mainDoc: Opt<Doc> = undefined;
     @computed private get mainContainer() {
-        if (window.location.pathname.startsWith('/doc/') && Doc.CurrentUserEmail === 'guest') {
-            DocServer.GetRefField(window.location.pathname.substring('/doc/'.length)).then(main => runInAction(() => (this.mainDoc = main as Doc)));
+        if (window.location.pathname.startsWith('/doc/') && ClientUtils.CurrentUserEmail === 'guest') {
+            DocServer.GetRefField(window.location.pathname.substring('/doc/'.length)).then(main =>
+                runInAction(() => {
+                    this.mainDoc = main as Doc;
+                })
+            );
             return this.mainDoc;
         }
         return this.userDoc ? Doc.ActiveDashboard : Doc.GuestDashboard;
@@ -165,7 +174,11 @@ export class MainView extends ObservableReactComponent<{}> {
         scriptTag.async = true;
         scriptTag.defer = true;
         document.body.appendChild(scriptTag);
-        document.getElementById('root')?.addEventListener('scroll', e => (ele => (ele.scrollLeft = ele.scrollTop = 0))(document.getElementById('root')!));
+        document.getElementById('root')?.addEventListener('scroll', () =>
+            (ele => {
+                ele.scrollLeft = ele.scrollTop = 0;
+            })(document.getElementById('root')!)
+        );
         const ele = document.getElementById('loader');
         const prog = document.getElementById('dash-progress');
         if (ele && prog) {
@@ -174,7 +187,9 @@ export class MainView extends ObservableReactComponent<{}> {
                 prog.style.transition = '1s';
                 prog.style.width = '100%';
             }, 0);
-            setTimeout(() => (ele.outerHTML = ''), 1000);
+            setTimeout(() => {
+                ele.outerHTML = '';
+            }, 1000);
         }
         this._sidebarContent.proto = undefined;
         if (!MainView.Live) {
@@ -202,7 +217,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 'text_scrollHeight',
                 'text_height',
                 'hidden',
-                //'type_collection',
+                // 'type_collection',
                 'chromeHidden',
                 'currentFrame',
             ]); // can play with these fields on someone else's
@@ -530,7 +545,7 @@ export class MainView extends ObservableReactComponent<{}> {
     }
 
     private longPressTimer: NodeJS.Timeout | undefined;
-    globalPointerClick = action((e: any) => {
+    globalPointerClick = action(() => {
         this.longPressTimer && clearTimeout(this.longPressTimer);
         DocumentView.LongPress = false;
     });
@@ -540,7 +555,9 @@ export class MainView extends ObservableReactComponent<{}> {
     globalPointerDown = action((e: PointerEvent) => {
         DocumentView.LongPress = false;
         this.longPressTimer = setTimeout(
-            action(() => (DocumentView.LongPress = true)),
+            action(() => {
+                DocumentView.LongPress = true;
+            }),
             1000
         );
         DocumentManager.removeOverlayViews();
@@ -559,7 +576,7 @@ export class MainView extends ObservableReactComponent<{}> {
     });
 
     initEventListeners = () => {
-        window.addEventListener('beforeunload', DocServer.UPDATE_SERVER_CACHE);
+        window.addEventListener('beforeunload', UPDATE_SERVER_CACHE);
         window.addEventListener('drop', e => e.preventDefault(), false); // prevent default behavior of navigating to a new web page
         window.addEventListener('dragover', e => e.preventDefault(), false);
         document.addEventListener('pointerdown', this.globalPointerDown, true);
@@ -625,10 +642,10 @@ export class MainView extends ObservableReactComponent<{}> {
                     isDocumentActive={returnTrue} // headerBar is always documentActive (ie, the docView gets pointer events)
                     isContentActive={returnTrue} // headerBar is awlays contentActive which means its items are always documentActive
                     ScreenToLocalTransform={this.headerBarScreenXf}
-                    childHideResizeHandles={true}
+                    childHideResizeHandles
                     childDragAction={dropActionType.move}
-                    dontRegisterView={true}
-                    hideResizeHandles={true}
+                    dontRegisterView
+                    hideResizeHandles
                     PanelWidth={this.headerBarDocWidth}
                     PanelHeight={this.headerBarDocHeight}
                     renderDepth={0}
@@ -664,7 +681,7 @@ export class MainView extends ObservableReactComponent<{}> {
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
                     searchFilterDocs={returnEmptyDoclist}
-                    suppressSetHeight={true}
+                    suppressSetHeight
                     renderDepth={this._hideUI ? 0 : -1}
                 />
             </>
@@ -673,7 +690,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
     @computed get dockingContent() {
         return (
-            <GestureOverlay isActive={LightboxView.LightboxDoc ? false : true}>
+            <GestureOverlay isActive={!LightboxView.LightboxDoc}>
                 <div
                     key="docking"
                     className={`mainView-dockingContent${this._leftMenuFlyoutWidth ? '-flyout' : ''}`}
@@ -697,9 +714,16 @@ export class MainView extends ObservableReactComponent<{}> {
         setupMoveUpEvents(
             this,
             e,
-            action(e => ((SettingsManager.Instance.propertiesWidth = Math.max(0, this._dashUIWidth - e.clientX)) ? false : false)),
-            action(() => SettingsManager.Instance.propertiesWidth < 5 && (SettingsManager.Instance.propertiesWidth = 0)),
-            action(() => (SettingsManager.Instance.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._dashUIWidth - 50, 250) : 0)),
+            action(() => {
+                SettingsManager.Instance.propertiesWidth = Math.max(0, this._dashUIWidth - e.clientX);
+                return !SettingsManager.Instance.propertiesWidth;
+            }),
+            action(() => {
+                SettingsManager.Instance.propertiesWidth < 5 && (SettingsManager.Instance.propertiesWidth = 0);
+            }),
+            action(() => {
+                SettingsManager.Instance.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._dashUIWidth - 50, 250) : 0;
+            }),
             false
         );
     };
@@ -709,7 +733,10 @@ export class MainView extends ObservableReactComponent<{}> {
         setupMoveUpEvents(
             this,
             e,
-            action(e => ((this._leftMenuFlyoutWidth = Math.max(e.clientX - 58, 0)) ? false : false)),
+            action(e => {
+                this._leftMenuFlyoutWidth = Math.max(e.clientX - 58, 0);
+                return false;
+            }),
             () => this._leftMenuFlyoutWidth < 5 && this.closeFlyout(),
             this.closeFlyout
         );
@@ -734,7 +761,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
     @computed get flyout() {
         return !this._leftMenuFlyoutWidth ? (
-            <div key="flyout" className={`mainView-libraryFlyout-out`}>
+            <div key="flyout" className="mainView-libraryFlyout-out">
                 {this.docButtons}
             </div>
         ) : (
@@ -837,11 +864,9 @@ export class MainView extends ObservableReactComponent<{}> {
                             </div>
                         )}
                         <div className="properties-container" style={{ width: this.propertiesWidth(), color: SettingsManager.userColor }}>
-                            {
-                                <div style={{ display: this.propertiesWidth() < 10 ? 'none' : undefined }}>
-                                    <PropertiesView styleProvider={DefaultStyleProvider} addDocTab={DocumentViewInternal.addDocTabFunc} width={this.propertiesWidth()} height={this.propertiesHeight()} />
-                                </div>
-                            }
+                            <div style={{ display: this.propertiesWidth() < 10 ? 'none' : undefined }}>
+                                <PropertiesView styleProvider={DefaultStyleProvider} addDocTab={DocumentViewInternal.addDocTabFunc} width={this.propertiesWidth()} height={this.propertiesHeight()} />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -878,7 +903,7 @@ export class MainView extends ObservableReactComponent<{}> {
         // generate the wrong value from getClientRectangle() -- specifically they return an 'x' that is the flyout's width greater than it should be.
         // interactively adjusting the flyout fixes the problem.  So does programmatically changing the value after a timeout to something *fractionally* different (ie, 1.5, not 1);)
         this._leftMenuFlyoutWidth = this._leftMenuFlyoutWidth || 250;
-        //setTimeout(action(() => (this._leftMenuFlyoutWidth += 0.5)));
+        // setTimeout(action(() => (this._leftMenuFlyoutWidth += 0.5)));
 
         this._sidebarContent.proto = DocCast(button.target);
         SettingsManager.Instance.SetLastPressedBtn(button);
@@ -897,7 +922,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
     buttonBarXf = () => {
         if (!this._docBtnRef.current) return Transform.Identity();
-        const { scale, translateX, translateY } = Utils.GetScreenTransform(this._docBtnRef.current);
+        const { scale, translateX, translateY } = ClientUtils.GetScreenTransform(this._docBtnRef.current);
         return new Transform(-translateX, -translateY, 1 / scale);
     };
 
@@ -940,9 +965,11 @@ export class MainView extends ObservableReactComponent<{}> {
             <div className="mainView-snapLines">
                 <svg style={{ width: '100%', height: '100%' }}>
                     {SnappingManager.HorizSnapLines.map((l, i) => (
+                        // eslint-disable-next-line react/no-array-index-key
                         <line key={i} x1="0" y1={l} x2="2000" y2={l} stroke={lightOrDark(dragPar.layoutDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray={'2 2'} />
                     ))}
                     {SnappingManager.VertSnapLines.map((l, i) => (
+                        // eslint-disable-next-line react/no-array-index-key
                         <line key={i} y1={this.topOfMainDocContent.toString()} x1={l} y2="2000" x2={l} stroke={lightOrDark(dragPar.layoutDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray={'2 2'} />
                     ))}
                 </svg>
@@ -961,13 +988,14 @@ export class MainView extends ObservableReactComponent<{}> {
                             values="1 0 0 0 0
                 0 0 0 0 0
                 0 0 0 0 0
-                0 0 0 1 0"></feColorMatrix>
-                        <feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur>
-                        <feOffset in="blur" dx="0" dy="0" result="offset"></feOffset>
+                0 0 0 1 0"
+                        />
+                        <feGaussianBlur in="color" stdDeviation="4" result="blur" />
+                        <feOffset in="blur" dx="0" dy="0" result="offset" />
                         <feMerge>
-                            <feMergeNode in="bg"></feMergeNode>
-                            <feMergeNode in="offset"></feMergeNode>
-                            <feMergeNode in="SourceGraphic"></feMergeNode>
+                            <feMergeNode in="bg" />
+                            <feMergeNode in="offset" />
+                            <feMergeNode in="SourceGraphic" />
                         </feMerge>
                     </filter>
                 </defs>
@@ -984,7 +1012,11 @@ export class MainView extends ObservableReactComponent<{}> {
                     color: SettingsManager.userColor,
                     background: SettingsManager.userBackgroundColor,
                 }}
-                onScroll={() => (ele => (ele.scrollTop = ele.scrollLeft = 0))(document.getElementById('root')!)}
+                onScroll={() =>
+                    (ele => {
+                        ele.scrollTop = ele.scrollLeft = 0;
+                    })(document.getElementById('root')!)
+                }
                 ref={r => {
                     r &&
                         new _global.ResizeObserver(
@@ -1009,23 +1041,31 @@ export class MainView extends ObservableReactComponent<{}> {
                 <ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} />
                 {this._hideUI ? null : <TopBar />}
                 <LinkDescriptionPopup />
-                {DocButtonState.Instance.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => (DocButtonState.Instance.LinkEditorDocView = undefined))} docView={DocButtonState.Instance.LinkEditorDocView} /> : null}
-                {LinkInfo.Instance?.LinkInfo ? <LinkDocPreview {...LinkInfo.Instance.LinkInfo} /> : null}
-
+                {DocButtonState.Instance.LinkEditorDocView ? (
+                    <LinkMenu
+                        clearLinkEditor={action(() => {
+                            DocButtonState.Instance.LinkEditorDocView = undefined;
+                        })}
+                        docView={DocButtonState.Instance.LinkEditorDocView}
+                    />
+                ) : null}
+                {LinkInfo.Instance?.LinkInfo ? (
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    <LinkDocPreview {...LinkInfo.Instance.LinkInfo} />
+                ) : null}
                 {((page: string) => {
                     // prettier-ignore
                     switch (page) {
-                        default:
-                        case 'dashboard': return (<>
+                        case 'home': return <DashboardView />;
+                        case 'dashboard':
+                        default: return (<>
                                         <div key="dashdiv" style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}>
                                             <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} toggleTopBar={this.toggleTopBar} topBarHeight={this.headerBarHeightFunc}/>
                                         </div>
                                         {this.mainDashboardArea}
                                     </> );
-                        case 'home': return <DashboardView />;
                     }
                 })(Doc.ActivePage)}
-
                 <PreviewCursor />
                 <TaskCompletionBox />
                 <ContextMenu />
@@ -1049,15 +1089,19 @@ export class MainView extends ObservableReactComponent<{}> {
     }
 }
 
-ScriptingGlobals.add(function selectMainMenu(doc: Doc, title: string) {
+// eslint-disable-next-line prefer-arrow-callback
+ScriptingGlobals.add(function selectMainMenu(doc: Doc) {
     MainView.Instance.selectMenu(doc);
 });
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function createNewPresentation() {
     return MainView.Instance.createNewPresentation();
 }, 'creates a new presentation when called');
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function openPresentation(pres: Doc) {
     return MainView.Instance.openPresentation(pres);
 }, 'creates a new presentation when called');
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function createNewFolder() {
     return MainView.Instance.createNewFolder();
 }, 'creates a new folder in myFiles when called');
-- 
cgit v1.2.3-70-g09d2

