fixing merge conflicts

.eslintrc

@@ -27,7 +27,7 @@
     "max-len": [1, 120, 4],
   },
   "plugins": [
-    "react", "import"
+    "react", "jsx-a11y", "import"
   ], 
   "settings": {
     "import/parser": "babel-eslint",

README.md

@@ -53,6 +53,8 @@ The p5.js Web Editor is built on a MERN stack - MongoDB, Express, React/Redux, a
 
 This project does not use CSS Modules, but uses Sass. I like to follow [BEM rules](http://getbem.com/) for CSS naming conventions, write OOSCSS with placeholders and mixins, and follow the [7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern) for Sass. 
 
+I'm using [ES6](http://es6-features.org/) and transpiling to ES5 using [Babel](https://babeljs.io/). For reference to the JavaScript style guide, see the [Airbnb Style Guide](https://github.com/airbnb/javascript), [React ESLint Plugin](https://github.com/yannickcr/eslint-plugin-react). 
+
 I'm new to using ESLint, but I decided on a configuration based on some popular React/Redux boilerplates. Open to suggestions on this. If in development, you're getting annoyed with ESLint, you can remove it from `webpack.config.dev.js` in the JavaScript loader, or disable any line from eslint by commenting at the end of the line `// eslint-disable-line`.
 
 ##Dump of links I'm saving for reference

client/components/Nav.js

@@ -59,24 +59,25 @@ function Nav(props) {
             return (
               <li className="nav__item">
                 <p className="nav__open">
-                  <Link to="/sketches">
+                  <Link
+                    to="/sketches"
+                    onClick={props.stopSketch}
+                  >
                     Open
                   </Link>
                 </p>
               </li>
             );
           }
-          if (!props.user.authenticated) {
-            return (
-              <li className="nav__item">
-                <p className="nav__open">
-                  <a href="http://alpha.editor.p5js.org/p5/sketches">
-                    Open
-                  </a>
-                </p>
-              </li>
-            );
-          }
+          return (
+            <li className="nav__item">
+              <p className="nav__open">
+                <Link to="/p5js/sketches">
+                  Open
+                </Link>
+              </p>
+            </li>
+          );
         })()}
         <li className="nav__item">
           <p className="nav__about">
@@ -87,10 +88,34 @@ function Nav(props) {
         </li>
       </ul>
       <ul className="nav__items-right" title="user-menu">
-        <li className="nav__item">
-          {props.user.authenticated && <p>Hello, {props.user.username}!</p>}
-          {!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}
-        </li>
+        {(() => {
+          if (!props.user.authenticated) {
+            return (
+              <li className="nav__item">
+                <p>
+                  <Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link>
+                </p>
+              </li>
+            );
+          }
+          return (
+            <li className="nav__item">
+              <a>Hello, {props.user.username}!</a>
+              <ul className="nav__dropdown">
+                <li>
+                  <Link to="/sketches">
+                    My Sketches
+                  </Link>
+                </li>
+                <li>
+                  <a onClick={props.logoutUser} >
+                    Logout
+                  </a>
+                </li>
+              </ul>
+            </li>
+          );
+        })()}
       </ul>
     </nav>
   );
@@ -107,7 +132,9 @@ Nav.propTypes = {
   }).isRequired,
   project: PropTypes.shape({
     id: PropTypes.string
-  })
+  }),
+  logoutUser: PropTypes.func.isRequired,
+  stopSketch: PropTypes.func.isRequired
 };
 
 export default Nav;

client/images/file.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="11px" height="12px" viewBox="0 0 7 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>"K" file icon Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="environment" transform="translate(-25.000000, -103.000000)" fill="#B5B5B5">
+            <g id="&quot;K&quot;-file-icon-Copy-+-styles.css" transform="translate(25.000000, 94.000000)">
+                <path d="M0.2,9.704 L0.2,17 L6.188,17 L6.188,11.72 L4.22,9.704 L0.2,9.704 Z M1.064,10.568 L3.104,10.568 C3.5,10.568 3.776,10.832 3.776,11.12 L3.776,12.008 L4.952,12.008 C5.192,12.008 5.324,12.044 5.324,12.332 L5.324,16.136 L1.064,16.136 L1.064,10.568 Z M1.892,13.316 L4.58,13.316 L4.58,12.992 L1.892,12.992 L1.892,13.316 Z M1.892,14.276 L4.58,14.276 L4.58,13.952 L1.892,13.952 L1.892,14.276 Z M1.892,15.236 L4.58,15.236 L4.58,14.912 L1.892,14.912 L1.892,15.236 Z" id="&quot;K&quot;-file-icon-Copy"></path>
+            </g>
+        </g>
+    </g>
+</svg>

client/modules/IDE/components/EditorAccessibility.js

