✨ Pull to refresh

src/views/realms/page.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue"
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue"
 import { request } from "@/scripts/request"
 import { useRealms } from "@/stores/realms"
 import { useRoute } from "vue-router"
@@ -41,6 +41,7 @@ import dompurify from "dompurify"
 import PostList from "@/components/posts/PostList.vue"
 import RealmAction from "@/components/realms/RealmAction.vue"
 import RealmMembers from "@/components/realms/RealmMembers.vue"
+import PullToRefresh, { type PullToRefreshInstance } from "pulltorefreshjs"
 
 const route = useRoute()
 const realms = useRealms()
@@ -68,11 +69,11 @@ async function readPosts() {
   const res = await request(
     "interactive",
     `/api/feed?` +
-      new URLSearchParams({
-        take: pagination.pageSize.toString(),
-        offset: ((pagination.page - 1) * pagination.pageSize).toString(),
-        realmId: route.params.realmId as string
-      })
+    new URLSearchParams({
+      take: pagination.pageSize.toString(),
+      offset: ((pagination.page - 1) * pagination.pageSize).toString(),
+      realmId: route.params.realmId as string
+    })
   )
   if (res.status !== 200) {
     error.value = await res.text()
@@ -122,6 +123,21 @@ watch(realms, (val) => {
 function parseContent(src: string): string {
   return dompurify().sanitize(parse(src) as string)
 }
+
+let refresher: PullToRefreshInstance
+
+onMounted(() => {
+  refresher = PullToRefresh.init({
+    mainElement: ".wrapper",
+    triggerElement: ".wrapper",
+    onRefresh() {
+      posts.value = []
+      pagination.page = 0
+      return readPosts()
+    }
+  })
+})
+onUnmounted(() => refresher.destory())
 </script>
 
 <style scoped>