From 81b2b18eb70965fd8c8b364fb196c359ace1b9fa Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 15 Oct 2025 19:05:34 +0300
Subject: [PATCH] refactor(collection/presentation): use React way

---
 .../collections/presentation/index.tsx        | 25 +++++++++++++------
 .../collections/presentation/slide_builder.ts | 13 ----------
 2 files changed, 17 insertions(+), 21 deletions(-)
 delete mode 100644 apps/client/src/widgets/collections/presentation/slide_builder.ts

diff --git a/apps/client/src/widgets/collections/presentation/index.tsx b/apps/client/src/widgets/collections/presentation/index.tsx
index f912e8d2e..8fd856acd 100644
--- a/apps/client/src/widgets/collections/presentation/index.tsx
+++ b/apps/client/src/widgets/collections/presentation/index.tsx
@@ -1,16 +1,25 @@
-import { useEffect, useRef, useState } from "preact/hooks";
 import { ViewModeProps } from "../interface";
-import { buildPresentation } from "./slide_builder";
+import FNote from "../../../entities/fnote";
+import { useLayoutEffect, useState } from "preact/hooks";
 
 export default function PresentationView({ note }: ViewModeProps<{}>) {
+    return note && (
+        <Presentation note={note} />
+    )
+}
 
-    const containerRef = useRef<HTMLDivElement>(null);
+function Presentation({ note }: { note: FNote }) {
+    const [ slides, setSlides ] = useState<FNote[]>();
 
-    useEffect(() => {
-        buildPresentation(note).then(presentationEl => {
-            containerRef.current?.replaceChildren(presentationEl);
-        });
+    useLayoutEffect(() => {
+        note.getChildNotes().then(setSlides);
     }, [ note ]);
 
-    return <div ref={containerRef} className="presentation" />;
+    return (slides && slides?.map(slide => (
+        <Slide note={slide} />
+    )));
+}
+
+function Slide({ note }: { note: FNote }) {
+    return <p>{note.title}</p>
 }
diff --git a/apps/client/src/widgets/collections/presentation/slide_builder.ts b/apps/client/src/widgets/collections/presentation/slide_builder.ts
deleted file mode 100644
index fcfdca8d0..000000000
--- a/apps/client/src/widgets/collections/presentation/slide_builder.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import FNote from "../../../entities/fnote";
-
-export async function buildPresentation(parentNote: FNote) {
-    const slides = await parentNote.getChildNotes();
-    const rootElement = new DocumentFragment();
-
-    for (const slide of slides) {
-        const slideEl = document.createElement("div");
-
-    }
-
-    return rootElement;
-}