Skip to content

Commit c17df24

Browse files
eliandoraneliandoran
committed
refactor(print/list): use separate file
1 parent bbcc2f4 commit c17df24

File tree

4 files changed

+100
-92
lines changed

4 files changed

+100
-92
lines changed

‎apps/client/src/widgets/collections/NoteList.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { allViewTypes, ViewModeMedia, ViewModeProps, ViewTypeOptions } from "./i
22
import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent } from "../react/hooks";
33
import FNote from "../../entities/fnote";
44
import "./NoteList.css";
5-
import { ListView, GridView, ListPrintView } from "./legacy/ListOrGridView";
5+
import { ListView, GridView } from "./legacy/ListOrGridView";
66
import { useEffect, useRef, useState } from "preact/hooks";
77
import GeoView from "./geomap";
88
import ViewModeStorage from "./view_mode_storage";
@@ -13,6 +13,7 @@ import { subscribeToMessages, unsubscribeToMessage as unsubscribeFromMessage } f
1313
import { WebSocketMessage } from "@triliumnext/commons";
1414
import froca from "../../services/froca";
1515
import PresentationView from "./presentation";
16+
import { ListPrintView } from "./legacy/ListPrintView";
1617

1718
interface NoteListProps {
1819
note: FNote | null | undefined;

‎apps/client/src/widgets/collections/legacy/ListOrGridView.tsx‎

Lines changed: 2 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
1+
import { useEffect, useRef, useState } from "preact/hooks";
22
import FNote from "../../../entities/fnote";
33
import Icon from "../../react/Icon";
44
import { ViewModeProps } from "../interface";
@@ -11,9 +11,7 @@ import tree from "../../../services/tree";
1111
import link from "../../../services/link";
1212
import { t } from "../../../services/i18n";
1313
import attribute_renderer from "../../../services/attribute_renderer";
14-
import froca from "../../../services/froca";
15-
import { RawHtmlBlock } from "../../react/RawHtml";
16-
import { escapeHtml } from "../../../services/utils";
14+
import { useFilteredNoteIds } from "./utils";
1715

1816
export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
1917
const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@@ -37,82 +35,6 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
3735
);
3836
}
3937

