From 0fa1e11ac7d325994e6de14e7af8f27c517f4283 Mon Sep 17 00:00:00 2001
From: emizzle <ericmastro@status.im>
Date: Thu, 4 Oct 2018 21:59:06 +1000
Subject: [PATCH] Fixed issue with compounding duplicated logs

On every load of the component, the API request would fetch the entire log history, and effective append it to the list of process logs, so that if a component was loaded multiple times (ie click to different tab, then back to home), the log would be duplicated.

This was solved by timestamping and labelling each fetch response, then getting the latest response in the selector, and filtering by process name in the component.
---
 embark-ui/src/actions/index.js      | 14 +++++++++++++-
 embark-ui/src/components/Console.js | 17 ++++++++++++-----
 embark-ui/src/reducers/selectors.js | 10 +++++++++-
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js
index 4fb6b2c61..1b49e1537 100644
--- a/embark-ui/src/actions/index.js
+++ b/embark-ui/src/actions/index.js
@@ -100,7 +100,19 @@ export const commands = {
 export const PROCESS_LOGS = createRequestTypes('PROCESS_LOGS');
 export const processLogs = {
   request: (processName) => action(PROCESS_LOGS[REQUEST], {processName}),
-  success: (processLogs) => action(PROCESS_LOGS[SUCCESS], {processLogs}),
+  success: (processLogs, payload) => {
+    return action(PROCESS_LOGS[SUCCESS],
+      { 
+        processLogs:  [
+          {
+            process: payload.processName,
+            timestamp: new Date().getTime(),
+            logs: processLogs
+          }
+        ]
+      }
+    );
+  },
   failure: (error) => action(PROCESS_LOGS[FAILURE], {error})
 };
 
diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js
index dcf6c0df4..ce012b6b6 100644
--- a/embark-ui/src/components/Console.js
+++ b/embark-ui/src/components/Console.js
@@ -31,6 +31,16 @@ class Console extends Component {
     this.setState({value: event.target.value});
   }
 
+  getProcessLogs(processName){
+    const log = this.props.processLogs
+      .reverse()
+      .filter((item) => item.process === processName);
+
+    if(!log.length) return [];
+    //should be only one item in the array
+    return log[0].logs;
+  }
+
   renderCommandsResult(){
     const {commands} = this.props;
     return (
@@ -42,7 +52,7 @@ class Console extends Component {
   }
 
   renderTabs() {
-    const {processLogs, processes} = this.props;
+    const {processes} = this.props;
     return processes
       .sort((a, b) => { // ensure the "Embark" tab is displayed first
         if (a.name === this.DEFAULT_PROCESS) return -1;
@@ -53,10 +63,7 @@ class Console extends Component {
         <Tab title={process.name} key={process.name} onClick={(e, x) => this.clickTab(e, x)}>
           <Logs>
             {
-              processLogs
-                .reverse()
-                .filter((item) => item.name === process.name)
-                .sort((a, b) => a.timestamp - b.timestamp)
+              this.getProcessLogs(process.name)
                 .map((item, i) => <p key={i} className={item.logLevel}
                                     dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
             }
diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js
index dad78cfd7..3c170e564 100644
--- a/embark-ui/src/reducers/selectors.js
+++ b/embark-ui/src/reducers/selectors.js
@@ -53,7 +53,15 @@ export function getProcesses(state) {
 }
 
 export function getProcessLogs(state) {
-  return state.entities.processLogs;
+  if(!state.entities.processLogs.length) return [];
+  const processLogsObj = state.entities.processLogs.reduce((processLogs, processLog) => {
+    const existingProcessLog = processLogs[processLog.process];
+    if(!existingProcessLog || processLog.timestamp > existingProcessLog.timestamp){
+      processLogs[processLog.process] = processLog;
+    }
+    return processLogs;
+  }, {});
+  return Object.values(processLogsObj);
 }
 
 export function getContractLogsByContract(state, contractName) {