Reload home timeline when clicking on "Home" button

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Added
+
+- Reload home timeline when clicking on "Home" button.
+
 ### Changed
 
 - Improved username validation.

src/components/SidebarLayout.vue

@@ -2,7 +2,11 @@
   <header v-if="currentUser !== null">
     <div id="header">
       <div id="nav">
-        <router-link to="/" class="home-btn">
+        <router-link
+          class="home-btn"
+          :to="{ name: 'home' }"
+          @click.prevent="showHomeTimeline()"
+        >
           <img :src="require('@/assets/feather/home.svg')">
           <span>Home</span>
         </router-link>
@@ -32,14 +36,31 @@
 
 <script setup lang="ts">
 import { $ } from "vue/macros"
+import { useRoute, useRouter } from "vue-router"
 
-import { useCurrentUser } from "@/store/user"
 import Avatar from "@/components/Avatar.vue"
 import InstanceInfo from "@/components/InstanceInfo.vue"
 import Search from "@/components/Search.vue"
 import Sidebar from "@/components/Sidebar.vue"
+import { useCurrentUser } from "@/store/user"
+import { useNotifications } from "@/store/notifications"
 
-const { currentUser } = $(useCurrentUser())
+const route = useRoute()
+const router = useRouter()
+const { currentUser, ensureAuthToken } = $(useCurrentUser())
+const { loadNotifications } = $(useNotifications())
+
+/* eslint-disable-next-line no-undef */
+const emit = defineEmits<{(event: "reload-home"): void}>()
+
+function showHomeTimeline() {
+  if (route.name === "home") {
+    loadNotifications(ensureAuthToken())
+    emit("reload-home")
+  } else {
+    router.push({ name: "home" })
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/views/HomeTimeline.vue

@@ -1,13 +1,13 @@
 <template>
-  <sidebar-layout>
+  <sidebar-layout @reload-home="loadTimeline">
     <template #content>
       <post-editor
         v-if="canCreatePost()"
         :in-reply-to="null"
         @post-created="insertPost"
       ></post-editor>
-      <post-list :posts="posts" @load-next-page="loadNextPage"></post-list>
       <loader v-if="isLoading"></loader>
+      <post-list :posts="posts" @load-next-page="loadNextPage"></post-list>
     </template>
   </sidebar-layout>
 </template>
@@ -29,13 +29,6 @@ const { ensureAuthToken, ensureCurrentUser } = useCurrentUser()
 let posts = $ref<Post[]>([])
 let isLoading = $ref(false)
 
-onMounted(async () => {
-  isLoading = true
-  const authToken = ensureAuthToken()
-  posts = await getHomeTimeline(authToken)
-  isLoading = false
-})
-
 function canCreatePost(): boolean {
   const user = ensureCurrentUser()
   return user.role.permissions.includes(Permissions.CreatePost)
@@ -45,11 +38,22 @@ function insertPost(post: Post) {
   posts = [post, ...posts]
 }
 
+async function loadTimeline() {
+  isLoading = true
+  const authToken = ensureAuthToken()
+  posts = await getHomeTimeline(authToken)
+  isLoading = false
+}
+
 async function loadNextPage(maxId: string) {
   const authToken = ensureAuthToken()
   const nextPage = await getHomeTimeline(authToken, maxId)
   posts = [...posts, ...nextPage]
 }
+
+onMounted(async () => {
+  await loadTimeline()
+})
 </script>
 
 <style scoped lang="scss">