fix: make the header reactive (#7)

* Makes the header reactive, previously it would not update after you login into the website

* Persist auth status between sessions

* fix the failing test

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "firebase": "^9.23.0",
     "pinia": "^2.1.3",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"
   },

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container-float">
-    <AWLHeader />
+    <AWLHeader v-if="showHeader" />
   </div>
   <div class="container">
     <router-view />
@@ -19,6 +19,11 @@ export default {
   components: {
     AWLHeader,
     AWLFooter
+  },
+  computed: {
+    showHeader() {
+      return this.$route.name === 'Login' || this.$route.name === 'Signup'
+    }
   }
 }
 </script>

src/components/Dashboard.vue

@@ -1,26 +1,31 @@
 <template>
+  <AWLHeader />
   <div>
     <h1>Dashboard</h1>
     <p>TODO: Insert the user dashboard here</p>
-    <p>Username: {{ auth.user?.displayName }}</p>
+    <p v-if="user">Username: {{ user.email }}</p>
   </div>
 </template>
 
 <script lang="ts">
 import { useAuthStore } from '@/stores/auth'
+import AWLHeader from '@/components/Header.vue'
 import router from '@/router'
 
 // must be logged in to see this page
 export default {
   name: 'AWLDashboard',
   setup() {
-    const auth = useAuthStore()
-    if (!auth.isAuthenticated) {
-      auth.logout()
+    const {user, isAuthenticated, logout} = useAuthStore()
+
+    if (!isAuthenticated) {
+      logout()
       router.push({ name: 'Login' })
     }
-
-    return { auth }
+    return { user}
+  },
+  components: {
+    AWLHeader
   }
 }
 </script>

src/components/Leaderboard.vue

@@ -1,4 +1,5 @@
 <template>
+  <AWLHeader />
   <div>
     <h1>Leaderboard</h1>
     <table>
@@ -22,6 +23,7 @@
 import { ref, onMounted } from 'vue'
 import { getLeaderboard } from '@/firebase/data'
 import { type ScreenTimeSummary } from '@/types'
+import AWLHeader from '@/components/Header.vue'
 
 export default {
   name: 'AWLLeaderboard',
@@ -39,6 +41,9 @@ export default {
     })
 
     return { entries }
+  },
+  components: {
+    AWLHeader
   }
 }
 </script>

src/components/__tests__/SignupForm.spec.ts

@@ -1,11 +1,19 @@
 import { describe, it, expect } from 'vitest'
+import { createPinia } from 'pinia' // Import the createPinia function from the 'pinia' package
+
 
 import { mount } from '@vue/test-utils'
 import SignupForm from '../SignupForm.vue'
 
 describe('SignupForm', () => {
   it('renders properly', () => {
-    const wrapper = mount(SignupForm, { props: { msg: 'Signup Vitest' } })
-    expect(wrapper.text()).toContain('Signup Vitest')
+    const pinia = createPinia() // Create a Pinia instance
+    const wrapper = mount(SignupForm, { 
+      props: { msg: 'Signup Vitest' },
+      global: {
+        plugins: [pinia] // Use the Pinia instance as a plugin
+      }
+    })
+    expect(wrapper.text()).toContain('Sign Up')
   })
 })

src/main.ts

@@ -3,11 +3,13 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 import App from './App.vue'
 import router from './router'
 
 const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
 
 const app = createApp(App)
 app.use(pinia)

src/stores/auth.ts

@@ -10,6 +10,7 @@ export const useAuthStore = defineStore('auth', {
   state: () => ({
     user: null as User | null
   }),
+  persist: true,
   getters: {
     isAuthenticated: (state) => Boolean(state.user)
   },
@@ -24,6 +25,7 @@ export const useAuthStore = defineStore('auth', {
     },
     async logout() {
       await auth.signOut()
+      await this.$reset()
       this.user = null
     }
   }

src/views/AboutView.vue

@@ -1,4 +1,5 @@
 <template>
+  <AWLHeader />
   <div class="container">
     <div>
       <h1>About this website</h1>
@@ -27,3 +28,13 @@
     </div>
   </div>
 </template>
+
+<script lang="ts">
+import AWLHeader from '@/components/Header.vue'
+export default {
+  name: 'AWLAboutView',
+  components: {
+    AWLHeader
+  }
+}
+</script>

src/views/HomeView.vue

@@ -1,4 +1,5 @@
 <template>
+  <AWLHeader />
   <main>
     <div style="max-width: 50em; margin: 5em auto">
       <h1 class="mb-3 mt-5">Welcome to the ActivityWatch Leaderboard</h1>
@@ -56,3 +57,13 @@
     </ul>
   </main>
 </template>
+
+<script lang="ts">
+import AWLHeader from '@/components/Header.vue'
+export default {
+  name: 'AWLHomeView',
+  components: {
+    AWLHeader
+  }
+}
+</script>