feat(ui): persist all data to localStorage

ui/package.json

@@ -20,6 +20,7 @@
     "lodash": "^4.17.21",
     "material-icons": "^1.13.6",
     "pinia": "^2.1.3",
+    "pinia-plugin-persistedstate": "^3.1.0",
     "quasar": "^2.12.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "vue": "^3.2.40",

ui/src/components/AgentProfilesList.vue

@@ -12,6 +12,7 @@ import { showError } from "@/utils/toasts";
 import { watch } from "vue";
 import BaseAgentProfilesList from "./BaseAgentProfilesList.vue";
 import { useRequest } from "vue-request";
+import { localStorageCacheSettings } from "@/utils/requests";
 
 const props = defineProps<{
   fetchFn: () => Promise<AgentProfile[]>;
@@ -23,6 +24,7 @@ const { data, loading, error } = useRequest(props.fetchFn, {
   refreshOnWindowFocus: true,
   refocusTimespan: 25000, // 25 seconds between window focus to trigger refresh
   loadingDelay: 1000,
+  ...localStorageCacheSettings,
 });
 watch(error, showError);
 </script>

ui/src/components/MewList.vue

@@ -41,6 +41,7 @@ import { useRequest } from "vue-request";
 import BaseMewList from "@/components/BaseMewList.vue";
 import CreateMewField from "@/components/CreateMewField.vue";
 import { ActionHash } from "@holochain/client";
+import { localStorageCacheSettings } from "@/utils/requests";
 
 const props = withDefaults(
   defineProps<{
@@ -58,25 +59,25 @@ const props = withDefaults(
 );
 const emit = defineEmits(["mew-pinned", "mew-unpinned"]);
 
-const { data, loading, error, mutate } = useRequest(
-  props.fetchFn,
-  {
-    cacheKey: props.cacheKey,
+const { data, loading, error, mutate } = useRequest(props.fetchFn, {
+  cacheKey: props.cacheKey,
 
-    // run request again every 2m
-    pollingInterval: 2 * 60 * 1000,
+  // run request again every 2m
+  pollingInterval: 2 * 60 * 1000,
 
-    // 10s between window focus to trigger refresh
-    refocusTimespan: 10 * 1000,
-    refreshOnWindowFocus: true,
+  // 10s between window focus to trigger refresh
+  refocusTimespan: 10 * 1000,
+  refreshOnWindowFocus: true,
 
-    // wait for response for 10s before loading = true
-    loadingDelay: 1000,
+  // wait for response for 10s before loading = true
+  loadingDelay: 1000,
 
-    // Overwrite options with provided prop requestOptions
-    ...props.requestOptions,
-  }
-);
+  // cache to local storage
+  ...localStorageCacheSettings,
+
+  // Overwrite options with provided prop requestOptions
+  ...props.requestOptions,
+});
 watch(error, showError);
 
 const onCreateMew = async (feedMew: FeedMew) => {

ui/src/components/MewListItem.vue

@@ -22,6 +22,7 @@ import BaseMewListItem from "@/components/BaseMewListItem.vue";
 import MewListItemSkeleton from "@/components/MewListItemSkeleton.vue";
 import { useRequest } from "vue-request";
 import { FeedMew } from "@/types/types";
+import { localStorageCacheSettings } from "@/utils/requests";
 
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 
@@ -48,6 +49,7 @@ const {
 } = useRequest(fetchMew, {
   cacheKey: `mews/get_mew_with_context/${props.actionHash}`,
   loadingDelay: 1000,
+  ...localStorageCacheSettings,
 });
 watch(error, showError);
 watch(mew, (newMew) => {

ui/src/main.ts

@@ -12,6 +12,7 @@ import { createPinia } from "pinia";
 import VueObserveVisibility from "vue-observe-visibility";
 import App from "./App.vue";
 import { router } from "./router";
+import piniaPluginPersistedState from "pinia-plugin-persistedstate";
 
 // Shoelace
 import "@shoelace-style/shoelace/dist/themes/light.css";
@@ -21,6 +22,7 @@ setBasePath("shoelace");
 
 const app = createApp(App);
 const pinia = createPinia();
+pinia.use(piniaPluginPersistedState);
 app.use(pinia);
 app.use(router);
 app.use(Quasar, {

ui/src/pages/AgentProfile.vue

@@ -151,6 +151,7 @@ import { useRoute, useRouter } from "vue-router";
 import MewList from "@/components/MewList.vue";
 import { AppAgentClient } from "@holochain/client";
 import { useRequest } from "vue-request";
+import { localStorageCacheSettings } from "@/utils/requests";
 
 const profilesStore = (inject("profilesStore") as ComputedRef<ProfilesStore>)
   .value;
@@ -205,6 +206,7 @@ const {
   refreshOnWindowFocus: true,
   refocusTimespan: 25000, // 25 seconds between window focus to trigger refresh
   loadingDelay: 1000,
+  ...localStorageCacheSettings,
 });
 watch(error, showError);
 

ui/src/pages/DiscoverCreators.vue

@@ -60,6 +60,7 @@ import { AppAgentClient } from "@holochain/client";
 import MewList from "@/components/MewList.vue";
 import { FeedMew } from "@/types/types";
 import { useRequest } from "vue-request";
+import { localStorageCacheSettings } from "@/utils/requests";
 
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const forceReloadMewsListsKey = ref(0);
@@ -82,6 +83,7 @@ const fetchRandomTags = (): Promise<string[]> =>
 
 const { data: tags, run: runFetchRandomTags } = useRequest(fetchRandomTags, {
   cacheKey: `get_random_tags`,
+  ...localStorageCacheSettings,
 });
 
 const fetchMewsWithRandomTag = (tag: string) => {

ui/src/pages/MewsFeed.vue

@@ -5,7 +5,9 @@
       :show-create-mew-field="true"
       :fetch-fn="fetchMewsFeed"
       title="Your Mews Feed"
-      :cache-key="`mews/get_my_followed_creators_mews_with_context`"
+      :cache-key="`mews/get_followed_creators_mews_with_context/${encodeHashToBase64(
+        client.myPubKey
+      )}`"
       :insert-responses="true"
     />
   </QPage>
@@ -14,14 +16,15 @@
 <script setup lang="ts">
 import { QPage } from "quasar";
 import { pageHeightCorrection } from "@/utils/page-layout";
-import { AppAgentClient } from "@holochain/client";
+import { AppAgentClient, encodeHashToBase64 } from "@holochain/client";
 import { ComputedRef, inject, watch, ref } from "vue";
 import { FeedMew } from "@/types/types";
 import MewList from "@/components/MewList.vue";
 import { useRouter } from "vue-router";
 import { ROUTES } from "@/router";
 import { useRequest } from "vue-request";
 import { Profile } from "@holochain-open-dev/profiles";
+import { localStorageCacheSettings } from "@/utils/requests";
 
 const client = (inject("client") as ComputedRef<AppAgentClient>).value;
 const myProfile = (inject("myProfile") as ComputedRef<Profile>).value;
@@ -33,8 +36,8 @@ const fetchMewsFeed = (): Promise<FeedMew[]> =>
   client.callZome({
     role_name: "mewsfeed",
     zome_name: "mews",
-    fn_name: "get_my_followed_creators_mews_with_context",
-    payload: null,
+    fn_name: "get_followed_creators_mews_with_context",
+    payload: client.myPubKey,
   });
 
 const fetchFollowedCreators = (): Promise<FeedMew[]> =>
@@ -48,6 +51,7 @@ const fetchFollowedCreators = (): Promise<FeedMew[]> =>
 const { data } = useRequest(fetchFollowedCreators, {
   cacheKey: `follows/get_creators_for_follower/${client.myPubKey}`,
   loadingDelay: 1000,
+  ...localStorageCacheSettings,
 });
 
 watch(data, (val) => {

ui/src/stores/notifications.ts

@@ -1,9 +1,15 @@
-import { AppAgentClient, encodeHashToBase64 } from "@holochain/client";
+import {
+  AgentPubKey,
+  AppAgentClient,
+  decodeHashFromBase64,
+  encodeHashToBase64,
+} from "@holochain/client";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 import { useRequest } from "vue-request";
-import { Notification } from "@/types/types";
-import { encode } from "@msgpack/msgpack";
+import { CacheData, Notification } from "@/types/types";
+import { encode, decode } from "@msgpack/msgpack";
+import { PersistedStateOptions } from "pinia-plugin-persistedstate";
 
 const notificationToKey = (notification: Notification) => {
   const keyObj = {
@@ -19,59 +25,93 @@ const notificationToKey = (notification: Notification) => {
 };
 
 export const makeUseNotificationsStore = (client: AppAgentClient) =>
-  defineStore("notifications", () => {
-    const allNotifications = ref<{
-      [key: string]: { notification: Notification; read: boolean };
-    }>({});
-    const notificationKeys = ref<string[]>([]);
-    const unreadCount = computed(
-      () => Object.values(allNotifications.value).filter((n) => !n.read).length
-    );
-    const notifications = computed(() =>
-      notificationKeys.value.map(
-        (key) => allNotifications.value[key].notification
-      )
-    );
-
-    const fetchNotifications = (): Promise<Notification[]> =>
-      client.callZome({
-        role_name: "mewsfeed",
-        zome_name: "mews",
-        fn_name: "get_my_notifications",
-        payload: null,
+  defineStore(
+    "notifications",
+    () => {
+      const myPubKey = ref<AgentPubKey>(client.myPubKey);
+      const notificationsCache = ref<CacheData<Notification[]>>({
+        data: [],
+        params: null,
+        time: -1,
       });
+      const notificationsRead = ref<{
+        [key: string]: boolean;
+      }>({});
+      const unreadCount = computed(
+        () =>
+          notificationsCache.value.data
+            .map((n) => notificationsRead.value[notificationToKey(n)])
+            .filter((r) => !r).length
+      );
+      const notifications = computed(() => notificationsCache.value.data);
+      const myPubKeyB64 = computed(() => encodeHashToBase64(myPubKey.value));
 
-    const { loading, error, runAsync } = useRequest(fetchNotifications, {
-      cacheKey: `mews/get_my_notifications`,
-      pollingInterval: 30 * 1000, // 30 seconds polling
-      refreshOnWindowFocus: true,
-      refocusTimespan: 0, // 0 seconds between window focus to trigger refresh
-      loadingDelay: 1000,
-      onSuccess: (data) => {
-        data.map((notification: Notification) => {
-          const key = notificationToKey(notification);
+      // @todo not sure if this will actually work
+      if (client.myPubKey !== myPubKey.value) {
+        notificationsCache.value.data = [];
+        notificationsRead.value = {};
+        myPubKey.value = client.myPubKey;
+      }
 
-          if (!notificationKeys.value.includes(key)) {
-            notificationKeys.value.push(key);
-            allNotifications.value[key] = { notification, read: false };
-          }
+      const fetchNotifications = (): Promise<Notification[]> =>
+        client.callZome({
+          role_name: "mewsfeed",
+          zome_name: "mews",
+          fn_name: "get_notifications_for_agent",
+          payload: client.myPubKey,
         });
-      },
-    });
 
-    function markRead(notification: Notification) {
-      const key = notificationToKey(notification);
-      allNotifications.value[key].read = true;
-    }
+      const { loading, error, runAsync } = useRequest(fetchNotifications, {
+        cacheKey: `mews/get_notifications_for_agent/${myPubKeyB64.value}`,
+        pollingInterval: 30 * 1000, // 30 seconds polling
+        refreshOnWindowFocus: true,
+        refocusTimespan: 0, // 0 seconds between window focus to trigger refresh
+        loadingDelay: 1000,
+        setCache: (
+          _cacheKey: string,
+          cacheData: CacheData<Notification[]>
+        ): void => {
+          notificationsCache.value = cacheData;
+
+          (cacheData.data as Notification[]).forEach(
+            (notification: Notification) => {
+              const key = notificationToKey(notification);
+              if (!Object.keys(notificationsRead.value).includes(key)) {
+                notificationsRead.value[key] = false;
+              }
+            }
+          );
+        },
+        getCache: (): CacheData<Notification[]> => {
+          return notificationsCache.value;
+        },
+      });
+
+      function markRead(notification: Notification) {
+        const key = notificationToKey(notification);
+        notificationsRead.value[key] = true;
+      }
 
-    return {
-      notificationKeys,
-      allNotifications,
-      notifications,
-      unreadCount,
-      loading,
-      error,
-      markRead,
-      runAsync,
-    };
-  });
+      return {
+        notificationsCache,
+        notifications,
+        unreadCount,
+        loading,
+        error,
+        markRead,
+        runAsync,
+      };
+    },
+    {
+      persist: {
+        serializer: {
+          serialize(value) {
+            return encodeHashToBase64(encode(value));
+          },
+          deserialize(value) {
+            return decode(decodeHashFromBase64(value));
+          },
+        },
+      } as PersistedStateOptions,
+    }
+  );

ui/src/types/types.ts

@@ -191,3 +191,9 @@ export type NotificationType =
   | { [NotificationTypeName.MyAgentFollowed]: null }
   | { [NotificationTypeName.MyAgentUnfollowed]: null }
   | { [NotificationTypeName.FollowedYarnResponded]: null };
+
+export declare type CacheData<R = any, P = any> = {
+  data: R;
+  params: P;
+  time: number;
+};