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

refactor(react): fix a few rules of hooks violations

Browse Source
This commit is contained in:
Elian Doran
2025-08-25 18:00:10 +03:00
parent e386b03b90
commit 733ec2c145
9 changed files with 125 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/client/src/widgets/react/Modal.tsx
View File

@@ -71,29 +71,27 @@ export default function Modal({ children, className, size, title, header, footer
const parentWidget = useContext(ParentComponent);
const elementToFocus = useRef<Element | null>();
if (onShown || onHidden) {
useEffect(() => {
const modalElement = modalRef.current;
if (!modalElement) {
return;
useEffect(() => {
const modalElement = modalRef.current;
if (!modalElement) {
return;
}
if (onShown) {
modalElement.addEventListener("shown.bs.modal", onShown);
}
modalElement.addEventListener("hidden.bs.modal", () => {
onHidden();
if (elementToFocus.current && "focus" in elementToFocus.current) {
(elementToFocus.current as HTMLElement).focus();
}
});
return () => {
if (onShown) {
modalElement.addEventListener("shown.bs.modal", onShown);
modalElement.removeEventListener("shown.bs.modal", onShown);
}
modalElement.addEventListener("hidden.bs.modal", () => {
onHidden();
if (elementToFocus.current && "focus" in elementToFocus.current) {
(elementToFocus.current as HTMLElement).focus();
}
});
return () => {
if (onShown) {
modalElement.removeEventListener("shown.bs.modal", onShown);
}
modalElement.removeEventListener("hidden.bs.modal", onHidden);
};
}, [ ]);
}
modalElement.removeEventListener("hidden.bs.modal", onHidden);
};
}, [ onShown, onHidden ]);
useEffect(() => {
if (!parentWidget) {

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

@@ -216,15 +216,13 @@ export function useNoteContext() {
setNote(noteContext?.note);
});
useLegacyImperativeHandlers({
setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
setNoteContext(noteContext);
}
}, true);
const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
(parentComponent as ReactWrappedWidget & { setNoteContextEvent: (data: EventData<"setNoteContext">) => void }).setNoteContextEvent = ({ noteContext }: EventData<"setNoteContext">) => {
setNoteContext(noteContext);
}
useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`);
const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
return {
note: note,
@@ -249,25 +247,21 @@ export function useNoteContext() {
* @returns the value of the requested property.
*/
export function useNoteProperty<T extends keyof FNote>(note: FNote | null | undefined, property: T, componentId?: string) {
if (!note) {
return null;
}
const [, setValue ] = useState<FNote[T]>(note[property]);
const refreshValue = () => setValue(note[property]);
const [, setValue ] = useState<FNote[T] | undefined>(note?.[property]);
const refreshValue = () => setValue(note?.[property]);
// Watch for note changes.
useEffect(() => refreshValue(), [ note, note[property] ]);
useEffect(() => refreshValue(), [ note, note?.[property] ]);
// Watch for external changes.
useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
if (loadResults.isNoteReloaded(note.noteId, componentId)) {
if (loadResults.isNoteReloaded(note?.noteId, componentId)) {
refreshValue();
}
});
useDebugValue(property);
return note[property];
return note?.[property];
}
export function useNoteRelation(note: FNote | undefined | null, relationName: string): [string | null | undefined, (newValue: string) => void] {
@@ -362,10 +356,6 @@ export function useNoteLabelBoolean(note: FNote | undefined | null, labelName: s
}
export function useNoteBlob(note: FNote | null | undefined): [ FBlob | null | undefined ] {
if (!note) {
return [ undefined ];
}
const [ blob, setBlob ] = useState<FBlob | null>();
function refresh() {
@@ -379,7 +369,7 @@ export function useNoteBlob(note: FNote | null | undefined): [ FBlob | null | un
}
});
useDebugValue(note.noteId);
useDebugValue(note?.noteId);
return [ blob ] as const;
}
@@ -514,13 +504,9 @@ export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Toolti
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
export function useLegacyImperativeHandlers(handlers: Record<string, Function>, force?: boolean) {
export function useLegacyImperativeHandlers(handlers: Record<string, Function>) {
const parentComponent = useContext(ParentComponent);
if (!force) {
useEffect(() => {
Object.assign(parentComponent as never, handlers);
}, [ handlers ])
} else {
useEffect(() => {
Object.assign(parentComponent as never, handlers);
}
}, [ handlers ]);
}