From a93ac485879a629c6b20ff36e7271426b24b7113 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   | 24 +++++++++++++++++--
 .../styles/components/_dashboard-header.scss  | 11 +++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index 3b6344b0..3713b1ee 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -2,7 +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 { Helmet } from 'react-helmet';
 import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
 import NavBasic from '../../../components/NavBasic';
@@ -60,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:
@@ -89,7 +105,11 @@ class DashboardView extends React.Component {
           <div className="dashboard-header__header">
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
 
-            <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+            <div className="dashboard-header__actions">
+              <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+              {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 0d5d1898..5ffe6d60 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/client/styles/components/_dashboard-header.scss
@@ -55,3 +55,14 @@
 .dashboard-header__tab__title {
   margin: 0;
 }
+
+.dashboard-header__actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dashboard__action-button {
+  flex-grow: 0;
+  @extend %button;
+}