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

refactor(react/note_title): use note property for title as well

Browse Source
This commit is contained in:
Elian Doran
2025-08-21 10:53:59 +03:00
parent db2bf537ea
commit 4da3e8a4d8
2 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/client/src/widgets/note_title.tsx
View File

@@ -1,41 +1,35 @@
import { useEffect, useRef, useState } from "preact/hooks"; import { useRef } from "preact/hooks";
import { t } from "../services/i18n"; import { t } from "../services/i18n";
import FormTextBox from "./react/FormTextBox"; import FormTextBox from "./react/FormTextBox";
import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks"; import { useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks";
import protected_session_holder from "../services/protected_session_holder"; import protected_session_holder from "../services/protected_session_holder";
import server from "../services/server"; import server from "../services/server";
import "./note_title.css"; import "./note_title.css";
export default function NoteTitleWidget() { export default function NoteTitleWidget() {
const { note, noteId, componentId } = useNoteContext(); const { note, noteId, componentId } = useNoteContext();
const [ title, setTitle ] = useState(note?.title); const title = useNoteProperty(note, "title", componentId);
const isProtected = useNoteProperty(note, "isProtected"); const isProtected = useNoteProperty(note, "isProtected");
useEffect(() => setTitle(note?.title), [ note?.noteId ]); const newTitle = useRef("");
const spacedUpdate = useSpacedUpdate(async () => { const spacedUpdate = useSpacedUpdate(async () => {
if (!note) { if (!note) {
return; return;
} }
protected_session_holder.touchProtectedSessionIfNecessary(note); protected_session_holder.touchProtectedSessionIfNecessary(note);
await server.put<void>(`notes/${noteId}/title`, { title: title }, componentId); await server.put<void>(`notes/${noteId}/title`, { title: newTitle.current }, componentId);
});
useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {
if (loadResults.isNoteReloaded(noteId, componentId)) {
setTitle(note?.title);
}
}); });
return ( return (
<div className="note-title-widget"> <div className="note-title-widget">
<FormTextBox <FormTextBox
autocomplete="off" autocomplete="off"
currentValue={title} currentValue={title ?? ""}
placeholder={t("note_title.placeholder")} placeholder={t("note_title.placeholder")}
className={`note-title ${isProtected ? "protected" : ""}`} className={`note-title ${isProtected ? "protected" : ""}`}
tabIndex={100} tabIndex={100}
onChange={(newValue) => { onChange={(newValue) => {
setTitle(newValue); newTitle.current = newValue;
spacedUpdate.scheduleUpdate(); spacedUpdate.scheduleUpdate();
}} }}
/> />

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

@@ -264,17 +264,30 @@ export function useNoteContext() {
} }
export function useNoteProperty<T extends keyof FNote>(note: FNote | null | undefined, property: T) { /**
* Allows a React component to listen to obtain a property of a {@link FNote} while also automatically watching for changes, either via the user changing to a different note or the property being changed externally.
*
* @param note the {@link FNote} whose property to obtain.
* @param property a property of a {@link FNote} to obtain the value from (e.g. `title`, `isProtected`).
* @param componentId optionally, constricts the refresh of the value if an update occurs externally via the component ID of a legacy widget. This can be used to avoid external data replacing fresher, user-inputted data.
* @returns the value of the requested property.
*/
export function useNoteProperty<T extends keyof FNote>(note: FNote | null | undefined, property: T, componentId?: string) {
if (!note) { if (!note) {
return null; return null;
} }
const [ value, setValue ] = useState<FNote[T]>(note[property]); const [ value, setValue ] = useState<FNote[T]>(note[property]);
useEffect(() => setValue(value), [ note[property] ]);
// Watch for note changes.
useEffect(() => setValue(note[property]), [ note[property] ]);
// Watch for external changes.
useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {
if (loadResults.isNoteReloaded(note.noteId)) { if (loadResults.isNoteReloaded(note.noteId, componentId)) {
setValue(note[property]); setValue(note[property]);
} }
}); });
return value; return value;
} }