Implement Recent component

and resolve consistency between CSS classes in recent and profile.

Author: qti3e

src/components/profile.tsx

@@ -40,22 +40,17 @@ export class Profile extends Component<ProfileProps, {}> {
       return <h1>User has no notebooks.</h1>;
     }
     const doc = this.props.notebooks[0].doc;
-    // TODO Profile is reusing the most-recent css class, because it's a very
-    // similar layout. The CSS class should be renamed something appropriate
-    // for both of them, maybe nb-listing.
     return (
-      <div class="most-recent">
-        <div class="most-recent-header">
+      <div class="nb-listing">
+        <div class="nb-listing-header">
           <UserTitle userInfo={doc.owner} />
           {newNotebookButton()}
         </div>
-        <ol>
-          <NotebookList
-            showTitle={ true }
-            notebooks={ this.props.notebooks }
-            onClick={ this.onClick.bind(this) }
-          />
-        </ol>
+        <NotebookList
+          showTitle={ true }
+          notebooks={ this.props.notebooks }
+          onClick={ this.onClick.bind(this) }
+        />
       </div>
     );
   }

src/components/recent.tsx

@@ -0,0 +1,66 @@
+/*!
+   Copyright 2018 Propel http://propel.site/.  All rights reserved.
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+
+import { Component, h } from "preact";
+import * as types from "../types";
+import { NotebookList } from "./list";
+import { newNotebookButton } from "./new_notebook_button";
+import { profileLink } from "./user_title";
+
+export interface RecentProps {
+  mostRecent: types.NbInfo[];
+  userInfo?: types.UserInfo;
+  // TODO
+  // onNewNotebookClicked?: () => void;
+  onClick?: (nbId: string) => void;
+}
+
+export interface RecentState {}
+
+export class Recent extends Component<RecentProps, RecentState> {
+  onClick(nbId: string) {
+    if (this.props.onClick) this.props.onClick(nbId);
+  }
+
+  render() {
+    let profileLinkEl = null;
+    if (this.props.userInfo) {
+      // TODO This is ugly - we're reusing most-recent-header just to get a line
+      // break between the link to "Your Notebooks" and "Most Recent".
+      profileLinkEl = (
+        <div class="most-recent-header">
+          <h2>{profileLink(this.props.userInfo, "Your Notebooks")}</h2>
+        </div>
+      );
+    }
+
+    return (
+      <div class="nb-listing">
+        {profileLinkEl}
+        <div class="nb-listing-header">
+          <div class="nb-listing-header-title">
+            <h2>Recently Updated</h2>
+          </div>
+          <div class="nb-listing-header-cta">{newNotebookButton()}</div>
+        </div>
+        <NotebookList
+          showTitle={ true }
+          notebooks={ this.props.mostRecent }
+          onClick={ this.onClick.bind(this) }
+        />
+      </div>
+    );
+ }
+}

src/main.scss

@@ -640,7 +640,7 @@ header {
   margin: 0 auto $size3 auto;
 }
 
-.most-recent {
+.nb-listing {
   margin: 0 auto;
   padding: 0 8px;
 }
@@ -690,14 +690,14 @@ ol.notebooks-list {
   }
 }
 
-.most-recent-header {
+.nb-listing-header {
   display: grid;
   grid-template-columns: auto auto;
   justify-content: space-between;
   max-width: 960px;
   margin: 0 auto;
 
-  .most-recent-header-cta {
+  .nb-listing-header-cta {
     display: grid;
     align-content: center;
 
@@ -707,7 +707,7 @@ ol.notebooks-list {
   }
 }
 
-.most-recent-header-title {
+.nb-listing-header-title {
   display: flex;
 }
 
@@ -758,7 +758,7 @@ ol.notebooks-list {
 
 // Mobile first. No desktop related things above this line.
 @media (max-width: 1100px) {
-  .most-recent {
+  .nb-listing {
     max-width: 640px;
   }
 }

src/nb_test.ts

@@ -165,18 +165,24 @@ testBrowser(async function notebook_urlImport() {
   const { notebookRef } = await renderAnonNotebook();
   const testdataUrl = `${location.origin}/static/testdata`;
 
-  const cell1 = await notebookRef.insertCell(1, `
+  const cell1 = await notebookRef.insertCell(
+    1,
+    `
     import { assert, assertEqual } from "test_internals";
     import * as vegalite from "${testdataUrl}/[email protected]";
     import * as tf from "${testdataUrl}/[email protected]";
     assertEqual(typeof vegalite.compile, "function");
     const t = tf.ones([5, 5]);
-    assertEqual(t.shape, [5, 5])`);
+    assertEqual(t.shape, [5, 5])`
+  );
   await notebookRef.onRun(cell1);
 
-  const cell2 = await notebookRef.insertCell(2, `
+  const cell2 = await notebookRef.insertCell(
+    2,
+    `
     import * as tf2 from "${testdataUrl}/[email protected]";
-    assertEqual(tf, tf2);`);
+    assertEqual(tf, tf2);`
+  );
   await notebookRef.onRun(cell2);
 });