Data stays filtered after new actions get posted

Author: victorvrv

src/app/components/App.jsx

@@ -65,21 +65,31 @@ class App extends Component {
     // adds listener to the effects that are gonna be sent from
     // our edited useReducer from the 'react' library.
     chrome.runtime.onConnect.addListener((port) => {
-      if (port.name === 'injected-app') {
-        this.portToExtension = port;
-
-        port.onMessage.addListener((msg) => {
-          const newData = {
-            action: msg.action,
-            state: msg.state,
-            id: this.state.data.length,
-          };
-          this.setState((state) => ({
+      if (port.name !== 'injected-app') return;
+
+      this.portToExtension = port;
+
+      port.onMessage.addListener((msg) => {
+        const newData = {
+          action: msg.action,
+          state: msg.state,
+          id: this.state.data.length,
+        };
+
+        const { searchField } = this.state;
+        const newDataActionType = newData.action.type.toLowerCase();
+
+        if (newDataActionType.includes(searchField.toLowerCase())) {
+          this.setState(state => ({
             data: [...state.data, newData],
             filteredData: [...state.data, newData],
           }));
-        });
-      }
+        } else {
+          this.setState(state => ({
+            data: [...state.data, newData],
+          }));
+        }
+      });
     });
 
     // We listen to the message from devtools.js (sent originally from 
@@ -94,8 +104,6 @@ class App extends Component {
     });
   }
 
-
-
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
     if (this.state.isPlayingIndex > this.state.data.length - 1) {