fix(@embark/cockpit): fix console not rendering with ganache and not …

…showing blockchain when removing the data-wrapper
embarklabs · Apr 2, 2020 · aef50ab · aef50ab
1 parent 1a61bc6
commit aef50ab
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 21 deletions.
diff --git a/packages/cockpit/ui/src/components/Console.js b/packages/cockpit/ui/src/components/Console.js
@@ -16,11 +16,29 @@ const convert = new Convert({newline: true, escapeXML: true});
 class Console extends Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      value: '',
+      isLoading: true,
+      options: [],
+      activeTab: EMBARK_PROCESS_NAME,
+      processes: this.getProcesses()
+    };
+  }
+
+  getProcesses() {
     // Add embark to the start of the list
-    this.processes = [...props.processes];
-    this.processes.unshift({name: 'embark', state: 'running'});
+    const processes = [...this.props.processes];
+    processes.unshift({name: 'embark', state: 'running'});
+    return processes;
+  }
 
-    this.state = {value: '', isLoading: true, options: [], activeTab: EMBARK_PROCESS_NAME};
+  componentDidUpdate(prevProps) {
+    if (prevProps.processes.length !== this.props.processes.length) {
+      this.setState({
+        processes: this.getProcesses()
+      });
+    }
   }
 
   handleSubmit(event) {
@@ -52,7 +70,7 @@ class Console extends Component {
   renderNav() {
     return (
       <Nav tabs>
-        {this.processes.map((process) => (
+        {this.state.processes.map((process) => (
           <NavItem key={process.name}>
             <NavLink
               className={classnames({ active: this.state.activeTab === process.name })}
@@ -90,7 +108,7 @@ class Console extends Component {
 
     return (
       <TabContent activeTab={this.state.activeTab}>
-        {this.processes.map(process => (
+        {this.state.processes.map(process => (
           <TabPane key={process.name} tabId={process.name}>
             <Logs>
               {processLogs

diff --git a/packages/cockpit/ui/src/containers/HomeContainer.js b/packages/cockpit/ui/src/containers/HomeContainer.js
@@ -48,26 +48,25 @@ class HomeContainer extends Component {
   }
 
   render() {
+    const {processes, postCommand, postCommandSuggestions, processLogs, commandSuggestions} = this.props;
     return (
       <React.Fragment>
         <PageHead title="Dashboard" description="Overview of available services and logs. Interact with Embark using the console. Summary of deployed contracts." />
         <ServicesContainer />
 
-        <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes, postCommand, postCommandSuggestions, processLogs, commandSuggestions}) => (
-          <Card>
-            <CardBody>
-              <CardTitle>Console</CardTitle>
-              <Console activeProcess={this.state.activeProcess}
-                       postCommand={postCommand}
-                       postCommandSuggestions={postCommandSuggestions}
-                       processes={processes}
-                       processLogs={processLogs}
-                       commandSuggestions={commandSuggestions}
-                       isEmbark={() => this.isEmbark}
-                       updateTab={processName => this.updateTab(processName)} />
-            </CardBody>
-          </Card>
-        )} />
+        <Card>
+          <CardBody>
+            <CardTitle>Console</CardTitle>
+            <Console activeProcess={this.state.activeProcess}
+                     postCommand={postCommand}
+                     postCommandSuggestions={postCommandSuggestions}
+                     processes={processes}
+                     processLogs={processLogs}
+                     commandSuggestions={commandSuggestions}
+                     isEmbark={() => this.isEmbark}
+                     updateTab={processName => this.updateTab(processName)} />
+          </CardBody>
+        </Card>
 
         <Card>
           <CardBody>

diff --git a/packages/cockpit/ui/src/sagas/index.js b/packages/cockpit/ui/src/sagas/index.js
@@ -150,7 +150,7 @@ export function *watchFetchProcesses() {
 }
 
 export function *watchFetchServices() {
-  yield takeLatest(actions.PROCESSES[actions.REQUEST], fetchServices);
+  yield takeLatest(actions.SERVICES[actions.REQUEST], fetchServices);
 }
 
 export function *watchPostCommand() {