feat(pages): make recent pages update in real-time

Author: gustavotoyota

apps/client/src/code/pages/page/page.ts

@@ -358,8 +358,12 @@ export class Page implements IPageRegion {
 
     // Bump on recent pages
 
-    pull(this.app.react.recentPageIds, this.id);
-    this.app.react.recentPageIds.unshift(this.id);
+    internals.pages.recentPageIdsKeepOverride = true;
+    internals.pages.react.recentPageIdsOverride = [
+      ...internals.pages.react.recentPageIds,
+    ];
+    pull(this.app.react.recentPageIdsOverride!, this.id);
+    this.app.react.recentPageIdsOverride!.unshift(this.id);
 
     // Bump on server
 

apps/client/src/code/pages/pages.ts

@@ -14,7 +14,9 @@ import type { Serialization } from './serialization';
 
 export interface IAppReact {
   pathPageIds: string[];
-  recentPageIds: string[];
+
+  recentPageIdsOverride?: string[];
+  recentPageIds: ComputedRef<string[]>;
 
   page: ShallowRef<Page>;
   pageId: ComputedRef<string | undefined>;
@@ -42,6 +44,8 @@ export class Pages {
 
   parentPageId?: string;
 
+  recentPageIdsKeepOverride?: boolean;
+
   constructor(input: { factories: Factories }) {
     this.factories = input.factories;
 
@@ -50,7 +54,21 @@ export class Pages {
 
     this.react = reactive({
       pathPageIds: [],
-      recentPageIds: [],
+      recentPageIds: computed(() => {
+        if (this.recentPageIdsKeepOverride) {
+          this.recentPageIdsKeepOverride = undefined;
+        } else {
+          this.react.recentPageIdsOverride = undefined;
+        }
+
+        const recentPageIds = internals.realtime.globalCtx.hget(
+          'user',
+          authStore().userId,
+          'recent-page-ids',
+        );
+
+        return this.react.recentPageIdsOverride ?? recentPageIds ?? [];
+      }),
 
       page: shallowRef(null) as any,
       pageId: computed(() => this.react.page?.id),
@@ -82,17 +100,12 @@ export class Pages {
 
     promises.push(
       (async () => {
-        const [
-          encryptedDefaultNote,
-          encryptedDefaultArrow,
-          recentPageIdsJSON,
-          isNewUser,
-        ] = await internals.realtime.hmget('user', authStore().userId, [
-          'encrypted-default-note',
-          'encrypted-default-arrow',
-          'recent-page-ids',
-          'new',
-        ]);
+        const [encryptedDefaultNote, encryptedDefaultArrow, isNewUser] =
+          await internals.realtime.hmget('user', authStore().userId, [
+            'encrypted-default-note',
+            'encrypted-default-arrow',
+            'new',
+          ]);
 
         this.defaultNote = unpack(
           internals.symmetricKeyring.decrypt(encryptedDefaultNote, {
@@ -113,8 +126,6 @@ export class Pages {
           }),
         );
 
-        this.react.recentPageIds = recentPageIdsJSON ?? [];
-
         this.react.isNewUser = !!isNewUser;
 
         if (isNewUser) {

apps/client/src/layouts/PagesLayout/LeftSidebar/RecentPages.vue

@@ -83,7 +83,11 @@ async function removeRecentPage(pageId: string) {
   try {
     await trpcClient.users.pages.removeRecentPage.mutate({ pageId });
 
-    pull(internals.pages.react.recentPageIds, pageId);
+    internals.pages.recentPageIdsKeepOverride = true;
+    internals.pages.react.recentPageIdsOverride = [
+      ...internals.pages.react.recentPageIds,
+    ];
+    pull(internals.pages.react.recentPageIdsOverride, pageId);
   } catch (error) {
     handleError(error);
   }

packages/@deeplib/data/src/data-hashes/user/recent-page-ids.ts

@@ -2,6 +2,8 @@ import type { UserModel } from '@deeplib/db';
 import type { DataField } from '@stdlib/data';
 
 export const recentPageIds: DataField<UserModel> = {
+  notifyUpdates: true,
+
   userGettable: ({ userId, suffix }) => userId === suffix,
 
   columns: ['recent_page_ids'],