Add some truly janky pagination

GameMakersToolkit · Aug 7, 2024 · d20a062 · d20a062
1 parent b3e5c5a
commit d20a062
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 14 deletions.
diff --git a/api/src/main/kotlin/com/gmtkgamejam/repositories/PostRepository.kt b/api/src/main/kotlin/com/gmtkgamejam/repositories/PostRepository.kt
@@ -11,7 +11,7 @@ import java.time.format.DateTimeFormatter
 
 interface PostRepository {
     fun createPost(postItem: PostItem)
-    fun getPosts(filter: Bson, sort: Bson): List<PostItem>
+    fun getPosts(filter: Bson, sort: Bson, page: Int): List<PostItem>
     fun getPost(id: String) : PostItem?
     fun getPostByAuthorId(authorId: String, ignoreDeletion: Boolean = false) : PostItem?
     fun updatePost(postItem: PostItem)
@@ -39,8 +39,9 @@ open class PostRepositoryImpl(val client: MongoClient) : PostRepository {
     }
 
     // Un-paginated version should be used for Admin endpoints
-    override fun getPosts(filter: Bson, sort: Bson): List<PostItem> {
-        return col.find(filter).sort(sort).limit(40).toList()
+    override fun getPosts(filter: Bson, sort: Bson, page: Int): List<PostItem> {
+        val pageSize = 24
+        return col.find(filter).sort(sort).limit(pageSize).skip(pageSize * (page - 1)).toList()
     }
 
     override fun getPost(id: String) : PostItem? {

diff --git a/api/src/main/kotlin/com/gmtkgamejam/routing/AdminRoutes.kt b/api/src/main/kotlin/com/gmtkgamejam/routing/AdminRoutes.kt
@@ -1,10 +1,10 @@
 package com.gmtkgamejam.routing
 
-import com.gmtkgamejam.models.admin.dtos.BanUnbanUserDto
 import com.gmtkgamejam.models.admin.BannedUser
-import com.gmtkgamejam.models.posts.PostItem
+import com.gmtkgamejam.models.admin.dtos.BanUnbanUserDto
 import com.gmtkgamejam.models.admin.dtos.DeletePostDto
 import com.gmtkgamejam.models.admin.dtos.ReportedUsersClearDto
+import com.gmtkgamejam.models.posts.PostItem
 import com.gmtkgamejam.respondJSON
 import com.gmtkgamejam.services.AdminService
 import com.gmtkgamejam.services.PostService
@@ -30,7 +30,7 @@ fun Application.configureAdminRouting() {
                 route("/reports") {
                     get {
                         val filters = mutableListOf(PostItem::deletedAt eq null, PostItem::reportCount gt 0)
-                        call.respond(service.getPosts(and(filters), descending(PostItem::reportCount)))
+                        call.respond(service.getPosts(and(filters), descending(PostItem::reportCount), 1))
                     }
                     post("/clear") {
                         val data = call.receive<ReportedUsersClearDto>()

diff --git a/api/src/main/kotlin/com/gmtkgamejam/routing/PostRoutes.kt b/api/src/main/kotlin/com/gmtkgamejam/routing/PostRoutes.kt
@@ -43,7 +43,11 @@ fun Application.configurePostRouting() {
             get {
                 val params = call.parameters
 
-                val posts = service.getPosts(and(getFilterFromParameters(params)), getSortFromParameters(params))
+                val posts = service.getPosts(
+                    and(getFilterFromParameters(params)),
+                    getSortFromParameters(params),
+                    params["page"]?.toInt() ?: 1
+                )
 
                 // Set isFavourite on posts for this user if they're logged in
                 call.request.header("Authorization")?.substring(7)
@@ -131,7 +135,8 @@ fun Application.configurePostRouting() {
                             or(favouritesFilters),
                             and(getFilterFromParameters(params))
                         ),
-                        getSortFromParameters(params)
+                        getSortFromParameters(params),
+                        params["page"]?.toInt() ?: 1
                     )
                     posts.map { post -> post.isFavourite = true }
 

diff --git a/api/src/main/kotlin/com/gmtkgamejam/services/PostService.kt b/api/src/main/kotlin/com/gmtkgamejam/services/PostService.kt
@@ -14,8 +14,8 @@ class PostService : KoinComponent {
         repository.createPost(postItem)
     }
 
-    fun getPosts(filter: Bson, sort: Bson): List<PostItem> {
-        return repository.getPosts(filter, sort)
+    fun getPosts(filter: Bson, sort: Bson, page: Int): List<PostItem> {
+        return repository.getPosts(filter, sort, page)
     }
 
     fun getPost(id: String) : PostItem? {

diff --git a/ui/src/pages/home/Home.tsx b/ui/src/pages/home/Home.tsx
@@ -9,6 +9,7 @@ import {Post} from '../../common/models/post.ts';
 import {usePosts} from '../../api/post.ts';
 
 export const Home: React.FC = () => {
+    const [previousPosts, setPreviousPosts] = useState<Post[]>([])
     const [searchParams, setSearchParams] = useSearchParams();
     const [isViewingBookmarks, setIsViewingBookmarks] = useState<boolean>(searchParams.get('bookmarked') === "true");
 
@@ -27,17 +28,26 @@ export const Home: React.FC = () => {
             <SiteIntro />
             <SearchFormWrapper searchParams={searchParams} setSearchParams={setSearchParams} />
 
-            {(posts?.data?.length || 0) > 0
-                ? <PostsToDisplay posts={posts.data!} />
+            {previousPosts.length ? <PostsToDisplay posts={previousPosts} /> : <></>}
+
+            {posts?.data?.length
+                ?
+                    <>
+                        <PostsToDisplay posts={posts.data!} />
+                        <LoadMorePostsButton currentPosts={posts.data!} previousPosts={previousPosts} isLoading={posts.isLoading} setPreviousPosts={setPreviousPosts} />
+                    </>
                 : <NoPostsToDisplay isViewingBookmarks={isViewingBookmarks} />
             }
         </main>
     )
 }
 
-const PostsToDisplay: React.FC<{posts: Post[]}> = ({posts}) => {
+const PostsToDisplay: React.FC<{
+    posts: Post[],
+}> = ({posts}) => {
+
     return (
-        <div className="c-post-tiles">{posts.map(post => <PostTile key={post.id} post={post} />)}</div>
+        <div className="c-post-tiles mb-[1.5rem]">{posts.map(post => <PostTile key={post.id} post={post} />)}</div>
     )
 }
 
@@ -51,4 +61,29 @@ const NoPostsToDisplay: React.FC<{isViewingBookmarks: boolean}> = ({isViewingBoo
     return (
         <h2 className="text-xl text-center">Please wait...</h2>
     )
+}
+
+const LoadMorePostsButton: React.FC<{
+    currentPosts: Post[],
+    previousPosts: Post[],
+    isLoading: boolean,
+    setPreviousPosts: (posts: Post[]) => void
+}> = ({currentPosts, previousPosts, isLoading, setPreviousPosts}) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    return (
+        <button
+            className="w-full mt-16 mb-8 px-4 py-4 border-2 border-theme-l-7 text-theme-l-7 rounded-xl font-bold text-center cursor-pointer"
+            onClick={() => {
+                setPreviousPosts([...currentPosts, ...previousPosts])
+                const currentPage = parseInt(searchParams.get("page") || "1")
+                setSearchParams(params => {
+                    searchParams.set("page", String(currentPage + 1))
+                    return params
+                });
+            }}
+        >
+            {isLoading ? `Loading...` : `Load more posts`}
+        </button>
+    )
 }