@@ -7,18 +7,18 @@ class EditorAccessibility extends React.Component {
   render() {
     let messages = [];
     if (this.props.lintMessages.length > 0) {
-      for (let i = 0; i < this.props.lintMessages.length; i++) {
+      this.props.lintMessages.forEach((lintMessage, i) => {
         messages.push(
-          <li>
-            {this.props.lintMessages[i].severity} in line
-            {this.props.lintMessages[i].line} :
-            {this.props.lintMessages[i].message}
+          <li key={i}>
+            {lintMessage.severity} in line
+            {lintMessage.line} :
+            {lintMessage.message}
           </li>
         );
-      }
+      });
     } else {
       messages.push(
-        <p tabIndex="0"> There are no lint messages </p>
+        <li tabIndex="0" key={0}> There are no lint messages </li>
       );
     }
     return (

client/modules/IDE/pages/IDEView.js

@@ -15,6 +15,7 @@ import * as IDEActions from '../actions/ide';
 import * as ProjectActions from '../actions/project';
 import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 import * as PreferencesActions from '../actions/preferences';
+import * as UserActions from '../../User/actions';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
 import SplitPane from 'react-split-pane';
 import Overlay from '../../App/components/Overlay';
@@ -30,6 +31,7 @@ class IDEView extends React.Component {
   }
 
   componentDidMount() {
+    this.props.stopSketch();
     if (this.props.params.project_id) {
       const id = this.props.params.project_id;
       this.props.getProject(id);
@@ -117,6 +119,8 @@ class IDEView extends React.Component {
           exportProjectAsZip={this.props.exportProjectAsZip}
           cloneProject={this.props.cloneProject}
           project={this.props.project}
+          logoutUser={this.props.logoutUser}
+          stopSketch={this.props.stopSketch}
         />
         <Toolbar
           className="Toolbar"
@@ -366,7 +370,8 @@ IDEView.propTypes = {
   hideEditFileName: PropTypes.func.isRequired,
   updateFileName: PropTypes.func.isRequired,
   showEditProjectName: PropTypes.func.isRequired,
-  hideEditProjectName: PropTypes.func.isRequired
+  hideEditProjectName: PropTypes.func.isRequired,
+  logoutUser: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
@@ -390,7 +395,8 @@ function mapDispatchToProps(dispatch) {
     FileActions,
     ProjectActions,
     IDEActions,
-    PreferencesActions),
+    PreferencesActions,
+    UserActions),
   dispatch);
 }
 

client/modules/User/actions.js

@@ -56,3 +56,16 @@ export function getUser() {
       });
   };
 }
+
+export function logoutUser() {
+  return (dispatch) => {
+    axios.get(`${ROOT_URL}/logout`, { withCredentials: true })
+      .then(() => {
+        dispatch({
+          type: ActionTypes.UNAUTH_USER
+        });
+      })
+      .catch(response => dispatch(authError(response.data.error)));
+  };
+}
+

client/modules/User/reducers.js

@@ -5,6 +5,10 @@ const user = (state = { authenticated: false }, action) => {
     case ActionTypes.AUTH_USER:
       return { ...action.user,
               authenticated: true };
+    case ActionTypes.UNAUTH_USER:
+      return {
+        authenticated: false
+      };
     case ActionTypes.AUTH_ERROR:
       return {
         authenticated: false

client/styles/base/_base.scss

@@ -11,6 +11,10 @@ body, input, button {
 	color: $light-primary-text-color;
 }
 
+body {
+	background-color: $light-background-color;
+}
+
 .root-app, .app {
 	min-height: 100%;
 	height: 100%;

client/styles/components/_console.scss

@@ -4,6 +4,8 @@
 	background: $console-light-background-color;
 	z-index: 1000;
 	overflow: hidden;
+	display: flex;
+	flex-direction: column;
 
 	& > {
 		position:relative;
@@ -13,14 +15,17 @@
 	// assign styles to different types of console messages
 	.preview-console__log {
 		color: $dark-secondary-text-color;
+		flex: 1 0 auto;
 	}
 
 	.preview-console__error {
 		color: $console-error-color;
+		flex: 1 0 auto;
 	}
 
 	.preview-console__warn {
 		color: $console-warn-color;
+		flex: 1 0 auto;
 	}
 }
 
@@ -41,7 +46,7 @@
 	display: flex;
 	flex-direction: column;
 	overflow-y: auto;
-	height: #{121 / $base-font-size}rem;
+	flex: 1 0 0%;
 
 }
 

client/styles/components/_nav.scss

@@ -1,6 +1,6 @@
 .nav {
 	width: 100%;
-	padding: #{10 / $base-font-size}rem #{40 / $base-font-size}rem;
+	padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
 	padding-left: #{170 / $base-font-size}rem;
 	display: flex;
 	flex-direction: row;
@@ -24,4 +24,22 @@
 	& + & {
 		margin-left: #{20 / $base-font-size}rem;
 	}
+	position: relative;
+	&:hover .nav__dropdown {
+		display: flex;
+	}
+}
+
+.nav__dropdown {
+	display: none;
+	position: absolute;
+	flex-direction: column;
+	background-color: $light-background-color;
+	padding: #{10 / $base-font-size}rem;
+	left: #{-10 / $base-font-size}rem;
+	border: 1px solid $ide-border-color;
+	& li + li {
+		margin-top: #{10 / $base-font-size}rem;
+	}
+	width: #{140 / $base-font-size}rem;
 }

server/controllers/session.controller.js

@@ -30,3 +30,9 @@ export function getSession(req, res) {
   }
   return res.status(404).send({ message: 'Session does not exist' });
 }
+
+export function destroySession(req, res) {
+  req.logout();
+  res.json({success: true});
+}
+

server/routes/session.routes.js

@@ -7,6 +7,8 @@ router.route('/login').post(SessionController.createSession);
 
 router.route('/session').get(SessionController.getSession);
 
+router.route('/logout').get(SessionController.destroySession);
+
 export default router;
 
 // TODO add github authentication stuff