Basic front-end integration with new APIserver

This is still not polished at all, but it mostly works, and the new API
is *much* faster so pushing this out prematurely seemed worthwhile.

2 files changed, 13 insertions, 11 deletions

diff --git a/src/client/components/sidebar/sidebar.js b/src/client/components/sidebar/sidebar.js
index d461bfe..0354b90 100644
--- a/src/client/components/sidebar/sidebar.js
+++ b/src/client/components/sidebar/sidebar.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
-const SidebarItem = ({name, isActive, onClick}) =>
-  <li><a href='#' onClick={() => { onClick(name) }} value={name}>{name}</a></li>
+const SidebarItem = ({name, isActive, onClick, key}) =>
+  <li><a href='#' onClick={() => { onClick(key) }} value={name}>{name}</a></li>
 
 class Sidebar extends Component {
   constructor (props) {
@@ -9,14 +9,14 @@ class Sidebar extends Component {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  handleClick (name) {
-    this.props.onClick(name)
+  handleClick (key) {
+    this.props.onClick(key)
   }
 
   render () {
     return (
       <div>
-        { this.props.logfiles.map(logfile => <SidebarItem key={logfile} name={logfile} onClick={this.handleClick} />) }
+        { this.props.logfiles.map(logfile => <SidebarItem key={logfile.key} name={logfile.name} onClick={this.handleClick} />) }
       </div>
     )
   }
diff --git a/src/client/layout/layout.js b/src/client/layout/layout.js
index 4837ca8..075af28 100644
--- a/src/client/layout/layout.js
+++ b/src/client/layout/layout.js
@@ -4,7 +4,7 @@ import { Grid, Row, Col } from 'react-bootstrap'
 import Q from 'q'
 import Spinner from 'react-spinkit'
 import { merge } from 'lodash/fp'
-import { get } from '../helpers/http'
+import { get as axiosGet, post, put } from 'axios' // eslint disable-line TODO remove this
 
 import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
 import { container, spinner } from './layout.css'
@@ -14,6 +14,8 @@ import Controls from '../components/controls/controls'
 import Sidebar from '../components/sidebar/sidebar'
 import Config from '../components/config/config'
 
+const get = (route, params) => axiosGet(route, { params: params })
+
 // TODO better way to determine API url
 const HOST = process.env.NODE_ENV === 'production' ? window.location.host : `${window.location.hostname}:4000`
 const BASE_URL = `//${HOST}/api/`
@@ -30,7 +32,7 @@ const defaultState = {
 }
 
 const defaultParams = {
-  logfile: '',
+  key: 0,
   page: 1,
   pagesize: '',
   startdt: '',
@@ -76,8 +78,8 @@ const Layout = createReactClass({
     this.setState({ loading: true })
     return new Promise((resolve, reject) => {
       get(route, params).then(resp => {
-        if (resp.success) {
-          this.setState({ [stateKey]: resp.data, loading: false })
+        if (resp.data.success) {
+          this.setState({ [stateKey]: resp.data.data, loading: false })
           resolve(resp)
         } else {
           this.setState({ loading: false })
@@ -100,11 +102,11 @@ const Layout = createReactClass({
           <Row>
             <Col sm={3}>
               <div className={container}>
-                <Config folders={this.state.config.folders} show={!this.state.config.folders.length} />
+                <Config folders={this.state.config.directories} show={!this.state.config.directories} />
                 <Controls onChange={e => { this.query(e.id, e.value) }} values={this.params} />
               </div>
               <div className={container}>
-                <Sidebar logfiles={this.state.files} onClick={e => { this.query('logfile', e) }} />
+                <Sidebar logfiles={this.state.files} onClick={e => { this.query('key', e); console.log(e) }} />
               </div>
             </Col>
             <Col sm={9}>