fix: fixed categories and views not being stored/loaded from server-side settings

ErikBjare · ErikBjare · commit b99efb476bc3 · 2024-05-11T14:01:07.000+02:00
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia';
 import moment, { Moment } from 'moment';
 import { getClient } from '~/util/awclient';
+import { Category, defaultCategories } from '~/util/classes';
+import { View, defaultViews } from '~/stores/views';
 
 // Backoffs for NewReleaseNotification
 export const SHORT_BACKOFF_PERIOD = 24 * 60 * 60;
@@ -20,6 +22,8 @@ interface State {
   newReleaseCheckData: Record<string, any>;
   userSatisfactionPollData: Record<string, any>;
   always_active_pattern: string;
+  classes: Category[];
+  views: View[];
 
   // Whether to show certain WIP features
   devmode: boolean;
@@ -52,6 +56,8 @@ export const useSettingsStore = defineStore('settings', {
     userSatisfactionPollData: {},
 
     always_active_pattern: '',
+    classes: defaultCategories,
+    views: defaultViews,
 
     // Developer settings
     // NOTE: PRODUCTION might be undefined (in tests, for example)
diff --git a/src/stores/views.ts b/src/stores/views.ts
@@ -1,12 +1,13 @@
 import { defineStore } from 'pinia';
+import { useSettingsStore } from './settings';
 
 interface IElement {
   type: string;
   size?: number;
   props?: Record<string, unknown>;
 }
 
-interface View {
+export interface View {
   id: string;
   name: string;
   elements: IElement[];
@@ -66,8 +67,8 @@ const androidViews = [
   },
 ];
 
-// FIXME: Decide depending on what kind of device is being viewed, not from which device it is being viewed.
-const defaultViews = !process.env.VUE_APP_ON_ANDROID ? desktopViews : androidViews;
+// FIXME: Decide depending on what kind of device is being viewed, not from which device it is being viewed from.
+export const defaultViews = !process.env.VUE_APP_ON_ANDROID ? desktopViews : androidViews;
 
 interface State {
   views: View[];
@@ -82,21 +83,14 @@ export const useViewsStore = defineStore('views', {
   },
   actions: {
     async load() {
-      let views: View[];
-      if (typeof localStorage !== 'undefined') {
-        const views_json: string = localStorage.views;
-        if (views_json && views_json.length >= 1) {
-          views = JSON.parse(views_json);
-        }
-      }
-      if (!views) {
-        views = defaultViews;
-      }
+      const settingsStore = useSettingsStore();
+      await settingsStore.ensureLoaded();
+      const views = settingsStore.views;
       this.loadViews(views);
     },
     async save() {
-      localStorage.views = JSON.stringify(this.views);
-      // After save, reload views from localStorage
+      const settingsStore = useSettingsStore();
+      settingsStore.update({ views: this.views });
       await this.load();
     },
     loadViews(views: View[]) {
diff --git a/src/util/classes.ts b/src/util/classes.ts
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { IEvent } from './interfaces';
+import { useSettingsStore } from '~/stores/settings';
 
 const level_sep = '>';
 const CLASSIFY_KEYS = ['app', 'title'];
@@ -163,11 +164,13 @@ function areWeTesting() {
 
 export function saveClasses(classes: Category[]) {
   if (areWeTesting()) {
+    // TODO: move this into settings store?
     console.log('Not saving classes in test mode');
     return;
   }
-  localStorage.classes = JSON.stringify(classes.map(cleanCategory));
-  console.log('Saved classes', localStorage.classes);
+  const settingsStore = useSettingsStore();
+  settingsStore.update({ classes: classes.map(cleanCategory) });
+  console.log('Saved classes', settingsStore.classes);
 }
 
 export function cleanCategory(cat: Category): Category {
@@ -186,12 +189,8 @@ export function cleanCategory(cat: Category): Category {
 }
 
 export function loadClasses(): Category[] {
-  const classes_json = localStorage.classes;
-  if (classes_json && classes_json.length >= 1) {
-    return JSON.parse(classes_json).map(cleanCategory);
-  } else {
-    return defaultCategories;
-  }
+  const settingsStore = useSettingsStore();
+  return settingsStore.classes;
 }
 
 function pickDeepest(categories: Category[]) {
diff --git a/src/views/activity/Activity.vue b/src/views/activity/Activity.vue
@@ -463,6 +463,7 @@ export default {
 
       const viewsStore = useViewsStore();
       viewsStore.addView({ id: this.new_view.id, name: this.new_view.name, elements: [] });
+      viewsStore.save();
 
       // Hide the modal manually
       this.$nextTick(() => {
diff --git a/src/views/settings/CategorizationSettings.vue b/src/views/settings/CategorizationSettings.vue
@@ -122,11 +122,11 @@ export default {
     exportClasses: function () {
       console.log('Exporting categories...');
 
-      if (localStorage.classes === undefined) {
+      if (this.categoryStore.classes === undefined) {
         alert('No classes saved, nothing to export!');
       }
       const export_data = {
-        categories: JSON.parse(localStorage.classes),
+        categories: this.categoryStore.classes,
       };
       // Pretty-format it for easier reading
       const text = JSON.stringify(export_data, null, 2);
