From 19ad229dbb1a96ce05285fd5891e4d95f1ab31c9 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Sat, 27 Oct 2018 12:42:57 +0200
Subject: [PATCH] refactor AsideContainer to remove duplication

---
 embark-ui/src/components/Explorer.css         |  5 --
 .../containers/TextEditorAsideContainer.js    | 86 +++++++++----------
 2 files changed, 41 insertions(+), 50 deletions(-)

diff --git a/embark-ui/src/components/Explorer.css b/embark-ui/src/components/Explorer.css
index 289a298b3..4aee49cd8 100644
--- a/embark-ui/src/components/Explorer.css
+++ b/embark-ui/src/components/Explorer.css
@@ -16,8 +16,3 @@
   width: 90%;
   display: inline-block;
 }
-
-#root .explorer-row .text-truncate {
-  width: 90%;
-  display: inline-block;
-}
diff --git a/embark-ui/src/containers/TextEditorAsideContainer.js b/embark-ui/src/containers/TextEditorAsideContainer.js
index 84456220d..798cbbe2a 100644
--- a/embark-ui/src/containers/TextEditorAsideContainer.js
+++ b/embark-ui/src/containers/TextEditorAsideContainer.js
@@ -16,58 +16,54 @@ class TextEditorAsideContainer extends Component {
     this.props.fetchContracts();
   }
 
-  render() {
-    switch(this.props.currentAsideTab) {
+  renderContent(contract, index) {
+    switch (this.props.currentAsideTab) {
       case 'browser':
-        return <Preview />;
+        return <Preview/>;
       case 'debugger':
-        return this.props.contracts.map((contract, index) => {
-          return (
-            <Card key={'contract-' + index}>
-              <CardBody>
-                <h2>{contract.className} - Details</h2>
-                <ContractDebuggerContainer key={index} contract={contract} />
-              </CardBody>
-            </Card>
-          );
-        });
+        return (
+          <React.Fragment>
+            <h2>{contract.className} - Details</h2>
+            <ContractDebuggerContainer key={index} contract={contract}/>
+          </React.Fragment>
+        );
       case 'detail':
-        return this.props.contracts.map((contract, index) => {
-          return (
-            <Card key={'contract-' + index}>
-              <CardBody>
-                <h2>{contract.className} - Details</h2>
-                <ContractDetail key={index} contract={contract} />
-              </CardBody>
-            </Card>
-          );
-        });
+        return (
+          <React.Fragment>
+            <h2>{contract.className} - Details</h2>
+            <ContractDetail key={index} contract={contract}/>
+          </React.Fragment>
+        );
       case 'logger':
-        return this.props.contracts.map((contract, index) => {
-          return (
-            <Card key={'contract-' + index}>
-              <CardBody>
-                <h2>{contract.className} - Transactions</h2>
-                <ContractLoggerContainer key={index} contract={contract} />)
-              </CardBody>
-            </Card>
-          );
-        });
+        return (
+          <React.Fragment>
+            <h2>{contract.className} - Transactions</h2>
+            <ContractLoggerContainer key={index} contract={contract}/>)
+          </React.Fragment>
+        );
       case 'overview':
-        return this.props.contracts.map((contract, index) => {
-          return (
-            <Card key={'contract-' + index}>
-              <CardBody>
-                <h2>{contract.className} - Overview</h2>
-                <ContractOverviewContainer key={index} contract={contract} />
-              </CardBody>
-            </Card>
-          );
-        });
+        return (
+          <React.Fragment>
+            <h2>{contract.className} - Overview</h2>
+            <ContractOverviewContainer key={index} contract={contract}/>
+          </React.Fragment>
+        );
       default:
-        return <React.Fragment></React.Fragment>;
+        return '';
     }
   }
+
+  render() {
+    return this.props.contracts.map((contract, index) => {
+      return (
+        <Card key={'contract-' + index}>
+          <CardBody>
+            {this.renderContent(contract, index)}
+          </CardBody>
+        </Card>
+      );
+    });
+  }
 }
 
 function mapStateToProps(state, props) {
@@ -88,5 +84,5 @@ export default connect(
   mapStateToProps,
   {
     fetchContracts: contractsAction.request
-  },
+  }
 )(TextEditorAsideContainer);