From 2956445cf2c6fdb683aef2668573d365477cea73 Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Wed, 19 Oct 2016 18:57:44 +0530 Subject: [PATCH 1/3] Show comments and login button for guests --- package.json | 2 +- src/manager/components/CommentForm/index.js | 17 +++++++++++++++++ src/manager/components/CommentForm/style.js | 10 ++++++---- src/manager/components/CommentList/index.js | 2 +- src/manager/components/CommentsPanel/index.js | 11 ----------- .../containers/CommentsPanel/dataStore.js | 11 ++--------- src/manager/containers/CommentsPanel/index.js | 9 ++++----- 7 files changed, 31 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index e111c44cbec0..d87631222b3f 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "testonly": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js", "test": "npm run lint && npm run testonly", "test-watch": "npm run testonly -- --watch --watch-extensions js", - "storybook": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' STORYBOOK_CLOUD_APPID='test-app' STORYBOOK_CLOUD_DATABASE='test-db' start-storybook -p 3006", + "storybook": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' STORYBOOK_CLOUD_APPID='15a1beac-52b5-4ade-abeb-c2313f190c1f' STORYBOOK_CLOUD_DATABASE='7d9e7739-008b-43a2-9851-2dc8f41e391b' start-storybook -p 3006", "storybook-local": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' start-storybook -p 9010", "storybook-remote": "start-storybook -p 3006", "publish-storybook": "bash .scripts/publish_storybook.sh" diff --git a/src/manager/components/CommentForm/index.js b/src/manager/components/CommentForm/index.js index 2d59be273a04..b66fec1bab96 100644 --- a/src/manager/components/CommentForm/index.js +++ b/src/manager/components/CommentForm/index.js @@ -41,6 +41,11 @@ export default class CommentForm extends Component { this.setState({ text: '' }); } + openLogin() { + const signInUrl = `https://hub.getstorybook.io/sign-in?redirectUrl=${encodeURIComponent(location.href)}`; + location.href = signInUrl; + } + handleKeyDown(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); @@ -49,6 +54,18 @@ export default class CommentForm extends Component { } render() { + if (!this.props.user) { + return ( +
+ +
+ ); + } + const { text } = this.state; return (
diff --git a/src/manager/components/CommentForm/style.js b/src/manager/components/CommentForm/style.js index 1429f21fafd1..b60767859c28 100644 --- a/src/manager/components/CommentForm/style.js +++ b/src/manager/components/CommentForm/style.js @@ -16,14 +16,16 @@ export default { alignItems: 'center', borderTop: '1px solid rgb(234, 234, 234)', }, - loginButton: { + submitButton: { ...button, - fontWeight: 'bold', - borderRight: '1px solid rgb(234, 234, 234)', + cursor: 'pointer', + borderRadius: '0 0 4px 0', }, - submitButton: { + loginButton: { ...button, + flex: 1, cursor: 'pointer', + fontWeight: 'bold', borderRadius: '0 0 4px 0', }, input: { diff --git a/src/manager/components/CommentList/index.js b/src/manager/components/CommentList/index.js index d613e1b11c2f..6e323d0f1ad1 100644 --- a/src/manager/components/CommentList/index.js +++ b/src/manager/components/CommentList/index.js @@ -30,7 +30,7 @@ export default class CommentList extends Component { this.props.deleteComment(comment.id)} /> ))} diff --git a/src/manager/components/CommentsPanel/index.js b/src/manager/components/CommentsPanel/index.js index 986cb5d162e0..5132afc3b04c 100644 --- a/src/manager/components/CommentsPanel/index.js +++ b/src/manager/components/CommentsPanel/index.js @@ -15,17 +15,6 @@ export default class CommentsPanel extends Component { ); } - if (!this.props.user) { - const signInUrl = `https://hub.getstorybook.io/sign-in?redirectUrl=${encodeURIComponent(location.href)}`; - return ( -
-
- SignIn with Storybook Hub -
-
- ); - } - if (this.props.appNotAvailable) { const appsUrl = 'https://hub.getstorybook.io/apps'; return ( diff --git a/src/manager/containers/CommentsPanel/dataStore.js b/src/manager/containers/CommentsPanel/dataStore.js index 8e136463e7b2..2e59cc918a19 100644 --- a/src/manager/containers/CommentsPanel/dataStore.js +++ b/src/manager/containers/CommentsPanel/dataStore.js @@ -59,7 +59,7 @@ export default class DataStore { this.currentStory = { sbKind, sbStory }; // We don't need to do anything if the there's no loggedIn user. - if (!this.user) return; + // if (!this.user) return; this._reloadCurrentComments(); const item = this._getFromCache(this.currentStory); @@ -88,13 +88,6 @@ export default class DataStore { setCurrentUser(user) { this.user = user; - // We don't load comments in the `setCurrentStory` if there's no loggedIn - // user. - // That's why we need to do this here. - if (user && this.currentStory) { - const { sbKind, sbStory } = this.currentStory; - this.setCurrentStory(sbKind, sbStory); - } } _loadUsers() { @@ -123,7 +116,7 @@ export default class DataStore { // add to cache this._addToCache(currentStory, comments); - /* eslint no-param-reassign:0 */ + /* eslint no-param-reassign:0 */ // set comments only if we are on the relavant story if (deepEquals(currentStory, this.currentStory)) { this._fireComments(comments); diff --git a/src/manager/containers/CommentsPanel/index.js b/src/manager/containers/CommentsPanel/index.js index d9f2a7cf1728..93259729edba 100644 --- a/src/manager/containers/CommentsPanel/index.js +++ b/src/manager/containers/CommentsPanel/index.js @@ -63,13 +63,12 @@ export default class Container extends Component { db.persister._getUser() .then(u => Promise.resolve(u), err => Promise.resolve(null)) .then((user) => { - if (!user) { + if (user) { + this.store.setCurrentUser(user); + this.setState({ user }); + } else { this.setState({ user: null }); - return Promise.resolve(null); } - - this.store.setCurrentUser(user); - this.setState({ user }); return this._getAppInfo(db.persister); }) .then((appInfo) => { From fae24df40fc8f06e7100c9e4e4c2d65c57b43c1e Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Wed, 19 Oct 2016 19:12:32 +0530 Subject: [PATCH 2/3] Optimize for wider screens --- src/manager/components/CommentForm/index.js | 8 ++++++-- src/manager/components/CommentForm/style.js | 7 ------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/manager/components/CommentForm/index.js b/src/manager/components/CommentForm/index.js index b66fec1bab96..024d20c6f5fe 100644 --- a/src/manager/components/CommentForm/index.js +++ b/src/manager/components/CommentForm/index.js @@ -57,10 +57,14 @@ export default class CommentForm extends Component { if (!this.props.user) { return (
+