Add leaderboard store

src/components/Leaderboard.vue

@@ -21,20 +21,21 @@
 
 <script lang="ts">
 import { ref, onMounted } from 'vue'
-import { getLeaderboard } from '@/firebase/data'
+import { useLeaderboardStore } from '@/stores/leaderboard'
 import { type ScreenTimeSummary } from '@/types'
 import AWLHeader from '@/components/Header.vue'
 
 export default {
   name: 'AWLLeaderboard',
   setup() {
-    const entries = ref([] as ScreenTimeSummary[])
+    const entries = ref([] as ScreenTimeSummary[] | null)
 
     onMounted(async () => {
       try {
-        const data = (await getLeaderboard()) as ScreenTimeSummary[]
-        data.sort((a, b) => b.total - a.total)
-        entries.value = data
+        const { fetchLeaderboardData, leaderboardData} = useLeaderboardStore()
+        fetchLeaderboardData()
+        leaderboardData?.sort((a, b) => b.total - a.total)
+        entries.value = leaderboardData
       } catch (error) {
         console.error(error)
       }

src/stores/leaderboard.ts

@@ -0,0 +1,27 @@
+
+import { defineStore } from 'pinia'
+import type { ScreenTimeSummary } from '@/types'
+import { getLeaderboard } from '@/firebase/data'
+import { ref } from 'vue'
+
+export const useLeaderboardStore = defineStore('leaderboard', {
+    state: () => ({
+        leaderboardData: ref<ScreenTimeSummary[] | null>(null),
+    }),
+    getters: {
+        leaderboardExists: (state) => Boolean(state.leaderboardData),
+        getleaderboardData: (state) => state.leaderboardData
+    },
+    persist: true,
+    actions: {
+        async fetchLeaderboardData() {
+            getLeaderboard().then((data) => {
+                this.leaderboardData = data
+            })
+        },
+        async resetStore() {
+            this.leaderboardData = null
+            this.$reset()
+        }
+    }
+})