[#1804] show pop-up without changing the route

Author: Ajaya1000

client/modules/User/pages/DashboardView.jsx

@@ -30,6 +30,10 @@ class DashboardView extends React.Component {
     super(props);
     this.closeAccountPage = this.closeAccountPage.bind(this);
     this.gotoHomePage = this.gotoHomePage.bind(this);
+    this.toggleCollectionCreate = this.toggleCollectionCreate.bind(this);
+    this.state = {
+      isCollectionCreate: false
+    };
   }
 
   componentDidMount() {
@@ -68,15 +72,13 @@ class DashboardView extends React.Component {
     return this.props.user.username === this.props.params.username;
   }
 
-  isCollectionCreate() {
-    const path = this.props.location.pathname;
-    return /collections\/create$/.test(path);
+  toggleCollectionCreate() {
+    console.log('toggle called', this.state);
+    this.setState((prevState) => ({
+      isCollectionCreate: !prevState.isCollectionCreate
+    }));
   }
 
-  returnToDashboard = () => {
-    browserHistory.push(`/${this.ownerName()}/collections`);
-  };
-
   renderActionButton(tabKey, username, t) {
     switch (tabKey) {
       case TabKey.assets:
@@ -85,7 +87,7 @@ class DashboardView extends React.Component {
         return (
           this.isOwner() && (
             <React.Fragment>
-              <Button to={`/${username}/collections/create`}>
+              <Button onClick={this.toggleCollectionCreate}>
                 {t('DashboardView.CreateCollection')}
               </Button>
               <CollectionSearchbar />
@@ -148,10 +150,10 @@ class DashboardView extends React.Component {
             {this.renderContent(currentTab, username)}
           </div>
         </main>
-        {this.isCollectionCreate() && (
+        {this.state.isCollectionCreate && (
           <Overlay
             title={this.props.t('DashboardView.CreateCollectionOverlay')}
-            closeOverlay={this.returnToDashboard}
+            closeOverlay={this.toggleCollectionCreate}
           >
             <CollectionCreate />
           </Overlay>