refactor(island): ♻️ extract universal CardList from specific BlogCardList

islands/BlogCardList.tsx

@@ -1,75 +1,38 @@
 import { BlogCard, BlogProps } from ':components/BlogBlocks.tsx'
-import Suspense from ':islands/Suspens.tsx'
+import CardList from ':islands/CardList.tsx'
-import { requestApiStream } from ':src/utils.ts'
+import type { Ref } from 'preact'
-import { Signal, useSignal } from '@preact/signals'
-import type { JSX, Ref } from 'preact'
-import { useEffect, useRef } from 'preact/hooks'
-
-function fillList(
-    list: Signal<JSX.Element[]>,
-    { limit, ac }: { limit?: number; ac?: AbortController },
-) {
-    ;(async () => {
-        const newsList = requestApiStream<void, BlogProps>(
-            'news/fetchAll',
-            'GET',
-        )
-
-        for await (const news of newsList) {
-            list.value = [
-                ...list.value,
-                BlogCard({ ...news, lastUpdate: new Date(news.lastUpdate) }),
-            ]
-            if (limit && list.value.length >= limit) break
-        }
-        ac?.abort()
-    })()
-}
 
 export default function BlogCardList(
     { limit, usePlaceholder, useObserver }: {
-        usePlaceholder?: boolean
         limit?: number
+        usePlaceholder?: boolean
         useObserver?: boolean
     },
 ) {
-    const list: Signal<JSX.Element[]> = useSignal<JSX.Element[]>([])
+    if (usePlaceholder) {
-    const ac = new AbortController()
+        return (
-    const ref = useRef(null)
+            <CardList
-
+                apiRoute='news/fetchAll'
-    useEffect(() => {
+                builder={builder}
-        if (ref.current && useObserver) {
+                limit={limit}
-            const observer = new IntersectionObserver(([entry]) => {
+                placeholder={Placeholder}
-                if (entry.isIntersecting) {
-                    fillList(list, { limit, ac })
-                    observer.disconnect()
-                }
-            }, {
-                rootMargin: '300px',
-            })
-            //@ts-expect-error Need to investigate why it's work
-            observer.observe(ref.current.base)
-        } else {
-            fillList(list, { limit, ac })
-        }
-    })
-
-    if (limit && usePlaceholder) {
-        const placeholders = Array
-            .from({ length: limit })
-            .map((_, index) => (
-                <Suspense
-                    loader={<Placeholder ref={index === 0 ? ref : undefined} />}
                 fallback={Fallback}
-                    signal={ac.signal}
+                useObserver={useObserver}
-                >
+            />
-                    {updateFromList(list, index)}
+        )
-                </Suspense>
-            ))
-        return <>{placeholders}</>
     }
 
-    return <>{list}</>
+    return (
+        <CardList
+            apiRoute='news/fetchAll'
+            builder={builder}
+            limit={limit}
+        />
+    )
+}
+
+function builder(news: BlogProps) {
+    return BlogCard({ ...news, lastUpdate: new Date(news.lastUpdate) })
 }
 
 function Placeholder({ ref }: { ref?: Ref<HTMLDivElement> | undefined }) {
@@ -93,18 +56,3 @@ function Fallback() {
         </div>
     )
 }
-
-function updateFromList(
-    list: Signal<JSX.Element[]>,
-    index: number,
-): Promise<JSX.Element> {
-    const { promise, resolve } = Promise.withResolvers<JSX.Element>()
-    list.subscribe((value: JSX.Element[]) => {
-        const selected = value.at(index)
-        if (selected) {
-            resolve(selected)
-        }
-    })
-
-    return promise
-}

islands/CardList.tsx

@@ -0,0 +1,102 @@
+import Suspense, { Fallback } from ':islands/Suspens.tsx'
+import { requestApiStream } from ':src/utils.ts'
+import { Signal, useSignal } from '@preact/signals'
+import type { JSX, Ref } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+
+export type Builder<T> = (props: T) => JSX.Element
+
+export type CardListProps<ApiResponse, RefType = null> = {
+    apiRoute: string
+    builder: Builder<ApiResponse>
+    limit?: number
+} | {
+    apiRoute: string
+    builder: Builder<ApiResponse>
+    limit?: number
+    useObserver?: boolean
+    placeholder: ({ ref }: { ref: Ref<RefType> | undefined }) => JSX.Element
+    fallback: Fallback
+}
+
+export default function CardList<ApiResponse, RefType = null>(
+    { limit, builder, ...props }: CardListProps<ApiResponse, RefType>,
+) {
+    const list: Signal<JSX.Element[]> = useSignal<JSX.Element[]>([])
+    const ac = new AbortController()
+    const ref = useRef(null)
+
+    const useObserver = 'useObserver' in props ? props.useObserver : false
+    const placeholder = 'placeholder' in props ? props.placeholder : false
+    const fallback = 'fallback' in props ? props.fallback : false
+
+    useEffect(() => {
+        if (ref.current && useObserver) {
+            const observer = new IntersectionObserver(([entry]) => {
+                if (entry.isIntersecting) {
+                    fillList(list, builder, { limit, ac })
+                    observer.disconnect()
+                }
+            }, {
+                rootMargin: '300px',
+            })
+            observer.observe(ref.current)
+        } else {
+            fillList(list, builder, { limit, ac })
+        }
+    })
+
+    if (limit && placeholder && fallback) {
+        const placeholders = Array
+            .from({ length: limit })
+            .map((_, index) => (
+                <Suspense
+                    loader={placeholder({ ref: index === 0 ? ref : undefined })}
+                    fallback={fallback}
+                    signal={ac.signal}
+                >
+                    {updateFromList(list, index)}
+                </Suspense>
+            ))
+        return <>{placeholders}</>
+    }
+
+    return <>{list}</>
+}
+
+function fillList<ApiResponse>(
+    list: Signal<JSX.Element[]>,
+    builder: Builder<ApiResponse>,
+    { limit, ac }: { limit?: number; ac?: AbortController },
+) {
+    ;(async () => {
+        const propsList = requestApiStream<void, ApiResponse>(
+            'news/fetchAll',
+            'GET',
+        )
+
+        for await (const props of propsList) {
+            list.value = [
+                ...list.value,
+                builder(props),
+            ]
+            if (limit && list.value.length >= limit) break
+        }
+        ac?.abort()
+    })()
+}
+
+function updateFromList(
+    list: Signal<JSX.Element[]>,
+    index: number,
+): Promise<JSX.Element> {
+    const { promise, resolve } = Promise.withResolvers<JSX.Element>()
+    list.subscribe((value: JSX.Element[]) => {
+        const selected = value.at(index)
+        if (selected) {
+            resolve(selected)
+        }
+    })
+
+    return promise
+}

islands/Suspens.tsx

@@ -16,7 +16,7 @@ function RenderError(
 	)
 }
 
-type Fallback = ({ error }: { error: Error }) => JSX.Element
+export type Fallback = ({ error }: { error: Error }) => JSX.Element
 
 export default function Suspense(
 	{ loader, fallback, signal, children }: {

routes/index.tsx

@@ -19,7 +19,7 @@ export default function Home() {
 				<h2>Nos actus</h2>
 				<AutoGrid columnWidth='15rem' style={{ alignItems: 'center' }}>
 					<>
-						<BlogCardList limit={4} usePlaceholder={true} />
+						<BlogCardList limit={4} usePlaceholder={true} useObserver={true} />
 						<a href='/blog' class='cta'>Voir plus</a>
 					</>
 				</AutoGrid>