From 5d11dcdc8468ed09026c940565f705be832cb19d Mon Sep 17 00:00:00 2001 From: omnikrll Date: Tue, 23 Aug 2016 23:38:58 -0400 Subject: [PATCH 1/9] add key property to lint message elements --- client/modules/IDE/components/EditorAccessibility.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/EditorAccessibility.js b/client/modules/IDE/components/EditorAccessibility.js index b2e0cbe3..24c0ef95 100644 --- a/client/modules/IDE/components/EditorAccessibility.js +++ b/client/modules/IDE/components/EditorAccessibility.js @@ -9,7 +9,7 @@ class EditorAccessibility extends React.Component { if (this.props.lintMessages.length > 0) { for (let i = 0; i < this.props.lintMessages.length; i++) { messages.push( -
  • +
  • {this.props.lintMessages[i].severity} in line {this.props.lintMessages[i].line} : {this.props.lintMessages[i].message} @@ -18,7 +18,12 @@ class EditorAccessibility extends React.Component { } } else { messages.push( -

    There are no lint messages

    + // react wants dom items from an array or + // iterator to have a key property. since this + // is the only item we're pushing to the array + // and don't have a counter to include, + // let's just call it 0. +

    There are no lint messages

    ); } return ( From 9457d2e57c9409f168ff0b072dff9812abc0c3a5 Mon Sep 17 00:00:00 2001 From: omnikrll Date: Wed, 24 Aug 2016 17:54:26 -0400 Subject: [PATCH 2/9] replace for loop with forEach --- .../IDE/components/EditorAccessibility.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/client/modules/IDE/components/EditorAccessibility.js b/client/modules/IDE/components/EditorAccessibility.js index 24c0ef95..f00cebc0 100644 --- a/client/modules/IDE/components/EditorAccessibility.js +++ b/client/modules/IDE/components/EditorAccessibility.js @@ -7,22 +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(
  • - {this.props.lintMessages[i].severity} in line - {this.props.lintMessages[i].line} : - {this.props.lintMessages[i].message} + {lintMessage.severity} in line + {lintMessage.line} : + {lintMessage.message}
    • ); - } + }); } else { messages.push( - // react wants dom items from an array or - // iterator to have a key property. since this - // is the only item we're pushing to the array - // and don't have a counter to include, - // let's just call it 0. + // no array index so let's just call it 0

    There are no lint messages

    ); } From 8a61917937fdebf2e56c19e7db4192c8a92c632f Mon Sep 17 00:00:00 2001 From: omnikrll Date: Thu, 25 Aug 2016 13:45:35 -0400 Subject: [PATCH 3/9] make 'no lint errors' p ino li --- client/modules/IDE/components/EditorAccessibility.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/IDE/components/EditorAccessibility.js b/client/modules/IDE/components/EditorAccessibility.js index f00cebc0..13c26753 100644 --- a/client/modules/IDE/components/EditorAccessibility.js +++ b/client/modules/IDE/components/EditorAccessibility.js @@ -19,7 +19,7 @@ class EditorAccessibility extends React.Component { } else { messages.push( // no array index so let's just call it 0 -

    There are no lint messages

    +
  • There are no lint messages
    • ); } return ( From 399e29f37b8a4e8b809b986b1e8be1409be2d61c Mon Sep 17 00:00:00 2001 From: omnikrll Date: Thu, 25 Aug 2016 13:48:52 -0400 Subject: [PATCH 4/9] remove comment --- client/modules/IDE/components/EditorAccessibility.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/modules/IDE/components/EditorAccessibility.js b/client/modules/IDE/components/EditorAccessibility.js index a39c535d..dbab82ad 100644 --- a/client/modules/IDE/components/EditorAccessibility.js +++ b/client/modules/IDE/components/EditorAccessibility.js @@ -18,7 +18,6 @@ class EditorAccessibility extends React.Component { }); } else { messages.push( - // no array index so let's just call it 0
  • There are no lint messages
    • ); } From b79cec93b0f303f30c96284f67647a29baf9eb76 Mon Sep 17 00:00:00 2001 From: catarak Date: Sat, 27 Aug 2016 19:14:22 -0400 Subject: [PATCH 5/9] change a to react-router link --- client/components/Nav.js | 19 +++++++++---------- client/images/file.svg | 14 ++++++++++++++ 2 files changed, 23 insertions(+), 10 deletions(-) create mode 100644 client/images/file.svg diff --git a/client/components/Nav.js b/client/components/Nav.js index 13950578..527b9bbf 100644 --- a/client/components/Nav.js +++ b/client/components/Nav.js @@ -65,17 +65,16 @@ function Nav(props) {

    ); - } else { - return ( -
  • -

    - - Open - -

    -
    • - ); } + return ( +
  • +

    + + Open + +

    +
    • + ); })()}

  • diff --git a/client/images/file.svg b/client/images/file.svg new file mode 100644 index 00000000..aa19bd0c --- /dev/null +++ b/client/images/file.svg @@ -0,0 +1,14 @@ + + + + "K" file icon Copy + Created with Sketch. + + + + + + + + + \ No newline at end of file From 515febceb2ae4c4dbd45e79981d458290ace08ae Mon Sep 17 00:00:00 2001 From: catarak Date: Sat, 27 Aug 2016 19:22:41 -0400 Subject: [PATCH 6/9] fix height of console messages and fix #74 --- client/styles/components/_console.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss index e1fd9658..d96dfd4c 100644 --- a/client/styles/components/_console.scss +++ b/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%; } From 64b2ea3da4a65c5663e6d837ba0e11ef85c875a1 Mon Sep 17 00:00:00 2001 From: catarak Date: Sat, 27 Aug 2016 20:46:20 -0400 Subject: [PATCH 7/9] add and test logout --- client/components/Nav.js | 35 ++++++++++++++++++++---- client/modules/IDE/pages/IDEView.js | 8 ++++-- client/modules/User/actions.js | 13 +++++++++ client/modules/User/reducers.js | 4 +++ client/styles/base/_base.scss | 4 +++ client/styles/components/_nav.scss | 20 +++++++++++++- server/controllers/session.controller.js | 6 ++++ server/routes/session.routes.js | 2 ++ 8 files changed, 84 insertions(+), 8 deletions(-) diff --git a/client/components/Nav.js b/client/components/Nav.js index 527b9bbf..2da859e8 100644 --- a/client/components/Nav.js +++ b/client/components/Nav.js @@ -85,10 +85,34 @@ function Nav(props) {

      • -
    • - {props.user.authenticated &&

      Hello, {props.user.username}!

      } - {!props.user.authenticated &&

      Login or Sign Up

      } -
      • + {(() => { + if (!props.user.authenticated) { + return ( +
    • +

      + Login or Sign Up +

      +
      • + ); + } + return ( +
    • + Hello, {props.user.username}! + +
      • + ); + })()}
    ); @@ -105,7 +129,8 @@ Nav.propTypes = { }).isRequired, project: PropTypes.shape({ id: PropTypes.string - }) + }), + logoutUser: PropTypes.func.isRequired }; export default Nav; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index d02a0cd5..965edc46 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/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'; @@ -117,6 +118,7 @@ class IDEView extends React.Component { exportProjectAsZip={this.props.exportProjectAsZip} cloneProject={this.props.cloneProject} project={this.props.project} + logoutUser={this.props.logoutUser} /> { + axios.get(`${ROOT_URL}/logout`, { withCredentials: true }) + .then(() => { + dispatch({ + type: ActionTypes.UNAUTH_USER + }); + }) + .catch(response => dispatch(authError(response.data.error))); + }; +} + diff --git a/client/modules/User/reducers.js b/client/modules/User/reducers.js index db3dac3e..c2f3f8ab 100644 --- a/client/modules/User/reducers.js +++ b/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 diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index 29568ba3..dbf361c6 100644 --- a/client/styles/base/_base.scss +++ b/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%; diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index 64867783..940f6af0 100644 --- a/client/styles/components/_nav.scss +++ b/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; } \ No newline at end of file diff --git a/server/controllers/session.controller.js b/server/controllers/session.controller.js index cbee93f4..77a9e20c 100644 --- a/server/controllers/session.controller.js +++ b/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}); +} + diff --git a/server/routes/session.routes.js b/server/routes/session.routes.js index b0305d70..8b68cefd 100644 --- a/server/routes/session.routes.js +++ b/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 From e6bd224694f29e714e32c4cd66cb634c167dcb2a Mon Sep 17 00:00:00 2001 From: catarak Date: Sat, 27 Aug 2016 21:28:00 -0400 Subject: [PATCH 8/9] add ES6 references to readme, add jsx-a11y to .eslintrc --- .eslintrc | 2 +- README.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index 4241933e..ea5baeef 100644 --- a/.eslintrc +++ b/.eslintrc @@ -27,7 +27,7 @@ "max-len": [1, 120, 4], }, "plugins": [ - "react", "import" + "react", "jsx-a11y", "import" ], "settings": { "import/parser": "babel-eslint", diff --git a/README.md b/README.md index 971d5de1..80276d5c 100644 --- a/README.md +++ b/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 From 4859b66cc63cec651f06d9bcaa42e13e4c651513 Mon Sep 17 00:00:00 2001 From: catarak Date: Sat, 27 Aug 2016 21:52:00 -0400 Subject: [PATCH 9/9] fix #54 --- client/components/Nav.js | 8 ++++++-- client/modules/IDE/pages/IDEView.js | 2 ++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/client/components/Nav.js b/client/components/Nav.js index 2da859e8..1485e041 100644 --- a/client/components/Nav.js +++ b/client/components/Nav.js @@ -59,7 +59,10 @@ function Nav(props) { return (

  • - + Open

    @@ -130,7 +133,8 @@ Nav.propTypes = { project: PropTypes.shape({ id: PropTypes.string }), - logoutUser: PropTypes.func.isRequired + logoutUser: PropTypes.func.isRequired, + stopSketch: PropTypes.func.isRequired }; export default Nav; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 965edc46..b90224bb 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -31,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); @@ -119,6 +120,7 @@ class IDEView extends React.Component { cloneProject={this.props.cloneProject} project={this.props.project} logoutUser={this.props.logoutUser} + stopSketch={this.props.stopSketch} />