add project and file models, add project reducer and actions, add project name to toolbar, make project toolbar name contenteditable

server/models/file.js

@@ -0,0 +1,10 @@
+import mongoose from 'mongoose';
+const Schema = mongoose.Schema;
+
+const fileSchema = new Schema({
+	name: {type: String, default: 'sketch.js'},
+	project: {type: Schema.Types.ObjectId, ref: 'Project'},
+	content: {type: String}
+}, {timestamps: true});
+
+export default mongoose.model('File', fileSchema);

server/models/project.js

@@ -0,0 +1,10 @@
+import mongoose from 'mongoose';
+const Schema = mongoose.Schema;
+
+const projectSchema = new Schema({
+	name: {type: String, default: 'Hello p5.js'},
+	user: {type: Schema.Types.ObjectId, ref: 'User'},
+	file: {type: Schema.Types.ObjectId, ref: 'File'}
+}, {timestamps: true});
+
+export default mongoose.model('Project', projectSchema);

server/utils/jwt.js

@@ -1,12 +0,0 @@
-import jwt from 'jwt-simple'
-
-exports.generateToken = function(user) {
-  const timestamp = new Date().getTime();
-  return jwt.encode({ 
-  	_id: user._id,
-  	email: user.email,
-  	name: user.name,
-  	username: user.username, 
-  	iat: timestamp }, process.env.JWT_SECRET);
-}
-

shared/components/Toolbar/Toolbar.jsx

@@ -31,6 +31,14 @@ class Toolbar extends React.Component {
 				<button className={stopButtonClass} onClick={this.props.stopSketch}>
 					<Isvg src={stopUrl} alt="Stop Sketch" />
 				</button>
+				<div className="toolbar__project-name-container">
+					<span className="toolbar__project-name"
+								onBlur={this.props.setProjectName.bind(this)}
+								contentEditable={true}
+								suppressContentEditableWarning={true}>
+								{this.props.projectName}
+					</span>
+				</div>
 				<button className={preferencesButtonClass} onClick={this.props.openPreferences}>
 					<Isvg src={preferencesUrl} alt="Show Preferences" />
 				</button>

shared/containers/IDEView/IDEView.jsx

@@ -18,6 +18,8 @@ class IDEView extends React.Component {
 					isPlaying={this.props.ide.isPlaying}
 					startSketch={this.props.startSketch}
 					stopSketch={this.props.stopSketch}
+					projectName={this.props.project.name}
+					setProjectName={this.props.setProjectName}
 					openPreferences={this.props.openPreferences}
 					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
 					/>
@@ -47,7 +49,8 @@ function mapStateToProps(state) {
 		file: state.file,
 		ide: state.ide,
 		preferences: state.preferences,
-		user: state.user
+		user: state.user,
+		project: state.project
 	}
 }
 

shared/redux/constants/constants.js

@@ -13,3 +13,5 @@ export const AUTH_USER = 'AUTH_USER';
 export const UNAUTH_USER = 'UNAUTH_USER';
 
 export const AUTH_ERROR = 'AUTH_ERROR';
+
+export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';

shared/redux/reducers/index.js

@@ -3,6 +3,7 @@ import file from './files'
 import ide from './ide'
 import preferences from './preferences'
 import user from './user'
+import project from './project'
 import { reducer as form } from 'redux-form'
 
 const rootReducer = combineReducers({
@@ -10,7 +11,8 @@ const rootReducer = combineReducers({
 	file,
 	ide,
 	preferences,
-	user
+	user,
+	project
 })
 
 export default rootReducer

shared/redux/reducers/project.js

@@ -0,0 +1,18 @@
+import * as ActionTypes from '../constants/constants';
+
+const initialState = {
+	name: "Hello p5.js"
+}
+
+const project = (state = initialState, action) => {
+	switch (action.type) {
+		case ActionTypes.SET_PROJECT_NAME:
+			return {
+				name: action.name
+			}
+		default:
+			return state;
+	}
+}
+
+export default project;

styles/components/_toolbar.scss

@@ -28,4 +28,25 @@
 .toolbar {
 	padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
 	display: flex;
+	align-items: center;
+}
+
+.toolbar__project-name-container {
+	border-left: 2px dashed;
+	margin-left: #{10 / $base-font-size}rem;
+	padding-left: #{10 / $base-font-size}rem;
+	height: 70%;
+  display: flex;
+  align-items: center;
+}
+
+.toolbar__project-name {
+	color: $light-secondary-text-color;
+	cursor: pointer;
+	&:hover {
+		color: $light-primary-text-color;
+	}
+	&:focus {
+		color: $light-secondary-text-color;
+	}
 }