Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-01 10:55:55 +01:00
Code Issues Packages Projects Releases Activity

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

Browse Source
This commit is contained in:
Elian Doran
2025-08-25 17:17:56 +03:00
parent 25d5d51085
commit e386b03b90
31 changed files with 90 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/services/utils.ts
View File

@@ -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,

6
apps/client/src/widgets/bulk_actions/note/move_note.tsx
View File

@@ -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} />
}
}

1
apps/client/src/widgets/bulk_actions/note/rename_note.tsx
View File

@@ -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";

2
apps/client/src/widgets/bulk_actions/relation/add_relation.tsx
View File

@@ -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";

4
apps/client/src/widgets/dialogs/about.tsx
View File

@@ -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);
let [shown, setShown] = useState(false);
const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
const [shown, setShown] = useState(false);
const forceWordBreak: CSSProperties = { wordBreak: "break-all" };
useTriliumEvent("openAboutDialog", () => setShown(true));

2
apps/client/src/widgets/dialogs/delete_notes.tsx
View File

@@ -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({

2
apps/client/src/widgets/dialogs/jump_to_note.tsx
View File

@@ -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";

4
apps/client/src/widgets/dialogs/markdown_import.tsx
View File

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

2
apps/client/src/widgets/dialogs/note_type_chooser.tsx
View File

@@ -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 {

14
apps/client/src/widgets/dialogs/recent_changes.tsx
View File

@@ -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)) {
groupedByDate.set(dateDay, []);
let dateDayArray = groupedByDate.get(dateDay);
if (!dateDayArray) {
dateDayArray = [];
groupedByDate.set(dateDay, dateDayArray);
}
groupedByDate.get(dateDay)!.push(row);
dateDayArray.push(row);
}
return groupedByDate;

2
apps/client/src/widgets/react/CKEditor.tsx
View File

@@ -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";

1
apps/client/src/widgets/react/FormGroup.tsx
View File

@@ -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;

5
apps/client/src/widgets/react/FormSelect.tsx
View File

@@ -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>
);
});

2
apps/client/src/widgets/react/FormToggle.tsx
View File

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

2
apps/client/src/widgets/react/KeyboardShortcut.tsx
View File

@@ -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) => (

2
apps/client/src/widgets/react/NoteLink.tsx
View File

@@ -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";

21
apps/client/src/widgets/react/hooks.tsx
View File

@@ -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);
return (() => parentComponent.removeHandler(eventName, handler));
parentComponent?.registerHandler(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);
}
}

13
apps/client/src/widgets/react/react_utils.tsx
View File

@@ -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) =>
(acc.length ? [...acc, separator, item] : [item]), []);
const joinedComponents: ComponentChild[] = [];
for (let i=0; i<components.length; i++) {
joinedComponents.push(components[i]);
if (i + 1 < components.length) {
joinedComponents.push(separator);
}
}
return joinedComponents;
}

2
apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
View File

@@ -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";

2
apps/client/src/widgets/ribbon/NoteInfoTab.tsx
View File

@@ -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";

2
apps/client/src/widgets/ribbon/NoteMapTab.tsx
View File

@@ -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);

2
apps/client/src/widgets/ribbon/Ribbon.tsx
View File

@@ -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";

5
apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
View File

@@ -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) {
toast.showError(e.message);
} catch (e: unknown) {
toast.showError(getErrorMessage(e));
}
parentComponent?.triggerEvent("searchRefreshed", { ntxId });

12
apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
View File

@@ -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-ignore
//@ts-expect-error TODO: Incomplete type
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>

1
apps/client/src/widgets/type_widgets/content_widget.tsx
View File

@@ -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";

2
apps/client/src/widgets/type_widgets/options/backup.tsx
View File

@@ -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";

7
apps/client/src/widgets/type_widgets/options/code_notes.tsx
View File

@@ -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]) {

1
apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx
View File

@@ -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";

26
apps/client/src/widgets/type_widgets/options/etapi.tsx
View File

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

2
apps/client/src/widgets/type_widgets/options/i18n.tsx
View File

@@ -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";

4
apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx
View File

@@ -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 (