From f5356007d396350dc9cf876c1b5ff99ba0c2a467 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Tue, 17 Sep 2019 21:32:54 +0200
Subject: [PATCH] Enable collection and sketch to be created from dashboard
 page

---
 client/modules/User/pages/DashboardView.jsx   | 27 +++++++++++++++----
 .../styles/components/_dashboard-header.scss  | 11 ++++++++
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index 0993696f..9ed71e91 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { browserHistory } from 'react-router';
-
+import { browserHistory, Link } from 'react-router';
 import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
 import Nav from '../../../components/Nav';
 
@@ -61,6 +60,22 @@ class DashboardView extends React.Component {
     return this.props.user.username === this.props.params.username;
   }
 
+  renderActionButton(tabKey, username) {
+    if (!this.isOwner()) {
+      return null;
+    }
+
+    switch (tabKey) {
+      case TabKey.assets:
+        return null;
+      case TabKey.collections:
+        return <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
+      case TabKey.sketches:
+      default:
+        return <Link className="dashboard__action-button" to="/">New sketch</Link>;
+    }
+  }
+
   renderContent(tabKey, username) {
     switch (tabKey) {
       case TabKey.assets:
@@ -85,9 +100,11 @@ class DashboardView extends React.Component {
         <section className="dashboard-header">
           <div className="dashboard-header__header">
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
-
-            <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
-            { currentTab === TabKey.sketches && <Searchbar /> }
+            <div className="dashboard-header__actions">
+              <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+              {currentTab === TabKey.sketches && <Searchbar />}
+              {this.renderActionButton(currentTab, username)}
+            </div>
           </div>
 
           <div className="dashboard-content">
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
index b5661776..f1b1e986 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/client/styles/components/_dashboard-header.scss
@@ -50,3 +50,14 @@
   font-weight: bold;
   margin: 0;
 }
+
+.dashboard-header__actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dashboard__action-button {
+  flex-grow: 0;
+  @extend %button;
+}