feat: Show drafts in sidebar when viewing (#2820)

app/models/ApiKey.ts

@@ -1,8 +1,14 @@
+import { observable } from "mobx";
 import BaseModel from "./BaseModel";
+import Field from "./decorators/Field";
 
 class ApiKey extends BaseModel {
+  @Field
+  @observable
   id: string;
 
+  @Field
+  @observable
   name: string;
 
   secret: string;

app/models/BaseModel.ts

@@ -1,4 +1,6 @@
-import { set, observable } from "mobx";
+import { pick } from "lodash";
+import { set, computed, observable } from "mobx";
+import { getFieldsForModel } from "./decorators/Field";
 
 export default class BaseModel {
   @observable
@@ -10,7 +12,7 @@ export default class BaseModel {
   store: any;
 
   constructor(fields: Record<string, any>, store: any) {
-    set(this, fields);
+    this.updateFromJson(fields);
     this.store = store;
   }
 
@@ -19,16 +21,28 @@ export default class BaseModel {
 
     try {
       // ensure that the id is passed if the document has one
-      if (params) params = { ...params, id: this.id };
+      if (params) {
+        params = { ...params, id: this.id };
+      }
+
       const model = await this.store.save(params || this.toJS());
+
       // if saving is successful set the new values on the model itself
       set(this, { ...params, ...model });
+
+      this.persistedAttributes = this.toJS();
+
       return model;
     } finally {
       this.isSaving = false;
     }
   };
 
+  updateFromJson = (data: any) => {
+    set(this, data);
+    this.persistedAttributes = this.toJS();
+  };
+
   fetch = (options?: any) => {
     return this.store.fetch(this.id, options);
   };
@@ -49,7 +63,43 @@ export default class BaseModel {
     }
   };
 
+  /**
+   * Returns a plain object representation of the model
+   *
+   * @returns {Record<string, any>}
+   */
   toJS = (): Record<string, any> => {
-    return { ...this };
+    const fields = getFieldsForModel(this);
+    return pick(this, fields) || [];
   };
+
+  /**
+   * Returns a boolean indicating if the model has changed since it was last
+   * persisted to the server
+   *
+   * @returns boolean true if unsaved
+   */
+  isDirty(): boolean {
+    const attributes = this.toJS();
+
+    if (Object.keys(attributes).length === 0) {
+      console.warn("Checking dirty on model with no @Field decorators");
+    }
+
+    return (
+      JSON.stringify(this.persistedAttributes) !== JSON.stringify(attributes)
+    );
+  }
+
+  /**
+   * Returns a boolean indicating whether the model has been persisted to db
+   *
+   * @returns boolean true if the model has never been persisted
+   */
+  @computed
+  get isNew(): boolean {
+    return !this.id;
+  }
+
+  protected persistedAttributes: Partial<BaseModel> = {};
 }

app/models/Collection.ts

@@ -1,9 +1,10 @@
-import { pick, trim } from "lodash";
+import { trim } from "lodash";
 import { action, computed, observable } from "mobx";
 import BaseModel from "~/models/BaseModel";
 import Document from "~/models/Document";
 import { NavigationNode } from "~/types";
 import { client } from "~/utils/ApiClient";
+import Field from "./decorators/Field";
 
 export default class Collection extends BaseModel {
   @observable
@@ -12,22 +13,45 @@ export default class Collection extends BaseModel {
   @observable
   isLoadingUsers: boolean;
 
+  @Field
+  @observable
   id: string;
 
+  @Field
+  @observable
   name: string;
 
+  @Field
+  @observable
   description: string;
 
+  @Field
+  @observable
   icon: string;
 
+  @Field
+  @observable
   color: string;
 
+  @Field
+  @observable
   permission: "read" | "read_write" | void;
 
+  @Field
+  @observable
   sharing: boolean;
 
+  @Field
+  @observable
   index: string;
 
+  @Field
+  @observable
+  sort: {
+    field: string;
+    direction: "asc" | "desc";
+  };
+
   documents: NavigationNode[];
 
   createdAt: string;
@@ -36,11 +60,6 @@ export default class Collection extends BaseModel {
 
   deletedAt: string | null | undefined;
 
-  sort: {
-    field: string;
-    direction: "asc" | "desc";
-  };
-
   url: string;
 
   urlId: string;
@@ -112,6 +131,7 @@ export default class Collection extends BaseModel {
 
   pathToDocument(documentId: string) {
     let path: NavigationNode[] | undefined;
+    const document = this.store.rootStore.documents.get(documentId);
 
     const travelNodes = (
       nodes: NavigationNode[],
@@ -125,6 +145,14 @@ export default class Collection extends BaseModel {
           return;
         }
 
+        if (
+          document?.parentDocumentId &&
+          node?.id === document?.parentDocumentId
+        ) {
+          path = [...newPath, document.asNavigationNode];
+          return;
+        }
+
         return travelNodes(node.children, newPath);
       });
     };
@@ -136,20 +164,6 @@ export default class Collection extends BaseModel {
     return path || [];
   }
 
-  toJS = () => {
-    return pick(this, [
-      "id",
-      "name",
-      "color",
-      "description",
-      "sharing",
-      "icon",
-      "permission",
-      "sort",
-      "index",
-    ]);
-  };
-
   export = () => {
     return client.get("/collections.export", {
       id: this.id,

app/models/Document.ts

@@ -7,7 +7,9 @@ import unescape from "@shared/utils/unescape";
 import DocumentsStore from "~/stores/DocumentsStore";
 import BaseModel from "~/models/BaseModel";
 import User from "~/models/User";
+import { NavigationNode } from "~/types";
 import View from "./View";
+import Field from "./decorators/Field";
 
 type SaveOptions = {
   publish?: boolean;
@@ -28,10 +30,36 @@ export default class Document extends BaseModel {
 
   store: DocumentsStore;
 
-  collaboratorIds: string[];
-
+  @Field
+  @observable
   collectionId: string;
 
+  @Field
+  @observable
+  id: string;
+
+  @Field
+  @observable
+  text: string;
+
+  @Field
+  @observable
+  title: string;
+
+  @Field
+  @observable
+  template: boolean;
+
+  @Field
+  @observable
+  templateId: string | undefined;
+
+  @Field
+  @observable
+  parentDocumentId: string | undefined;
+
+  collaboratorIds: string[];
+
   createdAt: string;
 
   createdBy: User;
@@ -40,22 +68,8 @@ export default class Document extends BaseModel {
 
   updatedBy: User;
 
-  id: string;
-
-  team: string;
-
   pinned: boolean;
 
-  text: string;
-
-  title: string;
-
-  template: boolean;
-
-  templateId: string | undefined;
-
-  parentDocumentId: string | undefined;
-
   publishedAt: string | undefined;
 
   archivedAt: string;
@@ -76,7 +90,7 @@ export default class Document extends BaseModel {
   constructor(fields: Record<string, any>, store: DocumentsStore) {
     super(fields, store);
 
-    if (this.isNewDocument && this.isFromTemplate) {
+    if (this.isPersistedOnce && this.isFromTemplate) {
       this.title = "";
     }
   }
@@ -122,7 +136,7 @@ export default class Document extends BaseModel {
   }
 
   @computed
-  get isNew(): boolean {
+  get isBadgedNew(): boolean {
     return (
       !this.lastViewedAt &&
       differenceInDays(new Date(), new Date(this.createdAt)) < 14
@@ -169,7 +183,7 @@ export default class Document extends BaseModel {
   }
 
   @computed
-  get isNewDocument(): boolean {
+  get isPersistedOnce(): boolean {
     return this.createdAt === this.updatedAt;
   }
 
@@ -199,11 +213,6 @@ export default class Document extends BaseModel {
     });
   };
 
-  @action
-  updateFromJson = (data: Record<string, any>) => {
-    set(this, data);
-  };
-
   archive = () => {
     return this.store.archive(this);
   };
@@ -376,6 +385,24 @@ export default class Document extends BaseModel {
     return result;
   };
 
+  @computed
+  get isActive(): boolean {
+    return !this.isDeleted && !this.isTemplate && !this.isArchived;
+  }
+
+  @computed
+  get asNavigationNode(): NavigationNode {
+    return {
+      id: this.id,
+      title: this.title,
+      children: this.store.orderedData
+        .filter((doc) => doc.parentDocumentId === this.id)
+        .map((doc) => doc.asNavigationNode),
+      url: this.url,
+      isDraft: this.isDraft,
+    };
+  }
+
   download = async () => {
     // Ensure the document is upto date with latest server contents
     await this.fetch();

app/models/Group.ts

@@ -1,19 +1,19 @@
+import { observable } from "mobx";
 import BaseModel from "./BaseModel";
+import Field from "./decorators/Field";
 
 class Group extends BaseModel {
+  @Field
+  @observable
   id: string;
 
+  @Field
+  @observable
   name: string;
 
   memberCount: number;
 
   updatedAt: string;
-
-  toJS = () => {
-    return {
-      name: this.name,
-    };
-  };
 }
 
 export default Group;

app/models/NotificationSetting.ts

@@ -1,8 +1,14 @@
+import { observable } from "mobx";
 import BaseModel from "./BaseModel";
+import Field from "./decorators/Field";
 
 class NotificationSetting extends BaseModel {
+  @Field
+  @observable
   id: string;
 
+  @Field
+  @observable
   event: string;
 }
 

app/models/Share.ts

@@ -1,13 +1,23 @@
+import { observable } from "mobx";
 import BaseModel from "./BaseModel";
 import User from "./User";
+import Field from "./decorators/Field";
 
 class Share extends BaseModel {
+  @Field
+  @observable
   id: string;
 
-  url: string;
-
+  @Field
+  @observable
   published: boolean;
 
+  @Field
+  @observable
+  includeChildDocuments: boolean;
+
+  @Field
+  @observable
   documentId: string;
 
   documentTitle: string;
@@ -16,7 +26,7 @@ class Share extends BaseModel {
 
   lastAccessedAt: string | null | undefined;
 
-  includeChildDocuments: boolean;
+  url: string;
 
   createdBy: User;
 

app/models/Team.ts

@@ -1,29 +1,48 @@
-import { computed } from "mobx";
+import { computed, observable } from "mobx";
 import BaseModel from "./BaseModel";
+import Field from "./decorators/Field";
 
 class Team extends BaseModel {
+  @Field
+  @observable
   id: string;
 
+  @Field
+  @observable
   name: string;
 
+  @Field
+  @observable
   avatarUrl: string;
 
+  @Field
+  @observable
   sharing: boolean;
 
+  @Field
+  @observable
   collaborativeEditing: boolean;
 
+  @Field
+  @observable
   documentEmbeds: boolean;
 
+  @Field
+  @observable
   guestSignin: boolean;
 
+  @Field
+  @observable
   subdomain: string | null | undefined;
 
+  @Field
+  @observable
+  defaultUserRole: string;
+
   domain: string | null | undefined;
 
   url: string;
 
-  defaultUserRole: string;
-
   @computed
   get signinMethods(): string {
     return "SSO";

app/models/User.ts

@@ -1,18 +1,31 @@
-import { computed } from "mobx";
+import { computed, observable } from "mobx";
 import { Role } from "@shared/types";
 import BaseModel from "./BaseModel";
+import Field from "./decorators/Field";
 
 class User extends BaseModel {
-  avatarUrl: string;
-
+  @Field
+  @observable
   id: string;
 
+  @Field
+  @observable
+  avatarUrl: string;
+
+  @Field
+  @observable
   name: string;
 
-  email: string;
-
+  @Field
+  @observable
   color: string;
 
+  @Field
+  @observable
+  language: string;
+
+  email: string;
+
   isAdmin: boolean;
 
   isViewer: boolean;
@@ -23,8 +36,6 @@ class User extends BaseModel {
 
   createdAt: string;
 
-  language: string;
-
   @computed
   get isInvited(): boolean {
     return !this.lastActiveAt;

app/models/decorators/Field.ts

@@ -0,0 +1,19 @@
+const fields = new Map();
+
+export const getFieldsForModel = (target: any) => {
+  return fields.get(target.constructor.name);
+};
+
+/**
+ * A decorator that records this key as a serializable field on the model.
+ * Properties decorated with @Field will be included in API requests by default.
+ *
+ * @param target
+ * @param propertyKey
+ */
+const Field = <T>(target: any, propertyKey: keyof T) => {
+  const className = target.constructor.name;
+  fields.set(className, [...(fields.get(className) || []), propertyKey]);
+};
+
+export default Field;