Implement Profile component

Author: qti3e

src/common.tsx

@@ -138,3 +138,26 @@ export function profileLink(
 export function fmtDate(d: Date): string {
   return d.toISOString();
 }
+
+export function nbUrl(nbId: string): string {
+  // Careful, S3 is finicky about what URLs it serves. So
+  // /notebook?nbId=blah  will get redirect to /notebook/
+  // because it is a directory with an index.html in it.
+  const u = window.location.origin + "/notebook/?nbId=" + nbId;
+  return u;
+}
+
+export function newNotebookButton() {
+  return (
+    <button
+      class="create-notebook"
+      onClick={async () => {
+        // Redirect to new notebook.
+        const nbId = await db.active.create();
+        window.location.href = nbUrl(nbId);
+      }}
+    >
+      + New Notebook
+    </button>
+  );
+}

src/profile.tsx

@@ -0,0 +1,61 @@
+/*
+   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.
+ */
+
+/**
+ * This is where Profile component is defined.
+ * It can be used to render profile of a user.
+ */
+
+import { Component, h } from "preact";
+import { newNotebookButton, UserTitle } from "./common";
+import { NotebookList } from "./list";
+import * as types from "./types";
+
+export interface ProfileProps {
+  userInfo: types.UserInfo;
+  notebooks: types.NbInfo[];
+  onClick?: (nbId: string) => void;
+}
+
+export class Profile extends Component<ProfileProps, {}> {
+  onClick(nbId: string) {
+    if (this.props.onClick) this.props.onClick(nbId);
+  }
+
+  render() {
+    if (this.props.notebooks.length === 0) {
+      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">
+          <UserTitle userInfo={doc.owner} />
+          {newNotebookButton()}
+        </div>
+        <ol>
+          <NotebookList
+            showTitle={ true }
+            notebooks={ this.props.notebooks }
+            onClick={ this.onClick.bind(this) }
+          />
+        </ol>
+      </div>
+    );
+  }
+}