Migrate Post view to Composition API (#6133)

* Migrate Post view to Composition API

* add missing watch

* move constants below import

* Use shallowRef for post

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Add missing import for shallowRef

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

src/renderer/views/Post/Post.js

@@ -1,74 +0,0 @@
-import { defineComponent } from 'vue'
-import FtCard from '../../components/ft-card/ft-card.vue'
-import FtCommunityPost from '../../components/FtCommunityPost/FtCommunityPost.vue'
-import FtLoader from '../../components/ft-loader/ft-loader.vue'
-import WatchVideoComments from '../../components/watch-video-comments/watch-video-comments.vue'
-
-import { getInvidiousCommunityPost } from '../../helpers/api/invidious'
-
-export default defineComponent({
-  name: 'Post',
-  components: {
-    FtCard,
-    FtCommunityPost,
-    FtLoader,
-    WatchVideoComments
-  },
-  data: function () {
-    return {
-      id: '',
-      authorId: '',
-      post: null,
-      comments: null,
-      isLoading: true,
-    }
-  },
-  computed: {
-    backendPreference: function () {
-      return this.$store.getters.getBackendPreference
-    },
-    backendFallback: function () {
-      return this.$store.getters.getBackendFallback
-    },
-    isInvidiousAllowed: function() {
-      return this.backendPreference === 'invidious' || this.backendFallback
-    }
-  },
-  watch: {
-    async '$route.params.id'() {
-      // react to route changes...
-      this.isLoading = true
-      if (this.isInvidiousAllowed) {
-        this.id = this.$route.params.id
-        this.authorId = this.$route.query.authorId
-        await this.loadDataInvidiousAsync()
-      }
-    }
-  },
-  mounted: async function () {
-    if (this.isInvidiousAllowed) {
-      this.id = this.$route.params.id
-      this.authorId = this.$route.query.authorId
-      await this.loadDataInvidiousAsync()
-    }
-  },
-  methods: {
-    loadDataInvidiousAsync: async function() {
-      this.post = await getInvidiousCommunityPost(this.id, this.authorId)
-      this.authorId = this.post.authorId
-      this.isLoading = false
-
-      // If the authorId is missing from the URL we should add it,
-      // that way if the user comes back to this page by pressing the back button
-      // we don't have to resolve the authorId again
-      if (this.authorId !== this.$route.query.authorId) {
-        this.$router.replace({
-          path: `/post/${this.id}`,
-          query: {
-            authorId: this.authorId
-          }
-        })
-      }
-    }
-  }
-})

src/renderer/views/Post/Post.vue

@@ -28,4 +28,71 @@
   </div>
 </template>
 
-<script src="./Post.js" />
+<script setup>
+import { computed, onMounted, ref, shallowRef, watch } from 'vue'
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtCommunityPost from '../../components/FtCommunityPost/FtCommunityPost.vue'
+import FtLoader from '../../components/ft-loader/ft-loader.vue'
+import WatchVideoComments from '../../components/watch-video-comments/watch-video-comments.vue'
+import store from '../../store/index'
+import { useRoute, useRouter } from 'vue-router/composables'
+import { getInvidiousCommunityPost } from '../../helpers/api/invidious'
+
+const router = useRouter()
+const route = useRoute()
+
+const id = ref('')
+const authorId = ref('')
+const post = shallowRef(null)
+const isLoading = ref(true)
+
+/** @type {import('vue').ComputedRef<'invidious' | 'local'>} */
+const backendPreference = computed(() => {
+  return store.getters.getBackendPreference
+})
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const backendFallback = computed(() => {
+  return store.getters.getBackendFallback
+})
+
+const isInvidiousAllowed = computed(() => {
+  return backendPreference.value === 'invidious' || backendFallback.value
+})
+
+onMounted(async () => {
+  if (isInvidiousAllowed.value) {
+    id.value = route.params.id
+    authorId.value = route.query.authorId
+    await loadDataInvidiousAsync()
+  }
+})
+
+async function loadDataInvidiousAsync() {
+  post.value = await getInvidiousCommunityPost(id.value, authorId.value)
+  authorId.value = post.value.authorId
+  isLoading.value = false
+
+  // If the authorId is missing from the URL we should add it,
+  // that way if the user comes back to this page by pressing the back button
+  // we don't have to resolve the authorId again
+  if (authorId.value !== route.query.authorId) {
+    router.replace({
+      path: `/post/${id.value}`,
+      query: {
+        authorId: authorId.value
+      }
+    })
+  }
+}
+
+watch(() => route.params.id, async () => {
+  // react to route changes...
+  isLoading.value = true
+  if (isInvidiousAllowed.value) {
+    id.value = route.params.id
+    authorId.value = route.query.authorId
+    await loadDataInvidiousAsync()
+  }
+})
+</script>