Migrate date to commentable DateRecord

Now that the new data model and commenting logic is in-place, migrate old instances of the app to have commentable date fields.

It Works
========

UI
--

- Before (no comments supported on date field):

    ![image](https://user-images.githubusercontent.com/2456381/55261668-d22f5e80-5228-11e9-8fb9-f767ebf7f9b1.png)

- After:

    ![image](https://user-images.githubusercontent.com/2456381/55261693-dce9f380-5228-11e9-83b1-89806f8645f9.png)

Migrations
----------

- Migration from pre-commentable-date version (version 1):

    ![image](https://user-images.githubusercontent.com/2456381/55257807-44e70c80-521e-11e9-91fd-2e07a99e7520.png)

- Migration from rigid data model (version 0):

    ![image](https://user-images.githubusercontent.com/2456381/55260305-449e3f80-5225-11e9-9b2e-84edb36fa1ac.png)

Author: mxxk

app/manifest.json

@@ -3,8 +3,8 @@
     "manifest_version": 4,
     "name": "Toastmasters Agenda",
     "disable_app_level_comments": false,
-    "version_name": "2.0.3",
-    "version_number": 18,
+    "version_name": "2.1.0",
+    "version_number": 19,
     "sizing_mode": "fill_container",
     "initial_height": 300,
     "initial_width": 300,

src/components/roles.js

@@ -7,16 +7,17 @@ import styles from 'css/roles.less';
 export default function Roles() {
     const rootRecord = quip.apps.getRootRecord();
     const date = rootRecord.get('date');
-    const {ref, dateValue, commentsBubble} = getDateData(date);
 
     return (
         <table className={styles.roles}>
-            <tr ref={ref}>
+            <tr ref={node => date.setDom(node)}>
                 <td>Meeting Date</td>
-                <td>{commentsBubble}</td>
+                <td>
+                    <CommentsBubble record={date} />
+                </td>
                 <td>
                     <PlainRichTextBox
-                        record={dateValue}
+                        record={date.get('value')}
                         interceptClicks={false}
                     />
                 </td>
@@ -42,17 +43,3 @@ export default function Roles() {
         </table>
     );
 }
-
-// TODO(#26): Drop conditional logic after data migration to `DateRecord` is
-//     complete.
-const getDateData = dateRecord => dateRecord.setDom
-    ? {
-        ref: node => dateRecord.setDom(node),
-        dateValue: dateRecord.get('value'),
-        commentsBubble: <CommentsBubble record={dateRecord} />,
-    }
-    : {
-        ref: () => {},
-        dateValue: dateRecord,
-        commentsBubble: null,
-    };

src/model/migrations.js

@@ -3,6 +3,7 @@ import {getRichTextRecordContent} from 'utils/utils';
 
 const MIGRATION_FUNCTIONS = [
     migrateFromVersion0,
+    migrateFromVersion1,
 ];
 
 /**
@@ -128,6 +129,16 @@ function migrateFromVersion0() {
     }
 }
 
+/*
+ * Migrate date record to commentable version.
+ */
+function migrateFromVersion1() {
+    const rootRecord = quip.apps.getRootRecord();
+    const dateValue = rootRecord.clear('date', true);
+    const newDateRecord = rootRecord.get('date');
+    newDateRecord.set('value', dateValue);
+}
+
 function getAppLogText() {
     const rootRecord = quip.apps.getRootRecord();
 

src/root.jsx

@@ -13,7 +13,7 @@ class RootRecord extends quip.apps.RootRecord {
         roles: {},
     });
 
-    static DATA_VERSION = 1;
+    static DATA_VERSION = 2;
 }
 
 quip.apps.registerClass(RootRecord, 'root');
@@ -34,19 +34,6 @@ quip.apps.initialize({
             runMigrations();
         }
 
-        /*
-         * Date migration logic. Uncomment after app supports both versions
-         * of date record.
-         *
-         * if (!(rootRecord.get('date') instanceof DateRecord)) {
-         *     // Migrate date record to commentable version.
-         *     const dateValue = rootRecord.clear('date', true);
-         *     const dateRecord = rootRecord.get('date');
-         *     dateRecord.clear('value');
-         *     dateRecord.set('value', dateValue);
-         * }
-         */
-
         ReactDOM.render(<Roles />, root);
     },
 });