✨ Deletable realm

🐛 Fix data won't reload after go to another realm

pkg/views/src/components/realms/RealmDeletion.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-card title="Delete a realm" :loading="loading">
+    <template #text>
+      You are deleting a realm
+      <b>{{ realms.related.delete_to?.name }}</b> <br />
+      All posts belonging to this domain will be deleted and never appear again. Are you confirm?
+    </template>
+    <template #actions>
+      <div class="w-full flex justify-end">
+        <v-btn color="grey-darken-3" @click="realms.show.delete = false">Not really</v-btn>
+        <v-btn color="error" :disabled="loading" @click="deletePost">Yes</v-btn>
+      </div>
+    </template>
+  </v-card>
+
+  <v-snackbar v-model="success" :timeout="3000">The realm has been deleted.</v-snackbar>
+
+  <!-- @vue-ignore -->
+  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useRealms } from "@/stores/realms"
+import { getAtk } from "@/stores/userinfo"
+import { ref } from "vue"
+
+const realms = useRealms()
+
+const emits = defineEmits(["relist"])
+
+const error = ref<string | null>(null)
+const success = ref(false)
+const loading = ref(false)
+
+async function deletePost() {
+  const target = realms.related.delete_to
+  const url = `/api/realms/${target.id}`
+
+  loading.value = true
+  const res = await fetch(url, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${getAtk()}` }
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    success.value = true
+    realms.show.delete = false
+    realms.related.delete_to = null
+    emits("relist")
+  }
+  loading.value = false
+}
+</script>

pkg/views/src/components/realms/RealmEditor.vue

@@ -31,7 +31,10 @@
 import { ref, watch } from "vue"
 import { getAtk } from "@/stores/userinfo"
 import { useRealms } from "@/stores/realms"
+import { useRoute, useRouter } from "vue-router"
 
+const route = useRoute()
+const router = useRouter()
 const emits = defineEmits(["relist"])
 
 const realms = useRealms()
@@ -56,8 +59,8 @@ async function submit(evt: SubmitEvent) {
   const payload = data.value
   if (!payload.name) return
 
-  const url = realms.related.edit_to ? `/api/realms/${realms.related.edit_to?.id}` : "/api/moments";
-  const method = realms.related.edit_to ? "PUT" : "POST";
+  const url = realms.related.edit_to ? `/api/realms/${realms.related.edit_to?.id}` : "/api/realms"
+  const method = realms.related.edit_to ? "PUT" : "POST"
 
   loading.value = true
   const res = await fetch(url, {
@@ -72,6 +75,11 @@ async function submit(evt: SubmitEvent) {
     form.reset()
     realms.done = true
     realms.show.editor = false
+    realms.related.edit_to = null
+
+    if (route.name?.toString()?.startsWith("realm")) {
+      router.push({ name: "explore" })
+    }
   }
   loading.value = false
 }

pkg/views/src/components/realms/RealmTools.vue

@@ -2,11 +2,15 @@
   <v-dialog v-model="realms.show.editor" class="max-w-[540px]">
     <realm-editor @relist="realms.list" />
   </v-dialog>
+  <v-dialog v-model="realms.show.delete" class="max-w-[540px]">
+    <realm-deletion @relist="realms.list" />
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
 import { useRealms } from "@/stores/realms"
 import RealmEditor from "@/components/realms/RealmEditor.vue"
+import RealmDeletion from "./RealmDeletion.vue"
 
 const realms = useRealms()
 </script>

pkg/views/src/views/realms/page.vue

@@ -95,8 +95,15 @@ async function readMore({ done }: any) {
   }
 }
 
+watch(
+  () => route.params.realmId,
+  () => {
+    posts.value = []
     readMetadata()
     readPosts()
+  },
+  { immediate: true }
+)
 
 watch(realms, (val) => {
   if (val.done) {