From 2a4bc2af891f39a47ea677d7abe1e0048e52bbf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 23 Sep 2015 15:16:46 +0200
Subject: [PATCH] separate contract settings from account settings

---
 .../ascribe_settings/contract_settings.js     | 180 +++++++++---------
 .../ascribe_settings/settings_container.js    |   1 -
 js/components/header.js                       |  14 +-
 .../whitelabel/wallet/wallet_routes.js        |   4 +-
 js/routes.js                                  |   2 +
 5 files changed, 111 insertions(+), 90 deletions(-)

diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index d0ded734..2ef600f0 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -8,6 +8,9 @@ import CreateContractForm from '../ascribe_forms/form_create_contract';
 import ContractListStore from '../../stores/contract_list_store';
 import ContractListActions from '../../actions/contract_list_actions';
 
+import UserStore from '../../stores/user_store';
+import UserActions from '../../actions/user_actions';
+
 import ActionPanel from '../ascribe_panel/action_panel';
 import ContractSettingsUpdateButton from './contract_settings_update_button';
 
@@ -17,24 +20,27 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
+import { mergeOptions } from '../../utils/general_utils';
 
 
 let ContractSettings = React.createClass({
-    propTypes: {
-        currentUser: React.PropTypes.object,
-        defaultExpanded: React.PropTypes.bool
-    },
-
     getInitialState(){
-        return ContractListStore.getState();
+        return mergeOptions(
+            ContractListStore.getState(),
+            UserStore.getState()
+        );
     },
 
     componentDidMount() {
         ContractListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
         ContractListActions.fetchContractList(true);
     },
 
     componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
         ContractListStore.unlisten(this.onChange);
     },
 
@@ -82,86 +88,88 @@ let ContractSettings = React.createClass({
         }
 
         return (
-            <AclProxy
-                aclName="acl_view_settings_contract"
-                aclObject={this.props.currentUser.acl}>
-                <CollapsibleParagraph
-                    title={getLangText('Contracts')}
-                    show={true}
-                    defaultExpanded={false}>
-                    <AclProxy
-                        aclName="acl_edit_public_contract"
-                        aclObject={this.props.currentUser.acl}>
-                        <div>
-                            {createPublicContractForm}
-                            {publicContracts.map((contract, i) => {
-                                return (
-                                    <ActionPanel
-                                        key={i}
-                                        title={contract.name}
-                                        content={contract.name}
-                                        buttons={
-                                            <div className="pull-right">
-                                                <ContractSettingsUpdateButton contract={contract}/>
-                                                <a
-                                                    className="btn btn-default btn-sm margin-left-2px"
-                                                    href={contract.blob.url_safe}
-                                                    target="_blank">
-                                                    {getLangText('PREVIEW')}
-                                                </a>
-                                                <button
-                                                    className="btn btn-danger btn-sm margin-left-2px"
-                                                    onClick={this.removeContract(contract)}>
-                                                    {getLangText('REMOVE')}
-                                                </button>
-                                           </div>
-                                        }
-                                        leftColumnWidth="40%"
-                                        rightColumnWidth="60%"/>
-                                );
-                            })}
-                        </div>
-                    </AclProxy>
-                    <AclProxy
-                        aclName="acl_edit_private_contract"
-                        aclObject={this.props.currentUser.acl}>
-                        <div>
-                            <CreateContractForm
-                            isPublic={false}
-                            fileClassToUpload={{
-                                singular: getLangText('new contract'),
-                                plural: getLangText('new contracts')
-                            }}/>
-                            {privateContracts.map((contract, i) => {
-                                return (
-                                    <ActionPanel
-                                        key={i}
-                                        title={contract.name}
-                                        content={contract.name}
-                                        buttons={
-                                            <div className="pull-right">
-                                               <ContractSettingsUpdateButton contract={contract} />
-                                                <a
-                                                    className="btn btn-default btn-sm margin-left-2px"
-                                                    href={contract.blob.url_safe}
-                                                    target="_blank">
-                                                    {getLangText('PREVIEW')}
-                                               </a>
-                                                <button
-                                                    className="btn btn-danger btn-sm margin-left-2px"
-                                                    onClick={this.removeContract(contract)}>
-                                                    {getLangText('REMOVE')}
-                                                </button>
-                                           </div>
-                                       }
-                                       leftColumnWidth="40%"
-                                       rightColumnWidth="60%"/>
-                                );
-                            })}
-                        </div>
-                    </AclProxy>
-                </CollapsibleParagraph>
-            </AclProxy>
+            <div className="settings-container">
+                <AclProxy
+                    aclName="acl_view_settings_contract"
+                    aclObject={this.state.currentUser.acl}>
+                    <CollapsibleParagraph
+                        title={getLangText('Contracts')}
+                        show={true}
+                        defaultExpanded={true}>
+                        <AclProxy
+                            aclName="acl_edit_public_contract"
+                            aclObject={this.state.currentUser.acl}>
+                            <div>
+                                {createPublicContractForm}
+                                {publicContracts.map((contract, i) => {
+                                    return (
+                                        <ActionPanel
+                                            key={i}
+                                            title={contract.name}
+                                            content={contract.name}
+                                            buttons={
+                                                <div className="pull-right">
+                                                    <ContractSettingsUpdateButton contract={contract}/>
+                                                    <a
+                                                        className="btn btn-default btn-sm margin-left-2px"
+                                                        href={contract.blob.url_safe}
+                                                        target="_blank">
+                                                        {getLangText('PREVIEW')}
+                                                    </a>
+                                                    <button
+                                                        className="btn btn-danger btn-sm margin-left-2px"
+                                                        onClick={this.removeContract(contract)}>
+                                                        {getLangText('REMOVE')}
+                                                    </button>
+                                               </div>
+                                            }
+                                            leftColumnWidth="40%"
+                                            rightColumnWidth="60%"/>
+                                    );
+                                })}
+                            </div>
+                        </AclProxy>
+                        <AclProxy
+                            aclName="acl_edit_private_contract"
+                            aclObject={this.state.currentUser.acl}>
+                            <div>
+                                <CreateContractForm
+                                isPublic={false}
+                                fileClassToUpload={{
+                                    singular: getLangText('new contract'),
+                                    plural: getLangText('new contracts')
+                                }}/>
+                                {privateContracts.map((contract, i) => {
+                                    return (
+                                        <ActionPanel
+                                            key={i}
+                                            title={contract.name}
+                                            content={contract.name}
+                                            buttons={
+                                                <div className="pull-right">
+                                                   <ContractSettingsUpdateButton contract={contract} />
+                                                    <a
+                                                        className="btn btn-default btn-sm margin-left-2px"
+                                                        href={contract.blob.url_safe}
+                                                        target="_blank">
+                                                        {getLangText('PREVIEW')}
+                                                   </a>
+                                                    <button
+                                                        className="btn btn-danger btn-sm margin-left-2px"
+                                                        onClick={this.removeContract(contract)}>
+                                                        {getLangText('REMOVE')}
+                                                    </button>
+                                               </div>
+                                           }
+                                           leftColumnWidth="40%"
+                                           rightColumnWidth="60%"/>
+                                    );
+                                })}
+                            </div>
+                        </AclProxy>
+                    </CollapsibleParagraph>
+                </AclProxy>
+            </div>
         );
     }
 });
diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js
index 2b3dc6a7..12c406ad 100644
--- a/js/components/ascribe_settings/settings_container.js
+++ b/js/components/ascribe_settings/settings_container.js
@@ -50,7 +50,6 @@ let SettingsContainer = React.createClass({
                     {this.props.children}
                     <APISettings />
                     <BitcoinWalletSettings />
-                    <ContractSettings currentUser={this.state.currentUser} loadUser={this.loadUser}/>
                 </div>
             );
         }
diff --git a/js/components/header.js b/js/components/header.js
index 0309b748..307ba663 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -3,7 +3,6 @@
 import React from 'react';
 import Router from 'react-router';
 
-
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@@ -12,6 +11,8 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
 import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
 import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
 
+import AclProxy from './acl_proxy';
+
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
@@ -96,7 +97,7 @@ let Header = React.createClass({
         }
     },
 
-    onMenuItemClick(event) {
+    onMenuItemClick() {
         /*
         This is a hack to make the dropdown close after clicking on an item
         The function just need to be defined
@@ -137,6 +138,15 @@ let Header = React.createClass({
                         onClick={this.onMenuItemClick}>
                         {getLangText('Account Settings')}
                     </MenuItemLink>
+                    <AclProxy
+                        aclObject={this.state.whitelabel}
+                        aclName="acl_view_settings_contract">
+                        <MenuItemLink
+                            to="contract_settings"
+                            onClick={this.onMenuItemClick}>
+                            {getLangText('Contract Settings')}
+                        </MenuItemLink>
+                    </AclProxy>
                     <MenuItem divider />
                     <MenuItemLink eventKey="3" to="logout">{getLangText('Log out')}</MenuItemLink>
                 </DropdownButton>
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index 075901bd..43b983aa 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -12,7 +12,7 @@ import PieceList from '../../../components/piece_list';
 import PieceContainer from '../../../components/ascribe_detail/piece_container';
 import EditionContainer from '../../../components/ascribe_detail/edition_container';
 import SettingsContainer from '../../../components/ascribe_settings/settings_container';
-import RegisterPiece from '../../../components/register_piece';
+import ContractSettings from '../../../components/ascribe_settings/contract_settings';
 
 import CylandLanding from './components/cyland/cyland_landing';
 import CylandPieceContainer from './components/cyland/ascribe_detail/cyland_piece_container';
@@ -49,6 +49,7 @@ let ROUTES = {
             <Route name="piece" path="pieces/:pieceId" handler={CylandPieceContainer} />
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
             <Route name="settings" path="settings" handler={SettingsContainer} />
+            <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
         </Route>
     ),
     'cc': (
@@ -79,6 +80,7 @@ let ROUTES = {
             <Route name="piece" path="pieces/:pieceId" handler={IkonotvPieceContainer} />
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
             <Route name="settings" path="settings" handler={SettingsContainer} />
+            <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
             <Route name="contract_notifications" path="contract_notifications" handler={IkonotvContractNotifications} />
         </Route>
     )
diff --git a/js/routes.js b/js/routes.js
index 1d521cab..7a869f41 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -17,6 +17,7 @@ import LogoutContainer from './components/logout_container';
 import SignupContainer from './components/signup_container';
 import PasswordResetContainer from './components/password_reset_container';
 
+import ContractSettings from './components/ascribe_settings/contract_settings';
 import SettingsContainer from './components/ascribe_settings/settings_container';
 import CoaVerifyContainer from './components/coa_verify_container';
 
@@ -43,6 +44,7 @@ const COMMON_ROUTES = (
         <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
         <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
         <Route name="settings" path="settings" handler={SettingsContainer} />
+        <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
         <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
         <Route name="contract_notifications" path="verify" handler={ContractNotification} />
     </Route>