got chat and event view working. perf is not really up to snuff.

app/components/EventsView/EmittersListHeader.js

@@ -17,10 +17,11 @@ const EmittersListHeader = (props) => {
       title="All Events"
       zDepth={0}
       iconElementLeft={<IconButton onTouchTap={props.handleDrawerOpen}><NavigationIcon /></IconButton>}
-      iconElementRight={<IconButton onTouchTap={props.parseAllLogs}><RefreshIcon /></IconButton>}
+
     />
   );
 };
-
+// Pulled from Appbar Removing parseAll for now
+// iconElementRight={<IconButton onTouchTap={props.parseAllLogs}><RefreshIcon /></IconButton>}
 export default EmittersListHeader;
 

app/components/EventsView/EventCards/ChatEventCard.js

@@ -10,6 +10,7 @@ import React, {
 import SteamAvatar from '../../common/SteamAvatar';
 import styled from 'styled-components';
 import Paper from 'material-ui/Paper';
+import format from 'date-fns/format'
 
 import {darkGrey, offWhite} from '../../../styles/colors';
 
@@ -21,7 +22,7 @@ const ChatEventCard = (props) => {
         steam={props.steam}
         size={60}
       />
-      <Time>{props.time}</Time>
+      <Time>{format(props.time, 'HH:mm:ss')}</Time>
       <Name>{props.name} - <Steam>{props.steam}</Steam></Name>
       <IP>{props.ip}</IP>
       <Msg>{props.msg}</Msg>

app/components/EventsView/EventCards/DamageEventCard.js

@@ -10,7 +10,7 @@
 import React, {
   PropTypes,
 } from 'react';
-
+import format from 'date-fns/format'
 import styled from 'styled-components';
 import Paper from 'material-ui/Paper';
 
@@ -19,21 +19,20 @@ import {darkGrey, black, white} from '../../../styles/colors';
 const DamageEventCard = (props) => {
   return (
     <DamageEvent kill={props.kill} zDepth={1}>
-      <Date>Date: 12-14-2016</Date>
-      <Time>Time: 00:08:13.279</Time>
-      <ShooterName>ShooterName: Snow</ShooterName>
-      <Shooter>Shooter: 76561198064851703</Shooter>
-      <TargetName>TargetName: 76561198064851703</TargetName>
-      <Target>Target: 76561198064851703</Target>
-      <Weapon>Weapon: Model70</Weapon>
-      <Distance>Distance: 22.09</Distance>
-      <Damage>Damage: 53.21*1.00x=53.21</Damage>
-      <Melee>Melee: 0</Melee>
-      <HeadShot>HeadShot: 0</HeadShot>
-      <Kill>Kill: 1</Kill>
-      <Part>Part: 23(Bip01 Spine1)</Part>
-      <HitType>HitType: ammo_223</HitType>
-      <Projectile>Projectile: ammo_223</Projectile>
+      <Time>{format(props.time, 'HH:mm:ss')}</Time>
+      <ShooterName>{props.name}</ShooterName>
+      <Shooter>Shooter: {props.steam}</Shooter>
+      <TargetName>TargetName: {props.targetSteam}</TargetName>
+      <Target>Target: {props.targetName}</Target>
+      <Weapon>Weapon: {props.weapon}</Weapon>
+      <Distance>Distance: {props.distance}</Distance>
+      <Damage>Damage: {props.damage}</Damage>
+      <Melee>Melee: {props.melee}</Melee>
+      <HeadShot>HeadShot: {props.headshot}</HeadShot>
+      <Kill>Kill: {props.kill}</Kill>
+      <Part>Part: {props.part}</Part>
+      <HitType>HitType: {props.hitType}</HitType>
+      <Projectile>Projectile: {props.projectile}</Projectile>
     </DamageEvent>
   );
 };
@@ -45,7 +44,7 @@ const DamageEvent = styled(Paper)`
   width: 80%;
   font-weight: 400;
   color: ${darkGrey};
-  background-color: ${(props)=> props.kill === 1 ? '#b24944' : '#969064'} !important;
+  background-color: ${(props)=> props.kill === '1' ? '#b24944' : '#969064'} !important;
   position: relative;
   padding: 15px;
   min-height: 120px;

app/components/EventsView/EventsContainer.js

@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import styled from 'styled-components';
 import ReactChatView from './ChatView';
+import List from 'react-virtualized';
 
 import ChatEventCard from './EventCards/ChatEventCard';
 import DamageEventCard from './EventCards/DamageEventCard';
@@ -20,6 +21,7 @@ const EventContainer = (props) => {
   return (
     <div>
       <EventsContainerHeader
+        toggleKills={props.toggleKills}
         kickPlayer={props.kickPlayer}
         banPlayer={props.banPlayer}
         unWhiteListPlayer={props.unWhiteListPlayer}
@@ -30,17 +32,37 @@ const EventContainer = (props) => {
         scrollLoadThreshold={50}
         onInfiniteLoad={props.loadMore.bind(null, props.selected)}
       >
-        {props.chatEvents.filter(isSelected)
+        {props.events.filter(isSelected)
           .map((event) => {
-            return (<ChatEventCard
-              key={event.steam + String(Math.random())}
-              avatar={event.avatar}
-              time={event.time}
-              name={event.name}
-              steam={event.steam}
-              ip={event.ip}
-              msg={event.msg}
-            />);
+            if (event.type === 'chat') {
+              return (<ChatEventCard
+                key={event.steam + String(Math.random())}
+                avatar={event.avatar}
+                time={event.time}
+                name={event.name}
+                steam={event.steam}
+                ip={event.ip}
+                msg={event.msg}
+              />);
+            } else {
+              return (<DamageEventCard
+                key={event.steam + String(Math.random())}
+                kill={event.kill}
+                time={event.time}
+                name={event.name}
+                steam={event.steam}
+                targetSteam={event.targetSteam}
+                targetName={event.targetName}
+                weapon={event.weapon}
+                distance={event.distance}
+                damage={event.damage}
+                melee={event.melee}
+                headshot={event.headshot}
+                part={event.part}
+                hitType={event.hitType}
+                projectile={event.projectile}
+              />);
+            }
           })}
       </Container>
     </div>

app/components/EventsView/EventsContainerHeader.js

@@ -10,13 +10,34 @@ import IconButton from 'material-ui/IconButton';
 import IconMenu from 'material-ui/IconMenu';
 import MenuItem from 'material-ui/MenuItem';
 import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
+import Toggle from 'material-ui/Toggle';
+
+import {orange, black} from '../../styles/colors';
 
 const EventsContainerHeader = (props) => {
+  const styles = {
+    thumbOff: {
+      backgroundColor: black,
+    },
+    thumbSwitched: {
+      backgroundColor: orange,
+    },
+  };
   return (
     <AppBar
       style={{background: 'transparent', position: 'absolute', width: '100%', top: 0}}
       title={props.selected}
       zDepth={0}
+      iconElementRight={<Toggle
+        disabled={true}
+        thumbStyle={styles.thumbOff}
+        thumbSwitchedStyle={styles.thumbSwitched}
+        label="Kills Only"
+        defaultToggled={false}
+        onToggle={props.toggleKills}
+        labelPosition="right"
+        style={{margin: 20}}
+      />}
       iconElementLeft={props.selected === 'ALL'
         ?
         <div style={{width: 42}}></div>
@@ -32,5 +53,6 @@ const EventsContainerHeader = (props) => {
     />);
 };
 
+
 export default EventsContainerHeader;
 

app/components/EventsView/EventsDrawer.js

@@ -53,7 +53,6 @@ const EventsDrawer = (props) => {
       <div style={{display: 'flex', width: '100%', flexShrink: 1, alignItems: 'center', justifyContent: 'center'}}>
         <FlatButton secondary={true} onTouchTap={props.parseDamageLogs} label={"Damage"}/>
         <FlatButton secondary={true} onTouchTap={props.parseChatLogs} label={"Chat"}/>
-        <FlatButton secondary={true} onTouchTap={props.parseAllLogs} label={"All"}/>
       </div>
 
       <h2>API Log Access</h2>