UI buttons for panning through pages

GameMakersToolkit · Aug 9, 2024 · 2059061 · 2059061
1 parent c6aff7d
commit 2059061
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 18 deletions.
diff --git a/ui/src/pages/home/Home.tsx b/ui/src/pages/home/Home.tsx
@@ -25,28 +25,68 @@ export const Home: React.FC = () => {
             <SiteIntro />
             <SearchFormWrapper searchParams={searchParams} setSearchParams={setSearchParams} />
 
-            {posts?.data?.length
-                ? <PostsToDisplay posts={posts.data!} />
-                : <NoPostsToDisplay isViewingBookmarks={isViewingBookmarks} />
-            }
+            <PaginationButtons posts={posts.data!} />
+
+            <div id="posts-wrapper">
+                {posts?.data?.length
+                    ? <PostsToDisplay posts={posts.data!} />
+                    : <NoPostsToDisplay isLoading={posts.isLoading} isViewingBookmarks={isViewingBookmarks} />
+                }
+                <p>&nbsp;</p>
+            </div>
+
+            <PaginationButtons posts={posts.data!} />
         </main>
     )
 }
 
+const PaginationButtons: React.FC<{posts: Post[]}> = ({posts}) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const getCurrentPage = () => parseInt(searchParams.get("page") ?? "1");
+    const movePage = (diff: number) => {
+        setSearchParams(params => {
+            const newPage = posts.length > 0 ? Math.max(1, getCurrentPage() + diff) : getCurrentPage();
+            params.set("page", newPage.toString())
+            return params
+        })
+    }
+
+    const buttonClass = "w-[140px] py-2 border-2 border-theme-l-7 text-theme-l-7 rounded-xl font-bold text-center cursor-pointer"
+    return (
+        <div className="w-full flex justify-between pb-4">
+            {getCurrentPage() > 1 ? <button className={buttonClass} onClick={() => movePage(-1)}>Previous</button> : <>&nbsp;</>}
+
+            <button className={buttonClass} onClick={() => movePage(1)}>Next</button>
+        </div>
+    )
+}
+
 const PostsToDisplay: React.FC<{posts: Post[]}> = ({posts}) => {
     return (
-        <div className="c-post-tiles">{posts.map(post => <PostTile key={post.id} post={post} />)}</div>
+        <>
+            <div id="posts" className="c-post-tiles pb-4">{posts.map(post => <PostTile key={post.id} post={post} />)}</div>
+        </>
     )
 }
 
-const NoPostsToDisplay: React.FC<{isViewingBookmarks: boolean}> = ({isViewingBookmarks}) => {
+const NoPostsToDisplay: React.FC<{
+    isLoading: boolean;
+    isViewingBookmarks: boolean;
+}> = ({isLoading, isViewingBookmarks}) => {
+    if (isLoading) {
+        return (
+            <h2 className="text-xl text-center h-[800px]">Loading, please wait...</h2>
+        )
+    }
+
     if (isViewingBookmarks) {
         return (
-            <h2 className="text-xl text-center">You don't have any bookmarked posts</h2>
+            <h2 className="text-xl text-center">No bookmarked posts available.</h2>
         )
     }
 
     return (
-        <h2 className="text-xl text-center">Please wait...</h2>
+        <h2 className="text-xl text-center">No posts available.</h2>
     )
 }
diff --git a/ui/src/pages/home/models/SearchParameters.ts b/ui/src/pages/home/models/SearchParameters.ts
@@ -8,31 +8,34 @@ export type SearchParameters = {
     timezoneEnd: string | undefined;
     sortBy: string;
     sortDir: string;
+    page: string;
 }
 
 export const blankSearchParameters: SearchParameters = {
-    description: "",
+    description: '',
     skillsPossessed: [],
     skillsSought: [],
     tools: [],
     languages: [],
     timezoneStart: undefined,
     timezoneEnd: undefined,
-    sortBy: "",
-    sortDir: "",
+    sortBy: '',
+    sortDir: '',
+    page: '1',
 }
 
 export const searchParametersFromQueryString = (queryParams: URLSearchParams): SearchParameters => {
     return {
         ...blankSearchParameters,
-        description: queryParams.get("description"),
-        skillsPossessed: queryParams.get('skillsPossessed')?.split(","),
-        skillsSought: queryParams.get('skillsSought')?.split(","),
-        tools: queryParams.get('tools')?.split(","),
-        languages: queryParams.get('languages')?.split(","),
-        timezoneStart: queryParams.get("timezoneStart"),
-        timezoneEnd: queryParams.get("timezoneEnd"),
+        description: queryParams.get('description'),
+        skillsPossessed: queryParams.get('skillsPossessed')?.split(','),
+        skillsSought: queryParams.get('skillsSought')?.split(','),
+        tools: queryParams.get('tools')?.split(','),
+        languages: queryParams.get('languages')?.split(','),
+        timezoneStart: queryParams.get('timezoneStart'),
+        timezoneEnd: queryParams.get('timezoneEnd'),
         sortBy: queryParams.get('sortBy'),
         sortDir: queryParams.get('sortDir'),
+        page: queryParams.get('page'),
     } as SearchParameters
 }