40-
interface NotesWithContent {
41-
note: FNote;
42-
content: string;
43-
}
44-
45-
export function ListPrintView({ note, noteIds: unfilteredNoteIds, onReady }: ViewModeProps<{}>) {
46-
const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
47-
const [ notesWithContent, setNotesWithContent ] = useState<NotesWithContent[]>();
48-
49-
useLayoutEffect(() => {
50-
froca.getNotes(noteIds).then(async (notes) => {
51-
const notesWithContent: NotesWithContent[] = [];
52-
53-
async function processNote(note: FNote, depth: number) {
54-
const content = await content_renderer.getRenderedContent(note, {
55-
trim: false,
56-
noChildrenList: true
57-
});
58-
59-
const contentEl = content.$renderedContent[0];
60-
61-
// Create page title element
62-
const pageTitleEl = document.createElement("h1");
63-
pageTitleEl.textContent = note.title;
64-
contentEl.prepend(pageTitleEl);
65-
66-
// Rewrite heading tags to ensure proper hierarchy in print view.
67-
const headings = contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6")
68-
for (const headingEl of headings) {
69-
const currentLevel = parseInt(headingEl.tagName.substring(1), 10);
70-
const newLevel = Math.min(currentLevel + depth, 6);
71-
const newHeadingEl = document.createElement(`h${newLevel}`);
72-
newHeadingEl.innerHTML = headingEl.innerHTML;
73-
headingEl.replaceWith(newHeadingEl);
74-
}
75-
76-
notesWithContent.push({ note, content: contentEl.innerHTML });
77-
78-
if (note.hasChildren()) {
79-
const imageLinks = note.getRelations("imageLink");
80-
const childNotes = await note.getChildNotes();
81-
const filteredChildNotes = childNotes.filter((childNote) => !imageLinks.find((rel) => rel.value === childNote.noteId));
82-
for (const childNote of filteredChildNotes) {
83-
await processNote(childNote, depth + 1);
84-
}
85-
}
86-
}
87-
88-
for (const note of notes) {
89-
await processNote(note, 1);
90-
}
91-
setNotesWithContent(notesWithContent);
92-
});
93-
}, [noteIds]);
94-
95-
useEffect(() => {
96-
if (notesWithContent && onReady) {
97-
onReady();
98-
}
99-
}, [ notesWithContent, onReady ]);
100-
101-
return (
102-
<div class="note-list list-print-view">
103-
<div class="note-list-container use-tn-links">
104-
<h1>{note.title}</h1>
105-
106-
{notesWithContent?.map(({ note: childNote, content }) => (
107-
<section id={`note-${childNote.noteId}`} class="note">
108-
<RawHtmlBlock html={content} />
109-
</section>
110-
))}
111-
</div>
112-
</div>
113-
);
114-
}
115-
11638
export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
11739
const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
11840
const { pageNotes, ...pagination } = usePagination(note, noteIds);
@@ -252,17 +174,6 @@ function NoteChildren({ note, parentNote, highlightedTokens }: { note: FNote, pa
252174
return childNotes?.map(childNote => <ListNoteCard note={childNote} parentNote={parentNote} highlightedTokens={highlightedTokens} />)
253175
}
254176

255-
/**
256-
* Filters the note IDs for the legacy view to filter out subnotes that are already included in the note content such as images, included notes.
257-
*/
258-
function useFilteredNoteIds(note: FNote, noteIds: string[]) {
259-
return useMemo(() => {
260-
const includedLinks = note ? note.getRelations().filter((rel) => rel.name === "imageLink" || rel.name === "includeNoteLink") : [];
261-
const includedNoteIds = new Set(includedLinks.map((rel) => rel.value));
262-
return noteIds.filter((noteId) => !includedNoteIds.has(noteId) && noteId !== "_hidden");
263-
}, noteIds);
264-
}
265-
266177
function getNotePath(parentNote: FNote, childNote: FNote) {
267178
if (parentNote.type === "search") {
268179
// for search note parent, we want to display a non-search path

‎apps/client/src/widgets/collections/legacy/ListPrintView.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
2+
import { RawHtmlBlock } from "../../react/RawHtml";
3+
import froca from "../../../services/froca";
4+
import type FNote from "../../../entities/fnote";
5+
import content_renderer from "../../../services/content_renderer";
6+
import type { ViewModeProps } from "../interface";
7+
import { useFilteredNoteIds } from "./utils";
8+
9+
interface NotesWithContent {
10+
note: FNote;
11+
content: string;
12+
}
13+
14+
export function ListPrintView({ note, noteIds: unfilteredNoteIds, onReady }: ViewModeProps<{}>) {
15+
const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
16+
const [ notesWithContent, setNotesWithContent ] = useState<NotesWithContent[]>();
17+
18+
useLayoutEffect(() => {
19+
froca.getNotes(noteIds).then(async (notes) => {
20+
const notesWithContent: NotesWithContent[] = [];
21+
22+
async function processNote(note: FNote, depth: number) {
23+
const content = await content_renderer.getRenderedContent(note, {
24+
trim: false,
25+
noChildrenList: true
26+
});
27+
28+
const contentEl = content.$renderedContent[0];
29+
30+
// Create page title element
31+
const pageTitleEl = document.createElement("h1");
32+
pageTitleEl.textContent = note.title;
33+
contentEl.prepend(pageTitleEl);
34+
35+
// Rewrite heading tags to ensure proper hierarchy in print view.
36+
const headings = contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6")
37+
for (const headingEl of headings) {
38+
const currentLevel = parseInt(headingEl.tagName.substring(1), 10);
39+
const newLevel = Math.min(currentLevel + depth, 6);
40+
const newHeadingEl = document.createElement(`h${newLevel}`);
41+
newHeadingEl.innerHTML = headingEl.innerHTML;
42+
headingEl.replaceWith(newHeadingEl);
43+
}
44+
45+
notesWithContent.push({ note, content: contentEl.innerHTML });
46+
47+
if (note.hasChildren()) {
48+
const imageLinks = note.getRelations("imageLink");
49+
const childNotes = await note.getChildNotes();
50+
const filteredChildNotes = childNotes.filter((childNote) => !imageLinks.find((rel) => rel.value === childNote.noteId));
51+
for (const childNote of filteredChildNotes) {
52+
await processNote(childNote, depth + 1);
53+
}
54+
}
55+
}
56+
57+
for (const note of notes) {
58+
await processNote(note, 1);
59+
}
60+
setNotesWithContent(notesWithContent);
61+
});
62+
}, [noteIds]);
63+
64+
useEffect(() => {
65+
if (notesWithContent && onReady) {
66+
onReady();
67+
}
68+
}, [ notesWithContent, onReady ]);
69+
70+
return (
71+
<div class="note-list list-print-view">
72+
<div class="note-list-container use-tn-links">
73+
<h1>{note.title}</h1>
74+
75+
{notesWithContent?.map(({ note: childNote, content }) => (
76+
<section id={`note-${childNote.noteId}`} class="note">
77+
<RawHtmlBlock html={content} />
78+
</section>
79+
))}
80+
</div>
81+
</div>
82+
);
83+
}

‎apps/client/src/widgets/collections/legacy/utils.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { useMemo } from "preact/hooks";
2+
import FNote from "../../../entities/fnote";
3+
4+
/**
5+
* Filters the note IDs for the legacy view to filter out subnotes that are already included in the note content such as images, included notes.
6+
*/
7+
export function useFilteredNoteIds(note: FNote, noteIds: string[]) {
8+
return useMemo(() => {
9+
const includedLinks = note ? note.getRelations().filter((rel) => rel.name === "imageLink" || rel.name === "includeNoteLink") : [];
10+
const includedNoteIds = new Set(includedLinks.map((rel) => rel.value));
11+
return noteIds.filter((noteId) => !includedNoteIds.has(noteId) && noteId !== "_hidden");
12+
}, noteIds);
13+
}

0 commit comments

Comments
 (0)