kia delete all browser/chrome things plz (#27)

* adding styling * Delete manifest.json * Delete bundle.js

Author: murphybrandon

.DS_Store

@@ -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/App.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/Actions/ActionsDisplay.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/DetailsNav.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/Effects/EffectsDisplay.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/DetailCards/State/StateDisplay.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/EventsDisplay.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/components/EventCards/FilterBar.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}
- />
  </>
  );
  }