renamed all jsx files to js to resolve issue #2, changed gulpfile and…

… other files to align with name change for components, moved header component into wrapper component, wrapper to handle all data to be passed to header in front end as well as backend printing, added mechanism to add page data script to all pages so that essential data is stored client side and is available for components rendering client side, css changes for realignment with new html structure

assets/react/components/header.jsx → assets/react/components/header.js

@@ -1,11 +1,23 @@
 var React = require('react');
+var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
 
 module.exports = React.createClass({
-	render: function() {
+	getInitialState: function(){
+		var data = {};
 		if(this.props.user){
-			var userData = {userName: this.props.user.name, imageURL: this.props.user.photo, admin: this.props.user.admin},
-			userDataDiv = <div class="hidden" data-user={JSON.stringify(userData)}></div>,
-			divStyle = {backgroundImage: 'url('+ this.props.user.photo +')'},
+			data =  {user: this.props.user};
+		}
+		else if(ExecutionEnvironment.canUseDOM){
+			if((typeof fodoo_data != "undefined") && fodoo_data && fodoo_data.user){
+				data =  {user: fodoo_data.user};
+			}
+		}
+		return data;
+	},
+	render: function() {
+		if(this.state.user){
+			var userData = {userName: this.state.user.name, imageURL: this.state.user.photo, admin: this.state.user.admin},
+			divStyle = {backgroundImage: 'url('+ this.state.user.photo +')'},
 			image = <div className="user-image" style={divStyle}></div>;
 			var logout = <a className="login-button" href="/logout">Logout</a>
 		}
@@ -14,7 +26,6 @@ module.exports = React.createClass({
 		}
 		return (
 			<div className="header">
-				{userDataDiv}
 				<img src="/images/logo.png" type="image/png"></img>
 				<span className="site-details">
 					<span className="site-name" itemProp="name">Fodoo</span>

assets/react/components/new_post.jsx → assets/react/components/new_post.js

@@ -1,6 +1,6 @@
 var React = require('react');
 var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
-var Button = require('../../../public/react/components/common/button.js');
+var Button = require('./common/button.js');
 
 module.exports = React.createClass({
 	componentDidMount: function(){

assets/react/main.jsx → assets/react/main.js

@@ -2,10 +2,10 @@ var React = require('react');
 var Router = require('react-router');
 var Route = Router.Route;
 
-var Wrapper = require('./wrapper.jsx');
-var Index = require('./components/index.jsx');
-var Home = require('./components/home.jsx');
-var NewPost = require('./components/new_post.jsx');
+var Wrapper = require('./wrapper.js');
+var Index = require('./components/index.js');
+var Home = require('./components/home.js');
+var NewPost = require('./components/new_post.js');
 
 
 //Elements generated with wrapper
@@ -43,5 +43,5 @@ var routes = (
 
 
 Router.run(routes, Router.HistoryLocation, function (Handler) {
-	React.render(<Handler/>, document.getElementById('main-content'));
+	React.render(<Handler/>, document.getElementById('application'));
 });

assets/react/wrapper.jsx → assets/react/wrapper.js

@@ -1,5 +1,6 @@
 var React = require('react');
 var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
+var Header = require('./components/header.js');
 
 module.exports = React.createClass({
 	handleScroll: function(e){
@@ -12,18 +13,21 @@ module.exports = React.createClass({
 	},
 	componentDidMount: function(){
 		if (ExecutionEnvironment.canUseDOM) {
-			document.getElementById('main-content').addEventListener('scroll', this.handleScroll);
+			document.getElementsByClassName('main-content')[0].addEventListener('scroll', this.handleScroll);
 		}
 	},
 	componentWillUnmount: function(){
 		if (ExecutionEnvironment.canUseDOM) {
-			document.getElementById('main-content').removeEventListener('scroll', this.handleScroll);
+			document.getElementsByClassName('main-content')[0].removeEventListener('scroll', this.handleScroll);
 		}
 	},
 	render: function() {
 		var Child = this.props.child;
 		return (
-			<Child />
+			<div className="main-content">
+				<Header user={this.props.user}/>
+				<Child />
+			</div>
 		)
 	}
 });

assets/stylesheets/app.scss

@@ -19,9 +19,6 @@ body {
         top: -3px;
       }
     }
-    #application{
-      padding-top: 46px;
-    }
     .user-image{
       -ms-transform: scale(0.7) translate(0px,-10px);
       -webkit-transform: scale(0.7) translate(0px,-10px);
@@ -74,15 +71,20 @@ a {
 }
 
 #application{
-	padding-top: 58px;
 	height: 100%;
   box-sizing: border-box;
   transition: all 1s ease-in;
-	#main-content{		height: 100%;
+	.main-content{		height: 100%;
 		overflow: auto;
 	}
 }
 
+.container{
+  padding-top: 58px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
 .site-details{
   position: relative;
   top: 0px;
@@ -131,6 +133,7 @@ a {
   margin-right: 10px;
   cursor: pointer;
   outline: none;
+  border-radius: 2px;
   &:hover{
     background-color: #F2C4D5;
     color: #400822;

assets/stylesheets/home.scss

@@ -1,4 +1,3 @@
 .home.container{
 	text-align: center;
-	padding-top: 10%;
 }

assets/stylesheets/new-post.scss

@@ -1,15 +1,14 @@
 .new-post.container{
-	padding: 20px;
 	padding-left: 50px;
 	padding-right: 50px;
-	height: 100%;
-	box-sizing: border-box;
+	padding-bottom: 20px;
 	.title{
 		position: absolute;
 		height: 40px;
-    	width: 100%;
-    	input{
-    		width: 99%;
+		width: 100%;
+		margin-top: 10px;
+		input{
+			width: 99%;
 		    height: 35px;
 		    font-size: 20px;
 		    border: none;
@@ -28,11 +27,6 @@
 			left: 160px
 		}
 	}
-	.dummy-container{
-		height: 100%;
-		width: 100%;
-		border: 1px solid #F2C4D5;
-	}
 }
 .tinymce{
 	padding-top: 50px;
@@ -46,6 +40,7 @@
 	}
 	.mce-tinymce{
 		height: 100%;
+		border-radius: 2px;
 	}
 	.mce-tinymce > .mce-container-body{
 		background-color: #F2C4D5;
@@ -66,8 +61,10 @@
 	.mce-statusbar .mce-container-body{
 		height: 35px;
 		background-color: #F2C4D5;
-		.mce-path .mce-path-item{
-			display: none;
+		.mce-path{
+			.mce-path-item, .mce-divider{
+				display: none;
+			}
 		}
 	}
 	.mce-btn{

server/controllers/home/controller.js

@@ -7,13 +7,15 @@ var home = require(_dir.DIR_COMPONENTS + '/home');
 
 module.exports = {
 	init: function(req, res, next) {
-		var header_element = React.createElement(header, {user: req.user});
-		var wrapper_element = React.createElement(wrapper, {child: home});
+		var wrapper_element = React.createElement(wrapper, {child: home, user: req.user});
+		var data = {}
+		if(req.user){
+			data.user = {name: req.user.name, admin: req.user.admin, photo: req.user.photo, email: req.user.email}
+		}
 		return res.render('home', {title: 'Fodoo',
 				markup: React.renderToString(wrapper_element),
-				header: React.renderToString(header_element),
 				tracking: req.tracking_element,
-				user: req.user
+				page_data: "var fodoo_data = " + JSON.stringify(data)
 			}
 		)
 	}

server/controllers/newpost/controller.js

@@ -7,13 +7,15 @@ var new_post = require(_dir.DIR_COMPONENTS + '/new_post');
 /* GET users listing. */
 module.exports = {
 	newpost: function(req, res, next) {
-		var header_element = React.createElement(header, {user: req.user});
-		var wrapper_element = React.createElement(wrapper, {child: new_post});
+		var wrapper_element = React.createElement(wrapper, {child: new_post, user: req.user});
+		var data = {}
+		if(req.user){
+			data.user = {name: req.user.name, admin: req.user.admin, photo: req.user.photo, email: req.user.email}
+		};
 		return res.render('new_post', {title: 'Fodoo',
 			markup: React.renderToString(wrapper_element),
-			header: React.renderToString(header_element),
 			tracking: req.tracking_element,
-			user: req.user
+			page_data: "var fodoo_data = " + JSON.stringify(data)
 		});
 	},
 	preview: function(req, res, next){

views/home.jade

@@ -2,6 +2,5 @@ extends layout
 
 block content
 	#application
-		#main-content
-			!{markup}
+		!{markup}
 	link(rel='stylesheet', href='/stylesheets/home.css')

views/layout.jade

@@ -3,9 +3,9 @@ html
   head
     title= title
   body(itemscope, itemtype="http://schema.org/Blog")
-    !{header}
+    script
+      !{page_data}
     block content
-    !{footer}
     link(rel='stylesheet', href='/stylesheets/app.css')
     !{tracking}
     script(src='/react/main.js' type='text/javascript' defer)