WEB-UI: Add infinite scroll to blog posts

services/api/src/core/query/application/contracts/queries/base.query.ts

@@ -1,11 +1,14 @@
+import { Type } from "class-transformer";
 import { IsOptional, Min } from "class-validator";
 
 export class BaseQuery {
   @IsOptional()
+  @Type(() => Number)
   @Min(0)
   skip?: number;
 
   @IsOptional()
+  @Type(() => Number)
   @Min(0)
   top?: number;
 }

services/web-ui/src/core/infinite-scroll/index.ts

@@ -0,0 +1 @@
+export { useInfiniteScroll } from "./useInfiniteScroll";

services/web-ui/src/core/infinite-scroll/useInfiniteScroll.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+interface useInfiniteScrollProps {
+  onNext: () => void;
+}
+
+export function useInfiniteScroll({ onNext }: useInfiniteScrollProps) {
+  const observerTarget = useRef(null);
+
+  useEffect(() => {
+    const current = observerTarget.current;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          onNext();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (current) {
+      observer.observe(current);
+    }
+
+    return () => {
+      if (current) {
+        observer.unobserve(current);
+      }
+    };
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [observerTarget.current]);
+
+  return { observerTarget };
+}

services/web-ui/src/core/query/index.ts

@@ -1,2 +1,2 @@
-export { useQuery } from "react-query";
+export { useInfiniteQuery, useQuery } from "react-query";
 export { CacheKeysConstants } from "./cache-keys.constants";

services/web-ui/src/pages/BlogPostPage/BlogPostPage.component.tsx

@@ -10,7 +10,7 @@
 import { BlogPostMenu } from "./components/BlogPostMenu";
 
 interface BlogPostPageComponentProps {
-  data: BlogPostDetails[];
+  data: BlogPostDetails[][];
 }
 
 export function BlogPostPageComponent({
@@ -24,41 +24,47 @@
         <BlogPostForm />
       </Box>
 
-      {data.map((post) => (
-        <Card
-          key={post.id}
-          sx={{ marginBottom: 2, padding: 2 }}
-          variant="outlined"
-        >
-          <Box sx={{ alignItems: "center", display: "flex", paddingBottom: 2 }}>
-            <Avatar src={post.profile.imageUrl} />
+      {data.map((group, groupIndex) => (
+        <React.Fragment key={groupIndex}>
+          {group.map((post) => (
+            <Card
+              key={post.id}
+              sx={{ marginBottom: 2, padding: 2 }}
+              variant="outlined"
+            >
+              <Box
+                sx={{ alignItems: "center", display: "flex", paddingBottom: 2 }}
+              >
+                <Avatar src={post.profile.imageUrl} />
 
-            <Box sx={{ flexGrow: 1, paddingLeft: 1 }}>
-              <Typography>
-                <b>{post.profile.name}</b> {t("published")}
-              </Typography>
-              <Typography variant="subtitle2">
-                {timeSince(post.createdAt)}
-              </Typography>
-            </Box>
+                <Box sx={{ flexGrow: 1, paddingLeft: 1 }}>
+                  <Typography>
+                    <b>{post.profile.name}</b> {t("published")}
+                  </Typography>
+                  <Typography variant="subtitle2">
+                    {timeSince(post.createdAt)}
+                  </Typography>
+                </Box>
 
-            {post.ownedByCurrentUser && <BlogPostMenu id={post.id} />}
-          </Box>
+                {post.ownedByCurrentUser && <BlogPostMenu id={post.id} />}
+              </Box>
 
-          <Typography>{post.content}</Typography>
+              <Typography>{post.content}</Typography>
 
-          {post.photos.map((photo) => (
-            <img
-              alt={photo.description || "Blog post image"}
-              key={photo.id}
-              src={photo.url}
-              style={{
-                padding: 10,
-                maxWidth: "100%",
-              }}
-            />
+              {post.photos.map((photo) => (
+                <img
+                  alt={photo.description || "Blog post image"}
+                  key={photo.id}
+                  src={photo.url}
+                  style={{
+                    padding: 10,
+                    maxWidth: "100%",
+                  }}
+                />
+              ))}
+            </Card>
           ))}
-        </Card>
+        </React.Fragment>
       ))}
     </>
   );

services/web-ui/src/pages/BlogPostPage/BlogPostPage.container.tsx

@@ -1,24 +1,39 @@
 import React from "react";
 
-import { Box, Typography } from "@mui/material";
+import { Box, CircularProgress, Typography } from "@mui/material";
 
 import { blogsApi } from "src/apis";
 import { ErrorMessage } from "src/components/ui/ErrorMessage";
 import { useTranslation } from "src/core/i18n";
-import { CacheKeysConstants, useQuery } from "src/core/query";
+import { useInfiniteScroll } from "src/core/infinite-scroll";
+import { CacheKeysConstants, useInfiniteQuery } from "src/core/query";
 
 import { BlogPostPageComponent } from "./BlogPostPage.component";
 import { BlogPostPageHeader } from "./BlogPostPage.header";
 import { BlogPostPageSkeleton } from "./BlogPostPage.skeleton";
 import { BlogPostForm } from "./components/BlogPostForm";
 
+const ITEMS_PER_PAGE = 10;
+
 export function BlogPostPageContainer(): React.ReactElement {
   const { t } = useTranslation("blog");
 
-  const { error, data, isLoading } = useQuery(
-    CacheKeysConstants.BlogPosts,
-    () => blogsApi.getBlogPosts()
-  );
+  const { error, data, isLoading, fetchNextPage, hasNextPage } =
+    useInfiniteQuery(
+      [CacheKeysConstants.BlogPosts],
+      ({ pageParam = 0 }) =>
+        blogsApi.getBlogPosts({
+          skip: pageParam * ITEMS_PER_PAGE,
+          top: (pageParam + 1) * ITEMS_PER_PAGE,
+        }),
+      {
+        getNextPageParam: (_, pages) => pages.length - 1,
+      }
+    );
+
+  const { observerTarget } = useInfiniteScroll({
+    onNext: fetchNextPage,
+  });
 
   if (error) {
     return (
@@ -38,7 +53,7 @@
     );
   }
 
-  if (!data || data.length === 0) {
+  if (!data || data.pages.length === 0) {
     return (
       <>
         <BlogPostPageHeader />
@@ -56,7 +71,22 @@
     <>
       <BlogPostPageHeader />
 
-      <BlogPostPageComponent data={data} />
+      <BlogPostPageComponent data={data.pages} />
+
+      {hasNextPage && (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: 100,
+          }}
+          ref={observerTarget}
+        >
+          <CircularProgress />
+        </Box>
+      )}
     </>
   );
 }

services/web-ui/src/utils/error.utils.ts

@@ -4,6 +4,10 @@
   const response = error.response;
 
   if (response.errorMessage) {
+    if (Array.isArray(response.errorMessage)) {
+      return response.errorMessage.join(", ");
+    }
+
     return response.errorMessage;
   }