refactor(react): fix all eslint issues in .tsx files

apps/client/src/services/utils.ts

@@ -816,6 +816,14 @@ export function mapToKeyValueArray<K extends string | number | symbol, V>(map: R
     return values;
 }
 
+export function getErrorMessage(e: unknown) {
+    if (e && typeof e === "object" && "message" in e && typeof e.message === "string") {
+        return e.message;
+    } else {
+        return "Unknown error";
+    }
+}
+
 export default {
     reloadFrontendApp,
     restartDesktopApp,

apps/client/src/widgets/bulk_actions/note/move_note.tsx

@@ -1,11 +1,11 @@
 import { t } from "../../../services/i18n.js";
-import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
+import AbstractBulkAction from "../abstract_bulk_action.js";
 import BulkAction, { BulkActionText } from "../BulkAction.jsx";
 import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
 import { useEffect, useState } from "preact/hooks";
 import { useSpacedUpdate } from "../../react/hooks.jsx";
 
-function MoveNoteBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition }) {
+function MoveNoteBulkActionComponent({ bulkAction }: { bulkAction: AbstractBulkAction }) {
     const [ targetParentNoteId, setTargetParentNoteId ] = useState<string>();
     const spacedUpdate = useSpacedUpdate(() => {
         return bulkAction.saveAction({ targetParentNoteId: targetParentNoteId })
@@ -45,6 +45,6 @@ export default class MoveNoteBulkAction extends AbstractBulkAction {
     }
 
     doRender() {
-        return <MoveNoteBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
+        return <MoveNoteBulkActionComponent bulkAction={this} />
     }
 }

apps/client/src/widgets/bulk_actions/note/rename_note.tsx

@@ -1,4 +1,3 @@
-import SpacedUpdate from "../../../services/spaced_update.js";
 import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
 import { t } from "../../../services/i18n.js";
 import BulkAction from "../BulkAction.jsx";

apps/client/src/widgets/bulk_actions/relation/add_relation.tsx

@@ -1,6 +1,4 @@
-import SpacedUpdate from "../../../services/spaced_update.js";
 import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
-import noteAutocompleteService from "../../../services/note_autocomplete.js";
 import { t } from "../../../services/i18n.js";
 import BulkAction, { BulkActionText } from "../BulkAction.jsx";
 import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";

apps/client/src/widgets/dialogs/about.tsx

@@ -10,8 +10,8 @@ import type { AppInfo } from "@triliumnext/commons";
 import { useTriliumEvent } from "../react/hooks.jsx";
 
 export default function AboutDialog() {
-    let [appInfo, setAppInfo] = useState<AppInfo | null>(null);
+    const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
-    let [shown, setShown] = useState(false);
+    const [shown, setShown] = useState(false);
     const forceWordBreak: CSSProperties = { wordBreak: "break-all" };
 
     useTriliumEvent("openAboutDialog", () => setShown(true));

apps/client/src/widgets/dialogs/delete_notes.tsx

@@ -139,7 +139,7 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
         const noteIds = brokenRelations
             .map(relation => relation.noteId)
             .filter(noteId => noteId) as string[];
-        froca.getNotes(noteIds).then(async (notes) => {
+        froca.getNotes(noteIds).then(async () => {
             const notesWithBrokenRelations: BrokenRelationData[] = [];
             for (const attr of brokenRelations) {
                 notesWithBrokenRelations.push({

apps/client/src/widgets/dialogs/jump_to_note.tsx

@@ -25,7 +25,7 @@ export default function JumpToNoteDialogComponent() {
     
     async function openDialog(commandMode: boolean) {        
         let newMode: Mode;
-        let initialText: string = "";
+        let initialText = "";
 
         if (commandMode) {
             newMode = "commands";

apps/client/src/widgets/dialogs/markdown_import.tsx

@@ -14,8 +14,8 @@ interface RenderMarkdownResponse {
 
 export default function MarkdownImportDialog() {
     const markdownImportTextArea = useRef<HTMLTextAreaElement>(null);
-    let [ text, setText ] = useState("");
+    const [ text, setText ] = useState("");
-    let [ shown, setShown ] = useState(false);
+    const [ shown, setShown ] = useState(false);
 
     const triggerImport = useCallback(() => {
         if (appContext.tabManager.getActiveContextNoteType() !== "text") {

apps/client/src/widgets/dialogs/note_type_chooser.tsx

@@ -41,7 +41,7 @@ export default function NoteTypeChooserDialogComponent() {
             note_types.getNoteTypeItems().then(noteTypes => {
                 let index = -1;
 
-                setNoteTypes((noteTypes ?? []).map((item, _index) => {
+                setNoteTypes((noteTypes ?? []).map((item) => {
                     if (item.title === "----") {
                         index++;
                         return {

apps/client/src/widgets/dialogs/recent_changes.tsx

@@ -17,7 +17,7 @@ import { useTriliumEvent } from "../react/hooks";
 
 export default function RecentChangesDialog() {
     const [ ancestorNoteId, setAncestorNoteId ] = useState<string>();
-    const [ groupedByDate, setGroupedByDate ] = useState<Map<String, RecentChangeRow[]>>();
+    const [ groupedByDate, setGroupedByDate ] = useState<Map<string, RecentChangeRow[]>>();
     const [ needsRefresh, setNeedsRefresh ] = useState(false);
     const [ shown, setShown ] = useState(false);
 
@@ -78,7 +78,7 @@ export default function RecentChangesDialog() {
     )
 }
 
-function RecentChangesTimeline({ groupedByDate, setShown }: { groupedByDate: Map<String, RecentChangeRow[]>, setShown: Dispatch<StateUpdater<boolean>> }) {
+function RecentChangesTimeline({ groupedByDate, setShown }: { groupedByDate: Map<string, RecentChangeRow[]>, setShown: Dispatch<StateUpdater<boolean>> }) {
     return (
         <>
             { Array.from(groupedByDate.entries()).map(([dateDay, dayChanges]) => {
@@ -156,16 +156,18 @@ function DeletedNoteLink({ change, setShown }: { change: RecentChangeRow, setSho
 }
 
 function groupByDate(rows: RecentChangeRow[]) {
-    const groupedByDate = new Map<String, RecentChangeRow[]>();
+    const groupedByDate = new Map<string, RecentChangeRow[]>();
 
     for (const row of rows) {
         const dateDay = row.date.substr(0, 10);
 
-        if (!groupedByDate.has(dateDay)) {
+        let dateDayArray = groupedByDate.get(dateDay);
-            groupedByDate.set(dateDay, []);
+        if (!dateDayArray) {
+            dateDayArray = [];
+            groupedByDate.set(dateDay, dateDayArray);
         }
 
-        groupedByDate.get(dateDay)!.push(row);
+        dateDayArray.push(row);
     }
 
     return groupedByDate;

apps/client/src/widgets/react/CKEditor.tsx

@@ -1,4 +1,4 @@
-import { CKTextEditor, type AttributeEditor, type EditorConfig, type ModelPosition } from "@triliumnext/ckeditor5";
+import type { CKTextEditor, AttributeEditor, EditorConfig, ModelPosition } from "@triliumnext/ckeditor5";
 import { useEffect, useImperativeHandle, useRef } from "preact/compat";
 import { MutableRef } from "preact/hooks";
 

apps/client/src/widgets/react/FormGroup.tsx

@@ -8,6 +8,7 @@ interface FormGroupProps {
     label?: string;
     title?: string;
     className?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     children: VNode<any>;
     description?: string | ComponentChildren;
     disabled?: boolean;

apps/client/src/widgets/react/FormSelect.tsx

@@ -65,6 +65,7 @@ function FormSelectBody({ id, name, children, onChange, style, className }: { id
     return (
         <select
             id={id}
+            name={name}
             onChange={e => onChange((e.target as HTMLInputElement).value)}
             style={style}
             className={`form-select ${className ?? ""}`}
@@ -78,10 +79,10 @@ function FormSelectGroup<T>({ values, keyProperty, titleProperty, currentValue }
     return values.map(item => {
         return (
             <option
-                value={item[keyProperty] as any}
+                value={item[keyProperty] as string | number}
                 selected={item[keyProperty] === currentValue}
             >
-                {item[titleProperty ?? keyProperty] ?? item[keyProperty] as any}
+                {item[titleProperty ?? keyProperty] ?? item[keyProperty] as string | number}
             </option>
         );
     });

apps/client/src/widgets/react/FormToggle.tsx

@@ -1,5 +1,3 @@
-import { t } from "../../services/i18n";
-import { openInAppHelpFromUrl } from "../../services/utils";
 import "./FormToggle.css";
 import HelpButton from "./HelpButton";
 

apps/client/src/widgets/react/KeyboardShortcut.tsx

@@ -20,7 +20,7 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps)
 
     return (
         <>
-            {action.effectiveShortcuts?.map((shortcut, i) => {
+            {action.effectiveShortcuts?.map((shortcut) => {
                 const keys = shortcut.split("+");
                 return joinElements(keys
                     .map((key, i) => (

apps/client/src/widgets/react/NoteLink.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import link from "../../services/link";
 import RawHtml from "./RawHtml";
 

apps/client/src/widgets/react/hooks.tsx

@@ -16,16 +16,16 @@ import { Tooltip } from "bootstrap";
 import { CSSProperties } from "preact/compat";
 
 export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
-    const parentComponent = useContext(ParentComponent)!;
+    const parentComponent = useContext(ParentComponent);
     useEffect(() => {
-        parentComponent.registerHandler(eventName, handler);
+        parentComponent?.registerHandler(eventName, handler);
-        return (() => parentComponent.removeHandler(eventName, handler));
+        return (() => parentComponent?.removeHandler(eventName, handler));
     }, [ eventName, handler ]);
     useDebugValue(eventName);
 }
 
 export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler: (data: EventData<T>, eventName: T) => void) {
-    const parentComponent = useContext(ParentComponent)!;
+    const parentComponent = useContext(ParentComponent);
     
     useEffect(() => {
         const handlers: ({ eventName: T, callback: (data: EventData<T>) => void })[] = [];
@@ -36,12 +36,12 @@ export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler:
         }
     
         for (const { eventName, callback } of handlers) {
-            parentComponent.registerHandler(eventName, callback);
+            parentComponent?.registerHandler(eventName, callback);
         }
     
         return (() => {
             for (const { eventName, callback } of handlers) {
-                parentComponent.removeHandler(eventName, callback);
+                parentComponent?.removeHandler(eventName, callback);
             }
         });
     }, [ eventNames, handler ]);
@@ -209,7 +209,7 @@ export function useNoteContext() {
     useTriliumEvent("noteSwitchedAndActivated", ({ noteContext }) => {
         setNoteContext(noteContext);
     });
-    useTriliumEvent("noteSwitched", ({ noteContext, notePath }) => {
+    useTriliumEvent("noteSwitched", ({ notePath }) => {
         setNotePath(notePath);
     });
     useTriliumEvent("frocaReloaded", () => {
@@ -253,7 +253,7 @@ export function useNoteProperty<T extends keyof FNote>(note: FNote | null | unde
         return null;
     }
 
-    const [ value, setValue ] = useState<FNote[T]>(note[property]);
+    const [, setValue ] = useState<FNote[T]>(note[property]);
     const refreshValue = () => setValue(note[property]);
 
     // Watch for note changes.
@@ -513,13 +513,14 @@ export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Toolti
     return { showTooltip, hideTooltip };
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function useLegacyImperativeHandlers(handlers: Record<string, Function>, force?: boolean) {
     const parentComponent = useContext(ParentComponent);
     if (!force) {
         useEffect(() => {
-            Object.assign(parentComponent as any, handlers);
+            Object.assign(parentComponent as never, handlers);
         }, [ handlers ])
     } else {
-        Object.assign(parentComponent as any, handlers);
+        Object.assign(parentComponent as never, handlers);
     }
 }

apps/client/src/widgets/react/react_utils.tsx

@@ -1,7 +1,5 @@
 import { ComponentChild, createContext, render, type JSX, type RefObject } from "preact";
 import Component from "../../components/component";
-import { EventData, EventNames } from "../../components/app_context";
-import { useContext } from "preact/hooks";
 
 export const ParentComponent = createContext<Component | null>(null);
 
@@ -44,6 +42,13 @@ export function disposeReactWidget(container: Element) {
 }
 
 export function joinElements(components: ComponentChild[], separator = ", ") {
-    return components.reduce<any>((acc, item) =>
+    const joinedComponents: ComponentChild[] = [];
-        (acc.length ? [...acc, separator, item] : [item]), []);
+    for (let i=0; i<components.length; i++) {
+        joinedComponents.push(components[i]);
+        if (i + 1 < components.length) {
+            joinedComponents.push(separator);
+        }
+    }
+
+    return joinedComponents;
 }

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -3,7 +3,7 @@ import Dropdown from "../react/Dropdown";
 import { NOTE_TYPES } from "../../services/note_types";
 import { FormDropdownDivider, FormListBadge, FormListItem } from "../react/FormList";
 import { getAvailableLocales, t } from "../../services/i18n";
-import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumOption, useTriliumOptionBeta, useTriliumOptionJson } from "../react/hooks";
+import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumOption } from "../react/hooks";
 import mime_types from "../../services/mime_types";
 import { Locale, NoteType, ToggleInParentResponse } from "@triliumnext/commons";
 import server from "../../services/server";

apps/client/src/widgets/ribbon/NoteInfoTab.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { TabContext } from "./ribbon-interface";
 import { MetadataResponse, NoteSizeResponse, SubtreeSizeResponse } from "@triliumnext/commons";

apps/client/src/widgets/ribbon/NoteMapTab.tsx

@@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from "preact/hooks";
 
 const SMALL_SIZE_HEIGHT = "300px";
 
-export default function NoteMapTab({ note, noteContext }: TabContext) {
+export default function NoteMapTab({ noteContext }: TabContext) {
     const [ isExpanded, setExpanded ] = useState(false);
     const [ height, setHeight ] = useState(SMALL_SIZE_HEIGHT);
     const containerRef = useRef<HTMLDivElement>(null);

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
-import { useNoteContext, useTriliumEvent, useTriliumEvents } from "../react/hooks";
+import { useNoteContext, useTriliumEvents } from "../react/hooks";
 import "./style.css";
 import { VNode } from "preact";
 import BasicPropertiesTab from "./BasicPropertiesTab";

apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx

@@ -19,6 +19,7 @@ import Icon from "../react/Icon";
 import bulk_action, { ACTION_GROUPS } from "../../services/bulk_action";
 import { FormListHeader, FormListItem } from "../react/FormList";
 import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
+import { getErrorMessage } from "../../services/utils";
 
 export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
   const parentComponent = useContext(ParentComponent);
@@ -56,8 +57,8 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
         } else {
           setError(undefined);
         }
-    } catch (e: any) {
+    } catch (e: unknown) {
-        toast.showError(e.message);
+      toast.showError(getErrorMessage(e));
     }
 
     parentComponent?.triggerEvent("searchRefreshed", { ntxId });

apps/client/src/widgets/ribbon/components/AttributeEditor.tsx

@@ -11,7 +11,7 @@ import FNote from "../../../entities/fnote";
 import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
 import attribute_parser, { Attribute } from "../../../services/attribute_parser";
 import ActionButton from "../../react/ActionButton";
-import { escapeQuotes } from "../../../services/utils";
+import { escapeQuotes, getErrorMessage } from "../../../services/utils";
 import link from "../../../services/link";
 import froca from "../../../services/froca";
 import contextMenu from "../../../menus/context_menu";
@@ -124,7 +124,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId }:
     function parseAttributes() {
         try {
             return attribute_parser.lexAndParse(getPreprocessedData(currentValueRef.current));
-        } catch (e: any) {
+        } catch (e: unknown) {
             setError(e);
         }
     }
@@ -182,8 +182,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId }:
             return;
         }
 
-        // TODO: Incomplete type
+        //@ts-expect-error TODO: Incomplete type
-        //@ts-ignore
         attrs.push({
             type,
             name,
@@ -306,8 +305,9 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId }:
 
                             try {
                                 parsedAttrs = attribute_parser.lexAndParse(getPreprocessedData(currentValueRef.current), true);
-                            } catch (e) {
+                            } catch (e: unknown) {
                                 // the input is incorrect because the user messed up with it and now needs to fix it manually
+                                console.log(e);
                                 return null;
                             }
 
@@ -376,7 +376,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId }:
 
                 { error && (
                     <div className="attribute-errors">
-                        {typeof error === "object" && "message" in error && typeof error.message === "string" && error.message}
+                        {getErrorMessage(error)}
                     </div>
                 )}
             </div>

apps/client/src/widgets/type_widgets/content_widget.tsx

@@ -2,7 +2,6 @@ import TypeWidget from "./type_widget.js";
 import type FNote from "../../entities/fnote.js";
 import type NoteContextAwareWidget from "../note_context_aware_widget.js";
 import { t } from "../../services/i18n.js";
-import type BasicWidget from "../basic_widget.js";
 import type { JSX } from "preact/jsx-runtime";
 import AppearanceSettings from "./options/appearance.jsx";
 import { disposeReactWidget, renderReactWidgetAtElement } from "../react/react_utils.jsx";

apps/client/src/widgets/type_widgets/options/backup.tsx

@@ -4,7 +4,7 @@ import server from "../../../services/server";
 import toast from "../../../services/toast";
 import Button from "../../react/Button";
 import FormCheckbox from "../../react/FormCheckbox";
-import FormGroup, { FormMultiGroup } from "../../react/FormGroup";
+import { FormMultiGroup } from "../../react/FormGroup";
 import FormText from "../../react/FormText";
 import { useTriliumOptionBool } from "../../react/hooks";
 import OptionsSection from "./components/OptionsSection";

apps/client/src/widgets/type_widgets/options/code_notes.tsx

@@ -6,7 +6,7 @@ import FormGroup from "../../react/FormGroup";
 import FormSelect from "../../react/FormSelect";
 import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
 import OptionsSection from "./components/OptionsSection";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef } from "preact/hooks";
 import codeNoteSample from "./samples/code_note.txt?raw";
 import { DEFAULT_PREFIX } from "../abstract_code_type_widget";
 import { MimeType } from "@triliumnext/commons";
@@ -133,7 +133,10 @@ function CodeMimeTypes() {
         const result: Record<string, MimeType[]> = {};
         ungroupedMimeTypes.sort((a, b) => a.title.localeCompare(b.title));
 
-        result[""] = [ plainTextMimeType! ];
+        if (plainTextMimeType) {
+            result[""] = [ plainTextMimeType ];
+        }
+        
         for (const mimeType of ungroupedMimeTypes) {
             const initial = mimeType.title.charAt(0).toUpperCase();
             if (!result[initial]) {

apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx

@@ -1,5 +1,4 @@
 import { OptionDefinitions } from "@triliumnext/commons";
-import FormGroup from "../../../react/FormGroup";
 import FormTextBox from "../../../react/FormTextBox";
 import FormSelect from "../../../react/FormSelect";
 import { useEffect, useMemo, useState } from "preact/hooks";

apps/client/src/widgets/type_widgets/options/etapi.tsx

@@ -119,17 +119,21 @@ function TokenList({ tokens }: { tokens: EtapiToken[] }) {
                             <td>{name}</td>
                             <td>{formatDateTime(utcDateCreated)}</td>
                             <td>
-                                <ActionButton
+                                {etapiTokenId && (
-                                    icon="bx bx-edit-alt"
+                                    <>
-                                    text={t("etapi.rename_token")}
+                                        <ActionButton
-                                    onClick={() => renameCallback(etapiTokenId!, name)}
+                                            icon="bx bx-edit-alt"
-                                />
+                                            text={t("etapi.rename_token")}
-
+                                            onClick={() => renameCallback(etapiTokenId, name)}
-                                <ActionButton
+                                        />
-                                    icon="bx bx-trash"
+        
-                                    text={t("etapi.delete_token")}
+                                        <ActionButton
-                                    onClick={() => deleteCallback(etapiTokenId!, name)}
+                                            icon="bx bx-trash"
-                                />
+                                            text={t("etapi.delete_token")}
+                                            onClick={() => deleteCallback(etapiTokenId, name)}
+                                        />
+                                    </>
+                                )}
                             </td>
                         </tr>
                     ))}

apps/client/src/widgets/type_widgets/options/i18n.tsx

@@ -3,7 +3,7 @@ import { getAvailableLocales, t } from "../../../services/i18n";
 import FormSelect from "../../react/FormSelect";
 import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
-import { useTriliumOption, useTriliumOptionInt, useTriliumOptionJson } from "../../react/hooks";
+import { useTriliumOption, useTriliumOptionJson } from "../../react/hooks";
 import type { Locale } from "@triliumnext/commons";
 import { isElectron, restartDesktopApp } from "../../../services/utils";
 import FormRadioGroup, { FormInlineRadioGroup } from "../../react/FormRadioGroup";

apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx

@@ -6,7 +6,7 @@ import FormCheckbox from "../../react/FormCheckbox"
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks"
 import { FormInlineRadioGroup } from "../../react/FormRadioGroup"
 import Admonition from "../../react/Admonition"
-import { useCallback, useEffect, useMemo, useState } from "preact/hooks"
+import { useCallback, useEffect, useState } from "preact/hooks"
 import { OAuthStatus, TOTPGenerate, TOTPRecoveryKeysResponse, TOTPStatus } from "@triliumnext/commons"
 import server from "../../../services/server"
 import Button from "../../react/Button"
@@ -206,7 +206,7 @@ function OAuthSettings() {
     const [ status, setStatus ] = useState<OAuthStatus>();
 
     useEffect(() => {
-        server.get<OAuthStatus>("oauth/status").then((result) => setStatus);
+        server.get<OAuthStatus>("oauth/status").then(setStatus);
     });
 
     return (