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

@@ -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})
 };
 

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>)
             }

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) {