fmt

src/components/Views/Author/Author.tsx

@@ -110,7 +110,7 @@ export const AuthorView = (props: AuthorViewProps) => {
   })
 
   const handleDeleteComment = (id: number) => {
-    setCommented((prev) => (prev||[]).filter((comment) => comment.id !== id))
+    setCommented((prev) => (prev || []).filter((comment) => comment.id !== id))
   }
 
   const TabNavigator = () => (
@@ -154,11 +154,17 @@ export const AuthorView = (props: AuthorViewProps) => {
   }
 
   // fx to update author's feed
-  createEffect(on(feedByAuthor, (byAuthor) => {
+  createEffect(
+    on(
+      feedByAuthor,
+      (byAuthor) => {
         const feed = byAuthor[props.authorSlug] as Shout[]
         if (!feed) return
         setSortedFeed(feed)
-  },{}))
+      },
+      {}
+    )
+  )
 
   const [loadMoreCommentsHidden, setLoadMoreCommentsHidden] = createSignal(false)
   const { commentsByAuthor, addReactions } = useReactions()
@@ -176,14 +182,27 @@ export const AuthorView = (props: AuthorViewProps) => {
     })
     const result = await authorCommentsFetcher()
     result && addReactions(result)
-    result && setCommented((prev) => [...new Set([...(prev||[]), ...result])])
+    result && setCommented((prev) => [...new Set([...(prev || []), ...result])])
     restoreScrollPosition()
     return result as LoadMoreItems
   }
 
   createEffect(() => setCurrentTab(params.tab))
-  createEffect(on([author, commented], ([a, ccc]) => a && setLoadMoreCommentsHidden(ccc?.length === a.stat?.comments), {}))
+  createEffect(
-  createEffect(on([author, feedByAuthor], ([a, feed]) => a && feed[props.authorSlug] && setLoadMoreHidden(feed[props.authorSlug]?.length === a.stat?.shouts), {}))
+    on(
+      [author, commented],
+      ([a, ccc]) => a && setLoadMoreCommentsHidden(ccc?.length === a.stat?.comments),
+      {}
+    )
+  )
+  createEffect(
+    on(
+      [author, feedByAuthor],
+      ([a, feed]) =>
+        a && feed[props.authorSlug] && setLoadMoreHidden(feed[props.authorSlug]?.length === a.stat?.shouts),
+      {}
+    )
+  )
 
   return (
     <div class={styles.authorPage}>
@@ -245,8 +264,11 @@ export const AuthorView = (props: AuthorViewProps) => {
             </div>
           </Show>
 
-
+          <LoadMoreWrapper
-          <LoadMoreWrapper loadFunction={loadMoreComments} pageSize={COMMENTS_PER_PAGE} hidden={loadMoreCommentsHidden()}>
+            loadFunction={loadMoreComments}
+            pageSize={COMMENTS_PER_PAGE}
+            hidden={loadMoreCommentsHidden()}
+          >
             <div class="wide-container">
               <div class="row">
                 <div class="col-md-20 col-lg-18">
@@ -276,13 +298,9 @@ export const AuthorView = (props: AuthorViewProps) => {
           </Show>
 
           <LoadMoreWrapper loadFunction={loadMore} pageSize={SHOUTS_PER_PAGE} hidden={loadMoreHidden()}>
-            <For
+            <For each={sortedFeed().filter((_, i) => i % 3 === 0)}>
-              each={sortedFeed()
-                .filter((_, i) => i % 3 === 0)}
-            >
               {(_shout, index) => {
-                const articles = sortedFeed()
+                const articles = sortedFeed().slice(index() * 3, index() * 3 + 3)
-                  .slice(index() * 3, index() * 3 + 3)
                 return (
                   <>
                     <Switch>

src/context/reactions.tsx

@@ -68,7 +68,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
     const newCommentsByAuthor = Object.fromEntries(
       Object.entries(newReactionsByAuthor).map(([authorId, reactions]) => [
         authorId,
-        reactions.filter((x: Reaction) => x.kind === ReactionKind.Comment),
+        reactions.filter((x: Reaction) => x.kind === ReactionKind.Comment)
       ])
     )
 

src/routes/author/[slug]/[...tab].tsx

@@ -105,7 +105,9 @@ export default function AuthorPage(props: RouteSectionProps<AuthorPageProps>) {
   )
 
   // author's shouts
-  const authorShouts = createAsync(async () => props.data.articles as Shout[] || await fetchAuthorShouts(props.params.slug, 0))
+  const authorShouts = createAsync(
+    async () => (props.data.articles as Shout[]) || (await fetchAuthorShouts(props.params.slug, 0))
+  )
 
   return (
     <ErrorBoundary fallback={(_err) => <FourOuFourView />}>