From 2d689e6518e5026415f2e6a9ea859e5d7f3b3f68 Mon Sep 17 00:00:00 2001
From: Kai Kuehner <kvk@pobox.com>
Date: Thu, 25 Apr 2024 20:09:47 -0400
Subject: [PATCH] make user profile stats work

---
 src/components/ExtensionBar.vue | 13 +++++++++++--
 src/config.ts                   |  2 +-
 src/main.ts                     |  8 +-------
 src/store.ts                    | 22 +++++++++++++---------
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/ExtensionBar.vue b/src/components/ExtensionBar.vue
index 3cad0b9..243bf01 100644
--- a/src/components/ExtensionBar.vue
+++ b/src/components/ExtensionBar.vue
@@ -4,7 +4,8 @@ import VolumesOverlay from "components/VolumesOverlay.vue";
 import UserProfile from "components/UserProfile.vue";
 import DropdownList from "components/DropdownList.vue";
 
-import {loginSession, useLoginStore, useVolumesStore} from '../store';
+import {loginSession, useLoginStore, useVolumesStore, useStatsStore, useChatStore} from '../store';
+import {connectChatSocket} from '../chat_socket';
 
 import logoGemImage from '../images/pyr icon.svg';
 import logoTextImage from '../images/pyr wordmark.svg';
@@ -13,11 +14,19 @@ function encodeSVG(svg: string) {
     return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
 }
 
+function initLoginServices() {
+  const {loopUpdateLeaderboard} = useStatsStore();
+  loopUpdateLeaderboard();
+  connectChatSocket();
+  const {joinChat} = useChatStore();
+  joinChat();
+}
+
 const login = useLoginStore();
 window.addEventListener("middleauthlogin", () => {
   login.update();
 });
-login.update();
+login.update().then(() => initLoginServices());
 
 const validLogins = computed(() => login.sessions.filter(x => x.status === undefined));
 const invalidLogins = computed(() => login.sessions.filter(x => x.status !== undefined));
diff --git a/src/config.ts b/src/config.ts
index 13807f6..647f584 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,7 +1,7 @@
 export type Config = {
   volumes_url?: string,
   leaderboard_url: string,
-  user_stats_url: string,
+  //user_stats_url: string,
   chat_url: string,
   /*brainMeshURL: string,
   brainMeshOpacityDark: number,
diff --git a/src/main.ts b/src/main.ts
index fb85afe..1294147 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,8 +4,7 @@ import {createPinia} from 'pinia';
 import 'neuroglancer/ui/default_viewer.css';
 
 import App from 'components/App.vue';
-import {useLayersStore, useStatsStore, useChatStore} from 'src/store';
-import {connectChatSocket} from 'src/chat_socket';
+import {useLayersStore} from 'src/store';
 import {setupDefaultViewer} from 'third_party/neuroglancer/ui/default_viewer_setup';
 
 function mergeTopBars() {
@@ -26,9 +25,4 @@ window.addEventListener('DOMContentLoaded', () => {
   const viewer = setupDefaultViewer();
   initializeWithViewer(viewer);
   mergeTopBars();
-  const {loopUpdateLeaderboard} = useStatsStore();
-  loopUpdateLeaderboard();
-  connectChatSocket();
-  const {joinChat} = useChatStore();
-  joinChat();
 });
diff --git a/src/store.ts b/src/store.ts
index dc750f0..5fbcb25 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,5 +1,5 @@
 import {Ref, ref, reactive, nextTick} from 'vue';
-import {defineStore} from 'pinia';
+import {defineStore, storeToRefs} from 'pinia';
 
 import {Viewer} from 'neuroglancer/viewer';
 import {defaultCredentialsManager} from 'neuroglancer/credentials_provider/default_manager';
@@ -229,9 +229,7 @@ export const useStatsStore = defineStore('stats', () => {
   let userInfo: UserInfo = reactive({editsToday: 0, editsThisWeek: 0, editsAllTime: 0});
   let cellsSubmitted: Ref<number> = ref(0);
 
-  const {sessions} = useLoginStore();
-  const loggedInUser = sessions[0];
-
+  const {sessions} = storeToRefs(useLoginStore());
   function setLeaderboardTimespan(ts: LeaderboardTimespan) {
     leaderboardTimespan = ts;
   }
@@ -266,12 +264,17 @@ export const useStatsStore = defineStore('stats', () => {
 
   async function updateUserInfo() {
     if (!CONFIG) return;
+    const loggedInUser = sessions.value[0];
     if (!loggedInUser) return;
     const userID = loggedInUser.id;
     const url = CONFIG.leaderboard_url + '/userInfo?userID=' + userID;
-    fetch(url).then(result => result.json()).then(async(json) => { userInfo = json; });
-    const statsURL = CONFIG.user_stats_url + '&user_id=' + userID;
-    fetch(statsURL).then(result => result.json()).then(async(json) => { cellsSubmitted = json["cells_submitted_all_time"]; });
+    fetch(url).then(result => result.json()).then(async(json) => { 
+      userInfo.editsAllTime = json.editsAllTime; 
+      userInfo.editsThisWeek = json.editsThisWeek; 
+      userInfo.editsToday = json.editsToday; 
+    });
+    //const statsURL = CONFIG.user_stats_url + '&user_id=' + userID;
+    //fetch(statsURL).then(result => result.json()).then(async(json) => { cellsSubmitted = json["cells_submitted_all_time"]; });
   }
 
   return {leaderboardLoaded, leaderboardEntries, userInfo, cellsSubmitted, 
@@ -305,10 +308,10 @@ export const useChatStore = defineStore('chat', () => {
   let chatMessages: ChatMessage[] = reactive([]);
   let unreadMessages: Ref<boolean> = ref(false);
 
-  const {sessions} = useLoginStore();
-  const loggedInUser = sessions[0];
+  const {sessions} = storeToRefs(useLoginStore());
 
   function sendJoinMessage(ws: ReconnectingWebSocket) {
+    const loggedInUser = sessions.value[0];
     const joinMessage = JSON.stringify({
       type: joinedChat ? 'rejoin' : 'join',
       name: loggedInUser ? loggedInUser.name : 'Guest'
@@ -318,6 +321,7 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   function sendMessage(message: string) {
+    const loggedInUser = sessions.value[0];
     const now = new Date();
     const messageObj = {
       name: loggedInUser ? loggedInUser.name : 'Guest',