update (closes #11): add pagination

abhijit-hota · May 24, 2022 · b213e31 · b213e31
1 parent 5fcfc6b
commit b213e31
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/api/handlers/bookmarks.go b/api/handlers/bookmarks.go
@@ -128,6 +128,9 @@ type Query struct {
 
 	// Search
 	Search string `form:"search"`
+
+	// Pagination
+	Page int `form:"page"`
 }
 
 func GetBookmarks(ctx *gin.Context) {
@@ -170,6 +173,8 @@ func GetBookmarks(ctx *gin.Context) {
 		order = strings.ToUpper(order)
 		dbQuery += fmt.Sprintf("\nORDER BY %s %s", sortByColumn, order)
 	}
+	// Will optimize when an issue arises
+	dbQuery += "\nLIMIT 20 OFFSET " + strconv.Itoa(20*queryParams.Page)
 	preparedQuery, err := db.Prepare(dbQuery)
 	utils.Must(err)
 
@@ -211,7 +216,7 @@ func GetBookmarks(ctx *gin.Context) {
 	err = rows.Err()
 	utils.Must(err)
 
-	ctx.JSON(http.StatusOK, bookmarks)
+	ctx.JSON(http.StatusOK, gin.H{"data": bookmarks, "page": queryParams.Page})
 }
 
 func DeleteBookmarkProperty(ctx *gin.Context) {

diff --git a/api/views/html/index.html b/api/views/html/index.html
@@ -24,11 +24,14 @@ <h1>Rengoku</h1>
 			<hr />
 		</nav>
 		<aside id="folders"></aside>
-		<main>
+		<main x-data="{ bookmarks: [], more: true }">
 			<div
 				class="bookmark-list"
-				x-data="{ bookmarks: [] }"
-				x-effect="async () => { bookmarks = await api('/bookmarks' + $store.queryParams.get()) }"
+				x-effect="async () => { 
+					const res = await api('/bookmarks' + $store.queryParams.get()) 
+					bookmarks = [...bookmarks, ...res.data]
+					more = res.data.length > 0 // TODO: Fix off-by-one error
+				}"
 				@update.window="() => {
 					switch ($event.detail.type) {
 						case 'add':
@@ -44,6 +47,9 @@ <h1>Rengoku</h1>
 			>
 				{{block "bookmark" .}} {{end}}
 			</div>
+			<div style="text-align: center" x-show="more">
+				<button @click="$store.queryParams.page++">Load more</button>
+			</div>
 		</main>
 		<aside id="filters">{{block "filter-sidebar" .}} {{end}}</aside>
 		{{block "settings-dialog" .}} {{end}} {{block "add-bookmark-dialog" .}} {{end}}

diff --git a/api/views/js/script.js b/api/views/js/script.js
@@ -17,6 +17,7 @@ document.addEventListener('alpine:init', () => {
 		folder: '',
 		tags: [],
 		search: '',
+		page: 0,
 
 		get() {
 			const queryParams = [];
@@ -37,6 +38,7 @@ document.addEventListener('alpine:init', () => {
 				const param = tagStr;
 				queryParams.push(param);
 			}
+			queryParams.push(`page=${this.page}`);
 			return '?' + queryParams.join('&');
 		},