chore: upgrade eslint and prettier (#2376)

* chore: upgrade eslint and prettier

* chore: add restrict-template-expressions

packages/web/src/javascripts/Application/Database.ts

@@ -20,7 +20,10 @@ export class Database {
   private locked = true
   private db?: IDBDatabase
 
-  constructor(public databaseName: string, private alertService?: AlertService) {}
+  constructor(
+    public databaseName: string,
+    private alertService?: AlertService,
+  ) {}
 
   public deinit(): void {
     ;(this.alertService as unknown) = undefined

packages/web/src/javascripts/Application/WebApplicationGroup.ts

@@ -24,7 +24,11 @@ const createApplication = (
 }
 
 export class WebApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
-  constructor(private defaultSyncServerHost: string, device: WebOrDesktopDevice, private webSocketUrl: string) {
+  constructor(
+    private defaultSyncServerHost: string,
+    device: WebOrDesktopDevice,
+    private webSocketUrl: string,
+  ) {
     super(device)
   }
 

packages/web/src/javascripts/Components/Abstract/PureComponent.tsx

@@ -4,14 +4,17 @@ import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { autorun, IReactionDisposer, IReactionPublic } from 'mobx'
 import { Component } from 'react'
 
-export type PureComponentState = Partial<Record<string, any>>
-export type PureComponentProps = Partial<Record<string, any>>
+export type PureComponentState = Partial<Record<string, unknown>>
+export type PureComponentProps = Partial<Record<string, unknown>>
 
 export abstract class AbstractComponent<P = PureComponentProps, S = PureComponentState> extends Component<P, S> {
   private unsubApp!: () => void
   private reactionDisposers: IReactionDisposer[] = []
 
-  constructor(props: P, protected application: WebApplication) {
+  constructor(
+    props: P,
+    protected application: WebApplication,
+  ) {
     super(props)
   }
 

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -108,7 +108,7 @@ const ContentListHeader = ({
       <div className="flex">
         <div className="relative" ref={displayOptionsContainerRef}>
           <RoundIconButton
-            className={classNames(showDisplayOptionsMenu && 'bg-contrast')}
+            className={classNames(showDisplayOptionsMenu ? 'bg-contrast' : undefined)}
             onClick={toggleDisplayOptionsMenu}
             ref={displayOptionsButtonRef}
             icon="sort-descending"

packages/web/src/javascripts/Components/ContentListView/InfiniteScroller/InfiniteScroller.tsx

@@ -136,9 +136,9 @@ export const InfinteScroller = forwardRef<InfiniteScrollerInterface, Props>(
 
     const _paginateFront = useCallback(() => {
       if (direction === 'vertical') {
-        setScrollSize(scrollArea!.current!.scrollHeight)
+        setScrollSize(scrollArea.current!.scrollHeight)
       } else {
-        setScrollSize(scrollArea!.current!.scrollWidth)
+        setScrollSize(scrollArea.current!.scrollWidth)
       }
       setDidPaginateFront(true)
       paginateFront()

packages/web/src/javascripts/Components/Footer/Footer.tsx

@@ -77,6 +77,7 @@ class Footer extends AbstractComponent<Props, State> {
           this.onNewUpdateAvailable()
           break
         case WebAppEvent.EditorFocused:
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           if ((data as any).eventSource === EditorEventSource.UserInteraction) {
             this.closeAccountMenu()
           }
@@ -87,6 +88,7 @@ class Footer extends AbstractComponent<Props, State> {
         case WebAppEvent.EndedBackupDownload: {
           const successMessage = 'Successfully saved backup.'
           const errorMessage = 'Unable to save local backup.'
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           statusService.setMessage((data as any).success ? successMessage : errorMessage)
 
           const twoSeconds = 2000

packages/web/src/javascripts/Components/Icon/IconPicker.tsx

@@ -28,7 +28,7 @@ const IconPicker = ({ selectedValue, onIconChange, platform, className, useIconG
             label: value,
             value: value,
             icon: value,
-          } as DropdownItem),
+          }) as DropdownItem,
       ),
     [iconKeys],
   )

packages/web/src/javascripts/Components/ImportModal/ImportModalFileItem.tsx

@@ -99,7 +99,7 @@ const ImportModalFileItem = ({
             {file.status === 'pending' && 'Could not auto-detect service. Please select manually.'}
             {file.status === 'parsing' && 'Parsing...'}
             {file.status === 'importing' && 'Importing...'}
-            {file.status === 'error' && `${file.error}`}
+            {file.status === 'error' && JSON.stringify(file.error)}
             {file.status === 'success' && file.successMessage}
           </div>
         </div>

packages/web/src/javascripts/Components/NoteView/Controller/FileViewController.ts

@@ -8,7 +8,10 @@ export class FileViewController implements ItemViewControllerInterface {
   private removeStreamObserver?: () => void
   public runtimeId = `${Math.random()}`
 
-  constructor(private application: SNApplication, public item: FileItem) {}
+  constructor(
+    private application: SNApplication,
+    public item: FileItem,
+  ) {}
 
   deinit() {
     this.dealloced = true

packages/web/src/javascripts/Components/Preferences/Controller/PreferencesSessionController.ts

@@ -18,7 +18,10 @@ export class PreferencesSessionController {
   private _menu: PreferencesMenuItem[]
   private _extensionLatestVersions: PackageProvider = new PackageProvider(new Map())
 
-  constructor(private application: WebApplication, private readonly _enableUnfinishedFeatures: boolean) {
+  constructor(
+    private application: WebApplication,
+    private readonly _enableUnfinishedFeatures: boolean,
+  ) {
     const menuItems = this._enableUnfinishedFeatures
       ? PREFERENCES_MENU_ITEMS.slice()
       : READY_PREFERENCES_MENU_ITEMS.slice()

packages/web/src/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx

@@ -86,6 +86,7 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const readFile = async (file: File): Promise<any> => {
     if (file.type === 'application/zip') {
       application.alerts.alert(STRING_IMPORTING_ZIP_FILE).catch(console.error)

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuth.ts

@@ -16,7 +16,10 @@ export class TwoFactorAuth {
   private _status: TwoFactorStatus | 'fetching' = 'fetching'
   private _errorMessage: string | null
 
-  constructor(private readonly mfaProvider: MfaProvider, private readonly userProvider: UserProvider) {
+  constructor(
+    private readonly mfaProvider: MfaProvider,
+    private readonly userProvider: UserProvider,
+  ) {
     this._errorMessage = null
 
     makeAutoObservable<TwoFactorAuth, '_status' | '_errorMessage' | 'deactivateMfa' | 'startActivation'>(

packages/web/src/javascripts/Components/SuperEditor/SuperNoteConverter.tsx

@@ -156,7 +156,7 @@ const SuperNoteConverter = ({
 
   return (
     <Modal
-      title={`Convert to ${name}`}
+      title={`Convert to ${uiFeature.displayName}`}
       close={closeDialog}
       actions={modalActions}
       className={{

packages/web/src/javascripts/Components/SuperEditor/Utils.ts

@@ -31,7 +31,9 @@ export function handleEditorChange(
     onChange?.(stringifiedEditorState, previewText)
   } catch (error) {
     window.alert(
-      `An invalid change was made inside the Super editor. Your change was not saved. Please report this error to the team: ${error}`,
+      `An invalid change was made inside the Super editor. Your change was not saved. Please report this error to the team: ${JSON.stringify(
+        error,
+      )}`,
     )
   }
 }

packages/web/src/javascripts/Controllers/Abstract/AbstractViewController.ts

@@ -10,7 +10,10 @@ export abstract class AbstractViewController<Event = void, EventData = void> {
   protected disposers: Disposer[] = []
   private eventObservers: ControllerEventObserver<Event, EventData>[] = []
 
-  constructor(public application: WebApplication, protected eventBus: InternalEventBusInterface) {}
+  constructor(
+    public application: WebApplication,
+    protected eventBus: InternalEventBusInterface,
+  ) {}
 
   protected async publishCrossControllerEventSync(name: CrossControllerEvent, data?: unknown): Promise<void> {
     await this.eventBus.publishSync({ type: name, payload: data }, InternalEventPublishStrategy.SEQUENCE)

packages/web/src/javascripts/Controllers/Abstract/PersistenceService.ts

@@ -8,7 +8,10 @@ export class PersistenceService {
   private unsubAppEventObserver: () => void
   private didHydrateOnce = false
 
-  constructor(private application: WebApplication, private eventBus: InternalEventBusInterface) {
+  constructor(
+    private application: WebApplication,
+    private eventBus: InternalEventBusInterface,
+  ) {
     this.unsubAppEventObserver = this.application.addEventObserver(async (eventName) => {
       if (!this.application) {
         return

packages/web/src/javascripts/Controllers/FilePreviewModalController.ts

@@ -46,8 +46,8 @@ export class FilePreviewModalController {
 
   deinit = () => {
     this.eventObservers.forEach((observer) => observer())
-    ;(this.currentFile as any) = undefined
-    ;(this.otherFiles as any) = undefined
+    ;(this.currentFile as unknown) = undefined
+    ;(this.otherFiles as unknown) = undefined
   }
 
   setCurrentFile = (currentFile: FileItem) => {

packages/web/src/javascripts/Controllers/ImportModalController.ts

@@ -27,7 +27,10 @@ export class ImportModalController {
   files: ImportModalFile[] = []
   importTag: SNTag | undefined = undefined
 
-  constructor(private application: WebApplication, private navigationController: NavigationController) {
+  constructor(
+    private application: WebApplication,
+    private navigationController: NavigationController,
+  ) {
     makeObservable(this, {
       isVisible: observable,
       setIsVisible: action,

packages/web/src/javascripts/Controllers/NoteSyncController.ts

@@ -23,7 +23,10 @@ export class NoteSyncController {
 
   private saveTimeout?: ReturnType<typeof setTimeout>
 
-  constructor(private application: WebApplication, private item: SNNote) {}
+  constructor(
+    private application: WebApplication,
+    private item: SNNote,
+  ) {}
 
   setItem(item: SNNote) {
     this.item = item

packages/web/src/javascripts/Controllers/PaneController/panesForLayout.ts

@@ -27,7 +27,7 @@ export function panesForLayout(layout: PaneLayout, application: WebApplication):
     }
   }
 
-  throw Error(`Unhandled pane layout ${layout}`)
+  throw Error('Unhandled pane layout')
 }
 
 export function isPanesChangeLeafDismiss(from: AppPaneId[], to: AppPaneId[]): boolean {

packages/web/src/javascripts/Controllers/ViewControllerManager.ts

@@ -80,7 +80,10 @@ export class ViewControllerManager implements InternalEventHandlerInterface {
   private applicationEventObserver: EventObserverInterface
   private toastService: ToastServiceInterface
 
-  constructor(public application: WebApplication, private device: WebOrDesktopDeviceInterface) {
+  constructor(
+    public application: WebApplication,
+    private device: WebOrDesktopDeviceInterface,
+  ) {
     const eventBus = application.events
 
     this.persistenceService = new PersistenceService(application, eventBus)

packages/web/src/javascripts/Hooks/mergeRefs.ts

@@ -24,6 +24,7 @@ SOFTWARE.
 
 import { MutableRefObject, LegacyRef, RefCallback } from 'react'
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function mergeRefs<T = any>(refs: Array<MutableRefObject<T> | LegacyRef<T>>): RefCallback<T> {
   return (value) => {
     refs.forEach((ref) => {

packages/web/src/javascripts/Types/External/Svg.d.ts

@@ -1,4 +1,5 @@
 declare module '*.svg' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const content: any
   export default content
 }

packages/web/src/javascripts/Utils/Utils.ts

@@ -52,7 +52,8 @@ export function isSameDay(dateA: Date, dateB: Date): boolean {
 }
 
 /** Via https://davidwalsh.name/javascript-debounce-function */
-export function debounce(this: any, func: any, wait: number, immediate = false) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function debounce(this: unknown, func: any, wait: number, immediate = false) {
   let timeout: NodeJS.Timeout | null
   return () => {
     // eslint-disable-next-line @typescript-eslint/no-this-alias, no-invalid-this
@@ -80,7 +81,7 @@ export function debounce(this: any, func: any, wait: number, immediate = false)
 if (!Array.prototype.includes) {
   // eslint-disable-next-line no-extend-native
   Object.defineProperty(Array.prototype, 'includes', {
-    value: function (searchElement: any, fromIndex: number) {
+    value: function (searchElement: unknown, fromIndex: number) {
       if (this == null) {
         throw new TypeError('"this" is null or not defined')
       }
@@ -107,7 +108,7 @@ if (!Array.prototype.includes) {
       //  b. If k < 0, let k be 0.
       let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0)
 
-      function sameValueZero(x: number, y: number) {
+      function sameValueZero(x: unknown, y: unknown) {
         return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y))
       }