chore(collection/presentation): use model based mechanism for note content

apps/client/src/widgets/collections/presentation/index.tsx

@@ -4,22 +4,24 @@ import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 import Reveal from "reveal.js";
 import "reveal.js/dist/reveal.css";
 import "reveal.js/dist/theme/black.css";
+import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model";
 
 export default function PresentationView({ note }: ViewModeProps<{}>) {
-    return note && (
+    const [ presentation, setPresentation ] = useState<PresentationModel>();
-        <Presentation note={note} />
+
+    useLayoutEffect(() => {
+        buildPresentationModel(note).then(setPresentation);
+    }, [ note ]);
+
+    return presentation && (
+        <Presentation presentation={presentation} />
     )
 }
 
-function Presentation({ note }: { note: FNote }) {
+function Presentation({ presentation } : { presentation: PresentationModel }) {
-    const [ slides, setSlides ] = useState<FNote[]>();
     const containerRef = useRef<HTMLDivElement>(null);
     const apiRef = useRef<Reveal.Api | null>(null);
 
-    useLayoutEffect(() => {
-        note.getChildNotes().then(setSlides);
-    }, [ note ]);
-
     useEffect(() => {
         if (apiRef.current || !containerRef.current) return;
 
@@ -41,8 +43,8 @@ function Presentation({ note }: { note: FNote }) {
     return (
         <div ref={containerRef} className="reveal">
             <div className="slides">
-                {slides && slides?.map(slide => (
+                {presentation.slides?.map(slide => (
-                    <Slide note={slide} />
+                    <Slide slide={slide} />
                 ))}
             </div>
         </div>
@@ -50,10 +52,12 @@ function Presentation({ note }: { note: FNote }) {
 
 }
 
-function Slide({ note }: { note: FNote }) {
+function Slide({ slide }: { slide: PresentationSlideModel }) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
     return (
-        <section>
+        <section ref={containerRef}>
-            <p>{note.title}</p>
+            {slide.content}
         </section>
     );
 }

apps/client/src/widgets/collections/presentation/model.ts

@@ -0,0 +1,25 @@
+import FNote from "../../../entities/fnote";
+
+export interface PresentationSlideModel {
+    content: string;
+}
+
+export interface PresentationModel {
+    slides: PresentationSlideModel[];
+}
+
+export async function buildPresentationModel(note: FNote): Promise<PresentationModel> {
+
+    const slideNotes = await note.getChildNotes();
+    const slides: PresentationSlideModel[] = [];
+
+    for (const slideNote of slideNotes) {
+        slides.push({
+            content: await slideNote.getContent() ?? ""
+        })
+    }
+
+    return {
+        slides
+    };
+}