From d6576409f1224b70dad264936da583fe40915e5d Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 16 Sep 2015 14:44:26 -0400 Subject: [PATCH] Something like session handling --- Makefile | 1 + package.json | 1 + server/template.html | 3 +++ src/components/avatar/avatar.jsx | 31 +++++++++++++++++++++++ src/components/avatar/avatar.scss | 3 +++ src/components/navigation/navigation.jsx | 26 +++++++++++-------- src/components/navigation/navigation.scss | 10 ++++---- src/mixins/session.jsx | 7 +++-- src/providers/session.js | 13 ++++++++++ src/providers/session.json | 17 +++++++++++++ src/views/splash/splash.jsx | 6 ++++- webpack.config.js | 1 + 12 files changed, 101 insertions(+), 18 deletions(-) create mode 100644 src/components/avatar/avatar.jsx create mode 100644 src/components/avatar/avatar.scss create mode 100644 src/providers/session.js create mode 100644 src/providers/session.json diff --git a/Makefile b/Makefile index 2f1255b66..91e33c97a 100644 --- a/Makefile +++ b/Makefile @@ -48,6 +48,7 @@ lint: $(ESLINT) ./*.js $(ESLINT) ./server/*.js $(ESLINT) ./src/*.jsx + $(ESLINT) ./src/providers/*.js* $(ESLINT) ./src/mixins/*.jsx $(ESLINT) ./src/views/**/*.jsx $(ESLINT) ./src/components/**/*.jsx diff --git a/package.json b/package.json index f0ad612da..59c4b5396 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "autoprefixer-loader": "2.1.0", "classnames": "2.1.3", "css-loader": "0.17.0", + "custom-event-polyfill": "0.2.1", "eslint": "1.3.1", "eslint-plugin-react": "3.3.1", "file-loader": "0.8.4", diff --git a/server/template.html b/server/template.html index 327a3f373..a8e01ae1e 100644 --- a/server/template.html +++ b/server/template.html @@ -23,6 +23,9 @@ + + + diff --git a/src/components/avatar/avatar.jsx b/src/components/avatar/avatar.jsx new file mode 100644 index 000000000..800e573b3 --- /dev/null +++ b/src/components/avatar/avatar.jsx @@ -0,0 +1,31 @@ +var React = require('react'); + +module.exports = React.createClass({ + propTypes: { + path: React.PropTypes.string, + userId: React.PropTypes.number, + size: React.PropTypes.number, + extension: React.PropTypes.string, + version: React.PropTypes.number + }, + getDefaultProps: function () { + return { + path: '//cdn2.scratch.mit.edu/get_image/user/', + userId: 2584924, + size: 32, + extension: 'png', + version: 1438702210.96 + }; + }, + getImageUrl: function () { + return ( + this.props.path + this.props.userId + '_' + + this.props.size + 'x' + this.props.size + '.' + + this.props.extension + '?v=' + this.props.version); + }, + render: function () { + var url = this.getImageUrl(); + return ( + ); + } +}); diff --git a/src/components/avatar/avatar.scss b/src/components/avatar/avatar.scss new file mode 100644 index 000000000..5e0e54e2e --- /dev/null +++ b/src/components/avatar/avatar.scss @@ -0,0 +1,3 @@ +.avatar { + border: 1px solid #ccc; +} \ No newline at end of file diff --git a/src/components/navigation/navigation.jsx b/src/components/navigation/navigation.jsx index 977c3d54e..0fec63f33 100644 --- a/src/components/navigation/navigation.jsx +++ b/src/components/navigation/navigation.jsx @@ -1,21 +1,21 @@ var React = require('react'); var classNames = require('classnames'); +var Avatar = require('../avatar/avatar.jsx'); var Dropdown = require('./dropdown.jsx'); var Input = require('../forms/input.jsx'); var Login = require('../login/login.jsx'); +var Session = require('../../mixins/session.jsx'); require('./navigation.scss'); module.exports = React.createClass({ + mixins: [ + Session + ], getInitialState: function () { return { 'loginOpen': false, - 'loggedIn': false, - 'loggedInUser': { - 'username': 'raimondious', - 'thumbnail': '//cdn2.scratch.mit.edu/get_image/user/2584924_32x32.png' - }, 'accountNavOpen': false }; }, @@ -27,10 +27,12 @@ module.exports = React.createClass({ this.setState({'loginOpen': false}); }, handleLogIn: function () { - this.setState({'loggedIn': true}); + // @todo Use an api + window.updateSession(require('../../providers/session.json')); }, handleLogOut: function () { - this.setState({'loggedIn': false}); + // @todo Use an api + window.updateSession({}); }, handleClickAccountNav: function () { this.setState({'accountNavOpen': true}); @@ -39,6 +41,7 @@ module.exports = React.createClass({ this.setState({'accountNavOpen': false}); }, render: function () { + var loggedIn = !!this.state.session.token; var classes = classNames({ 'inner': true, 'logged-in': this.state.loggedIn @@ -62,7 +65,7 @@ module.exports = React.createClass({ - {this.state.loggedIn ? [ + {loggedIn ? [
  • Messages
    • , @@ -71,8 +74,11 @@ module.exports = React.createClass({ ,
  • - - {this.state.loggedInUser.username} + + {this.state.session.user.username} a { font-weight: normal; font-size: 0.8125rem; - - img { - width: 30px; - height: 30px; - margin-right: 10px; + + .avatar { + width: 24px; + height: 24px; + margin-right: 5px; vertical-align: middle; border-radius: 3px; } diff --git a/src/mixins/session.jsx b/src/mixins/session.jsx index 8df039b89..3387ba2fa 100644 --- a/src/mixins/session.jsx +++ b/src/mixins/session.jsx @@ -1,10 +1,13 @@ module.exports = { getInitialState: function () { return { - session: {} + session: window._session }; }, + updateSession: function () { + this.setState({'session': window._session}); + }, componentWillMount: function () { - // @todo Fetch session from API + window.addEventListener('session', this.updateSession); } }; diff --git a/src/providers/session.js b/src/providers/session.js new file mode 100644 index 000000000..6091fda59 --- /dev/null +++ b/src/providers/session.js @@ -0,0 +1,13 @@ +require('xhr'); +require('custom-event-polyfill'); + +window._session = {}; + +window.updateSession = function (session) { + window._session = session; + var sessionEvent = new CustomEvent('session', session); + window.dispatchEvent(sessionEvent); +}; + +// @todo Get the session from an API +window.updateSession(require('./session.json')); diff --git a/src/providers/session.json b/src/providers/session.json new file mode 100644 index 000000000..c6f7516da --- /dev/null +++ b/src/providers/session.json @@ -0,0 +1,17 @@ +{ + "token": "62d43b28d86a14423e01bdb2995dbbb2", + "user": { + "id": 1709047, + "username": "thisandagain", + "avatarVersion": 1438702210.96 + }, + "permissions": { + "admin": true, + "social": true, + "educator": false + }, + "flags": { + "has_outstanding_email_confirmation": false, + "show_welcome": false + } +} diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index d26c6ec15..e0c7a68d0 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -30,13 +30,17 @@ var View = React.createClass({ // @todo API request for Featured }, render: function () { + var loggedIn = !!this.state.session.token; return (
    - + {loggedIn ? [
    + ] : [ + + ]} {this.state.featured.map(function (set) { return (