kia delete all browser/chrome things plz

src/app/components/App.jsx

@@ -9,6 +9,9 @@ import TimeSlider from '../container/TimeSlider.jsx';
 import Events from '../container/Events.jsx';
 import Details from '../container/Details.jsx';
 
+// styled components
+import { Wrapper } from '../styles/SplitPane.jsx';
+
 // import from styled components to create global styles
 const GlobalStyle = createGlobalStyle`
   html {
@@ -37,9 +40,10 @@ class App extends Component {
 
     this.state = {
       data: [],
+      searchField: '',
+      filteredData: [],
       isPlaying: false,
       isRecording: false,
-      isSearching: false,
       isPlayingIndex: 0,
     };
 
@@ -55,6 +59,11 @@ class App extends Component {
   }
 
   componentDidMount() {
+    // *******************************************************
+    // need to impletement setState for filteredData to same value as data
+    // this.setState({ data, filteredData: data });
+    // *******************************************************
+
     // adds listener to the effects that are gonna be sent from
     // our edited useReducer from the 'react' library.
     chrome.runtime.onConnect.addListener((portFromExtension) => {
@@ -79,7 +88,6 @@ class App extends Component {
       this.setState({ isPlayingIndex: 0 });
     }
 
-    console.log('isplaying');
     let { isPlaying } = this.state;
     isPlaying = !isPlaying;
     this.setState({ isPlaying });
@@ -130,10 +138,21 @@ class App extends Component {
   }
 
   // filter search bar results
-  // *** NOT FINISHED ***
   searchChange(e) {
     const { data } = this.state;
-    console.log(data);
+
+    // grab user entry from filter bar
+    const compareSearchValue = e.target.value;
+
+    // set state with compare value
+    this.setState({ searchField: compareSearchValue })
+
+    // match results from our filter entry to data
+    const actions = data.filter(function(item) {
+      const type = item.action.type.toLowerCase();
+      return type.includes(compareSearchValue.toLowerCase());
+    });
+    this.setState({ filteredData: actions });
   }
 
   // time travel bar change
@@ -178,42 +197,45 @@ class App extends Component {
       isPlaying,
       setIsRecording,
       isRecording,
+      filteredData,
     } = this.state;
 
     return (
       <>
         <GlobalStyle />
-        <SplitPane
-          left={
-            (
-              <Events
-                data={data} 
-                addAction={this.addActionToView}
-                toTheFuture={this.toTheFuture}
-                toThePast={this.toThePast}
-                activeEventId={id}
-              />
-            )}
-          right={
-            (
-              <Details
-                action={action}
-                id={id}
-                actionState={state}
-              />
-            )}
-        />
-        <TimeSlider
-          data={data}
-          toTheFuture={this.toTheFuture}
-          toThePast={this.toThePast}
-          isPlaying={isPlaying}
-          isPlayingIndex={this.state.isPlayingIndex}
-          isRecording={isRecording}
-          setIsPlaying={this.setIsPlaying}
-          setIsRecording={this.setIsRecording}
-          handleBarChange={this.handleBarChange}
-        />
+        <Wrapper>
+          <SplitPane
+            left={
+              (
+                <Events
+                  data={data}
+                  addAction={this.addActionToView}
+                  activeEventId={id}
+                  searchChange={this.searchChange}
+                  filteredData={filteredData}
+                />
+              )}
+            right={
+              (
+                <Details
+                  action={action}
+                  id={id}
+                  actionState={state}
+                />
+              )}
+          />
+          <TimeSlider
+            data={data}
+            toTheFuture={this.toTheFuture}
+            toThePast={this.toThePast}
+            isPlaying={isPlaying}
+            isPlayingIndex={this.state.isPlayingIndex}
+            isRecording={isRecording}
+            setIsPlaying={this.setIsPlaying}
+            setIsRecording={this.setIsRecording}
+            handleBarChange={this.handleBarChange}
+          />
+        </Wrapper>
       </>
     );
   }

src/app/components/DetailCards/Actions/ActionsDisplay.jsx

@@ -1,15 +1,18 @@
 import React from 'react';
 
+//styled components
+import { DetailsWrapper } from '../../../styles/Details.jsx';
+
 export default function Actions(props) {
   // renders action information
   const { action } = props;
   return (
-    <>
+    <DetailsWrapper>
       action:
       {(action && action.type) || 'select an event'}
       <br></br>
       payload:
       {(action && action.payload) || 'select an event'}
-    </>
+    </DetailsWrapper>
   );
 }

src/app/components/DetailCards/DetailsNav.jsx

@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
 
-var Link = require('react-router-dom').Link;
-var NavLink = require('react-router-dom').NavLink;
-//styled component imports
-import { Buttons, Button, DetailsNavWrapper, Ul } from '../../styles/Nav.jsx';
+let NavLink = require('react-router-dom').NavLink;
+
+// styled component imports
+import { Buttons, Button, DetailsNavWrapper } from '../../styles/Nav.jsx';
 
 
 export default function RightNav(props) {
   return (
     <>
       <DetailsNavWrapper>
         <Buttons>
-          <NavLink activeClassName='active' to='/'>
+          <NavLink exact activeClassName='active' to='/'>
             <Button>actions</Button>
           </NavLink>
           <NavLink activeClassName='active' to='/effects'>

src/app/components/DetailCards/Effects/EffectsDisplay.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { DetailsWrapper } from '../../../styles/Details.jsx';
 
 export default function Effects(props) {
   return (
-    <div>effects display page</div>
+    <DetailsWrapper>effects display page</DetailsWrapper>
   );
 }

src/app/components/DetailCards/State/StateDisplay.jsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import StateCard from './StateCard.jsx';
 
+// styled component
+import { DetailsWrapper } from '../../../styles/Details.jsx';
+
 export default function State(props) {
   // stringifying data to pass down to StateCard to display
   const { actionState } = props;
   const stringData = JSON.stringify(actionState, null, '\t');
 
   return (
-    <>
+    <DetailsWrapper>
       {<StateCard stringData={stringData} />}
-    </>
+    </DetailsWrapper>
   );
 }

src/app/components/EventCards/EventsDisplay.jsx

@@ -7,10 +7,13 @@ import EventCreator from './EventCreator.jsx';
 import { EventsWrapper } from '../../styles/Events.jsx';
 
 export default function Events(props) {
-  const { data, activeEventId } = props;
+  const { data,
+    activeEventId,
+    filteredData,
+  } = props;
   return (
     <EventsWrapper>
-      {data.map((e, i) => (
+      {filteredData.map((e, i) => (
         <EventCreator
           selectedEvent={activeEventId === e.id ? 'true' : 'false'}
           action={e.action.type}

src/app/components/EventCards/FilterBar.jsx

@@ -1,15 +1,23 @@
 import React from 'react';
 
+
+// styled components
+import { FilterWrapper } from '../../styles/FilterBar.jsx';
+
 export default function FilterBar(props) {
   const {
-    searchChange,
+    searchChange
   } = props;
 
   return (
-    <input
-      type="text"
-      placeholder="filter"
-      onChange={searchChange}
-    />
+    <>
+      <FilterWrapper>
+        <input
+          type="text"
+          placeholder="filter actions by name..."
+          onChange={searchChange}
+        />
+      </FilterWrapper>
+    </>
   );
 }

src/app/container/Events.jsx

@@ -3,7 +3,7 @@ import React, { useContext, useState, Component} from 'react';
 // components
 import EventsNav from '../components/EventCards/EventsNav.jsx';
 import EventsDisplay from '../components/EventCards/EventsDisplay.jsx'
-import TimeTravel from '../components/EventCards/TimeTravel.jsx';
+import FilterBar from '../components/EventCards/FilterBar.jsx';
 
 class Events extends Component {
   constructor(props) {
@@ -16,21 +16,19 @@ class Events extends Component {
       activeEventId,
       addAction,
       data,
-      toTheFuture,
-      toThePast,
+      searchChange,
+      filteredData,
     } = this.props;
     return (
       <>
         <EventsNav />
+        <FilterBar searchChange={searchChange} />
         <EventsDisplay
           data={data}
+          filteredData={filteredData}
           addAction={addAction}
           activeEventId={activeEventId}
         />
-        <TimeTravel
-          toTheFuture={toTheFuture}
-          toThePast={toThePast}
-        />
       </>
     );
   }

src/app/container/TimeSlider.jsx

@@ -19,15 +19,15 @@ const TimeSlider = (props) => {
   } = props;
 
   return (
-    <>
       <SliderWrapper>
         <Button onClick={setIsRecording}>{isRecording ? 'PAUSE' : 'RECORD'}</Button>
+        <Button onClick={toTheFuture}>{">"}</Button>
+        <Button onClick={toThePast}> {"<"} </Button>
         <Button onClick={setIsPlaying}>{isPlaying ? '||' : '►'}</Button>
         <input type="range" min="0" max={data.length - 1} value={isPlayingIndex}
          onChange={handleBarChange} />
       </SliderWrapper>
-    </>
   );
 };
 
-export default TimeSlider;
+export default TimeSlider;

src/app/styles/Details.jsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const DetailsWrapper = styled.div`
+  padding-left: 10px;
+  padding-top: 10px;
+`;

src/app/styles/Events.jsx

@@ -2,10 +2,8 @@ import styled from 'styled-components';
 
 // the entire events display wrapper
 export const EventsWrapper = styled.div`
-  min-height: 100px;
-  max-height: 200px;
+  height: -webkit-fill-available;
   overflow: auto;
-  border-bottom: 1px solid white;
 `;
 
 // single event card
@@ -52,4 +50,4 @@ export const PrevNextButton = styled.div`
   background-color: ${props => props.selectedEvent === 'false' ? '#484C54' : "#3C444F"};
   color: ${props => props.selectedEvent === 'false' ? 'white' : "white"};
   border-radius: 5px;
-`;
+`;

src/app/styles/FilterBar.jsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const FilterWrapper = styled.div`
+  color: white;
+  border-bottom: 1px solid #484C54 ;
+  input[type=text]{
+    font-size: 12px;
+    width: 95%;
+    margin-left: 5%;
+    color: white;
+    background-color: transparent;
+    border: 0px solid #484C54;
+    height: 30px;
+  }
+
+  *:focus {
+    outline: none;
+}
+`;

src/app/styles/Nav.jsx

@@ -7,7 +7,7 @@ export const EventsNavWrapper = styled.div`
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 33px;
+  height: 35px;
   border-bottom: 1px solid #484C54;
   color: white;
 `;