Creating a brand new admin page

client/admin/admin.jsx

@@ -1,38 +1,42 @@
-var React = require('react');
-var _ = require('lodash');
-var cx = require('classnames');
+const React = require('react');
+const _ = require('lodash');
 
-var HomebrewAdmin = require('./homebrewAdmin/homebrewAdmin.jsx');
+const Nav = require('naturalcrit/nav/nav.jsx');
 
-var Admin = React.createClass({
+//const HomebrewAdmin = require('./homebrewAdmin/homebrewAdmin.jsx');
+
+
+const BrewLookup = require('./brewLookup/brewLookup.jsx');
+
+
+const Admin = React.createClass({
 	getDefaultProps: function() {
 		return {
-			url : "",
-			admin_key : "",
-			homebrews : [],
+			admin_key : '',
 		};
 	},
 
+	renderNavbar : function(){
+		return <Nav.base>
+			<Nav.section>
+				<Nav.item icon='fa-magic' className='homebreweryLogo'>
+					Homebrewery Admin
+				</Nav.item>
+			</Nav.section>
+		</Nav.base>
+	},
+
 	render : function(){
-		var self = this;
-		return(
-			<div className='admin'>
+		return <div className='admin'>
+			{this.renderNavbar()}
+			<main className='content'>
+				<BrewLookup adminKey={this.props.admin_key} />
 
-				<header>
-					<div className='container'>
-						<i className='fa fa-rocket' />
-						naturalcrit admin
-					</div>
-				</header>
-
-				<div className='container'>
-
-					<HomebrewAdmin homebrews={this.props.homebrews} admin_key={this.props.admin_key} />
-				</div>
+				Test
 
 
-			</div>
-		);
+			</main>
+		</div>
 	}
 });
 

client/admin/admin.less

@@ -1,19 +1,11 @@
-@import 'naturalcrit/styles/reset.less';
-@import 'naturalcrit/styles/elements.less';
-@import 'naturalcrit/styles/animations.less';
-@import 'naturalcrit/styles/colors.less';
-@import 'naturalcrit/styles/tooltip.less';
+@import 'naturalcrit/styles/core.less';
 
-@import 'font-awesome/css/font-awesome.css';
-
-html,body, #reactContainer, .naturalCrit{
+html,body, #reactRoot{
 	min-height : 100%;
 }
 
-@sidebarWidth : 250px;
-
 body{
-	background-color : #eee;
+	background-color : #ddd;
 	font-family      : 'Open Sans', sans-serif;
 	color            : #4b5055;
 	font-weight      : 100;
@@ -23,17 +15,35 @@ body{
 	height : 100%;
 }
 
-.admin{
-
-	header{
-		background-color : @red;
-		font-size: 2em;
-		padding : 20px 0px;
-		color : white;
-		margin-bottom: 30px;
-		i{
-			margin-right: 30px;
+.admin {
+	nav {
+		background-color: @red;
+		.navItem{
+			background-color: @red;
+		}
+		.homebreweryLogo{
+			font-family : CodeBold;
+			font-size   : 12px;
+			color       : white;
+			div{
+				margin-top    : 2px;
+				margin-bottom : -2px;
+			}
 		}
 	}
 
-}
+	h1{
+		font-size: 2em;
+		font-weight: 800;
+		border-bottom: 1px solid #ddd;
+		margin-bottom: 10px;
+	}
+
+
+	main.content{
+		background-color: white;
+		padding: 50px 20px;
+		width : 1000px;
+		margin: 0 auto;
+	}
+}

client/admin/adminSearch/adminSearch.jsx

@@ -0,0 +1,19 @@
+
+const React = require('react');
+const _     = require('lodash');
+const cx    = require('classnames');
+
+const AdminSearch = React.createClass({
+	getDefaultProps: function() {
+		return {
+
+		};
+	},
+	render: function(){
+		return <div className='adminSearch'>
+			AdminSearch Component Ready.
+		</div>
+	}
+});
+
+module.exports = AdminSearch;

client/admin/adminSearch/adminSearch.less

@@ -0,0 +1,3 @@
+.adminSearch{
+
+}

client/admin/brewLookup/brewLookup.jsx

@@ -0,0 +1,45 @@
+const React = require('react');
+const _     = require('lodash');
+const cx    = require('classnames');
+
+const request = require('superagent');
+
+const BrewLookup = React.createClass({
+	getDefaultProps: function() {
+		return {
+			adminKey : '',
+		};
+	},
+	getInitialState: function() {
+		return {
+			query:'',
+			resultBrew : null
+		};
+	},
+
+	handleChange : function(e){
+		this.setState({
+			query : e.target.value
+		})
+	},
+	lookup : function(){
+
+
+	},
+
+	renderFoundBrew : function(){
+		if(!this.state.resultBrew) return null;
+	},
+
+	render: function(){
+		return <div className='brewLookup'>
+			<h1>Brew Lookup</h1>
+			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id...' />
+			<button onClick={this.lookup}><i className='fa fa-search'/></button>
+
+			{this.renderFoundBrew()}
+		</div>
+	}
+});
+
+module.exports = BrewLookup;

client/admin/brewLookup/brewLookup.less

@@ -0,0 +1,8 @@
+
+.brewLookup{
+	height : 200px;
+	input{
+		height  : 33px;
+		padding : 0px 10px;
+	}
+}

client/admin/invalidBrew/invalidBrew.jsx

@@ -0,0 +1,19 @@
+
+const React = require('react');
+const _     = require('lodash');
+const cx    = require('classnames');
+
+const InvalidBrew = React.createClass({
+	getDefaultProps: function() {
+		return {
+
+		};
+	},
+	render: function(){
+		return <div className='invalidBrew'>
+			InvalidBrew Component Ready.
+		</div>
+	}
+});
+
+module.exports = InvalidBrew;

client/admin/invalidBrew/invalidBrew.less

@@ -0,0 +1,3 @@
+.invalidBrew{
+
+}

client/homebrew/pages/userPage/userPage.jsx

@@ -52,6 +52,7 @@ const UserPage = React.createClass({
 
 	render : function(){
 		const brews = this.getSortedBrews();
+		console.log('user brews', brews);
 
 		return <div className='userPage page'>
 			<Navbar>

server/admin.routes.js

@@ -8,6 +8,7 @@ const mw = require('./middleware.js');
 const BrewData = require('./brew.data.js');
 
 router.get('/admin', mw.adminLogin, (req, res, next) => {
+	console.log('yo');
 	return vitreumRender('admin', templateFn, {
 			url       : req.originalUrl,
 			admin_key : config.get('admin:key')