Allow users to create/view their own collections

Closes hyperledger-archives#41.

Signed-off-by: Robin Kim <therobinkim@gmail.com>

code/part-two/client/source/App.jsx

@@ -14,9 +14,9 @@ export class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      privateKey: this.props.privateKey,
-      publicKey: this.props.publicKey
-    }
+      privateKey: localStorage.getItem('privateKey') || null,
+      publicKey: localStorage.getItem('publicKey') || null
+    };
   }
 
   set privateKey(key) {
@@ -55,6 +55,7 @@ export class App extends React.Component {
         <nav>
           <Link to="/">Home</Link>&ensp;
           <Link to="/signup-login">Sign Up/Login</Link>&ensp;
+          <Link to={'/collection/' + this.state.publicKey}>Your Collection</Link>&ensp;
           <Link to="/collection">View Collections</Link>&ensp;
           <Link to="/offer">View Offers</Link>&ensp;
 
@@ -89,7 +90,13 @@ export class App extends React.Component {
           <Route
             exact
             path="/collection/:publicKey"
-            component={Collection}
+            render={(props) => (
+              <Collection
+                {...props}
+                privateKey={this.state.privateKey}
+                publicKey={this.state.publicKey}
+              />
+            )}
           />
           <Route
             exact

code/part-two/client/source/Collection.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { MojiItem } from './MojiItem';
-import { getCollections } from './services/requests';
+import { getCollections, submitPayloads } from './services/requests';
 
 export class Collection extends React.Component {
   constructor(props) {
@@ -10,6 +10,7 @@ export class Collection extends React.Component {
       publicKey: null,
       collection: null
     };
+    this.createCollection = this.createCollection.bind(this);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -42,13 +43,34 @@ export class Collection extends React.Component {
       });
   }
 
+  createCollection() {
+    submitPayloads(this.props.privateKey, { action: 'CREATE_COLLECTION' })
+      .then(() => {
+        window.location.reload();
+      })
+      .catch(err => {
+        console.error(err);
+        alert('Something went horribly wrong!');
+      });
+  }
+
   render() {
     console.log('RENDERING: <Collection />');
     const { publicKey, collection } = this.state;
     if (!collection) {
       return (
         <div>
-          We can't find anything for a collection at <code>{publicKey}</code>!
+          We can't find a collection for public key <code>{publicKey}</code>!
+          <br /><br />
+          { // if user is trying to view their non-existing collection
+            this.props.publicKey === publicKey && (
+              <span>
+                If you are logged in as the owner of this collection and would
+                like to create a new collection, please click {' '}
+                <a href="#" onClick={this.createCollection}>here</a>!
+              </span>
+            )
+          }
         </div>
       );
     }