Tabify Admin page, add Notification tab

client/admin/admin.jsx

@@ -3,12 +3,28 @@ const React = require('react');
 const createClass = require('create-react-class');
 
 const BrewUtils = require('./brewUtils/brewUtils.jsx');
+const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
+
+const tabGroups = ['brew', 'notifications'];
 
 const Admin = createClass({
 	getDefaultProps : function() {
 		return {};
 	},
 
+	getInitialState : function(){
+		return ({
+			currentTab : 'brew'
+		});
+	},
+
+	handleClick : function(newTab){
+		if(this.state.currentTab === newTab) return;
+		this.setState({
+			currentTab : newTab
+		});
+	},
+
 	render : function(){
 		return <div className='admin'>
 
@@ -19,7 +35,11 @@ const Admin = createClass({
 				</div>
 			</header>
 			<div className='container'>
-				<BrewUtils />
+				<div className='tabs'>
+					{tabGroups.map((tab)=>{ return <button onClick={()=>{ return this.handleClick(tab); }}>{tab.toUpperCase()}</button>; })}
+				</div>
+				{this.state.currentTab==='brew' && <BrewUtils />}
+				{this.state.currentTab==='notifications' && <NotificationUtils />}
 			</div>
 		</div>;
 	}

client/admin/notificationUtils/notificationUtils.jsx

@@ -0,0 +1,12 @@
+const React = require('react');
+const createClass = require('create-react-class');
+
+const NotificationUtils = createClass({
+	render : function(){
+		return <>
+			<div>Notifications</div>
+		</>;
+	}
+});
+
+module.exports = NotificationUtils;