gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 13:39:01 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki 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
No known key found for this signature in database
31 changed files with 90 additions and 71 deletions
Show Stats 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 (