Merge pull request #31 from kadirahq/login-workflow

Implement a better workflow for local users
storybookjs · Oct 12, 2016 · bba5ece · bba5ece
2 parents f383c78 + 2815201
commit bba5ece
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/.storybook/stories.js b/.storybook/stories.js
@@ -61,6 +61,12 @@ storiesOf('Components', module)
   .add('CommentPanel - not loggedIn', () => (
     <CommentsPanel />
   ))
+  .add('CommentPanel - app not available', () => (
+    <CommentsPanel
+      user={true}
+      appNotAvailable={{}}
+    />
+  ))
   .add('CommentPanel - loggedIn with no comments', () => (
     <CommentsPanel
       user={true}

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "deploy-storybook": "storybook-to-ghpages",
     "prepublish": "node .scripts/npm-prepublish.js",
     "storybook": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' STORYBOOK_CLOUD_APPID='test-app' STORYBOOK_CLOUD_DATABASE='test-db' start-storybook -p 3006",
+    "storybook-local": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' start-storybook -p 3006",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

diff --git a/src/manager/components/CommentsPanel/index.js b/src/manager/components/CommentsPanel/index.js
@@ -5,6 +5,14 @@ import style from './style';
 
 export default class CommentsPanel extends Component {
   render() {
+    if (this.props.loading) {
+      return (
+        <div style={style.wrapper}>
+          <div style={style.message}>loading...</div>
+        </div>
+      );
+    }
+
     if (!this.props.user) {
       const signInUrl = `https://hub.getstorybook.io/sign-in?redirectUrl=${encodeURIComponent(location.href)}`;
       return (
@@ -16,10 +24,13 @@ export default class CommentsPanel extends Component {
       );
     }
 
-    if (this.props.loading) {
+    if (this.props.appNotAvailable) {
+      const appsUrl = 'https://hub.getstorybook.io/apps';
       return (
         <div style={style.wrapper}>
-          <div style={style.message}>loading...</div>
+          <div style={style.message}>
+            <a style={style.button} href={appsUrl}>Create an app for this repo on Storybook Hub</a>
+          </div>
         </div>
       );
     }

diff --git a/src/manager/containers/CommentsPanel/index.js b/src/manager/containers/CommentsPanel/index.js
@@ -28,15 +28,24 @@ export default class Container extends Component {
       this.store.setCurrentStory(kind, story);
     });
 
-    this.getCurrentUser();
+    this.init();
   }
 
   componentWillUnmount() {
     this.stopListeningToComments();
     this.stopListeningOnStory();
   }
 
-  getCurrentUser() {
+  _getAppInfo(persister) {
+    return persister
+      ._getAppInfo()
+      .then(
+        (appInfo) => Promise.resolve(appInfo),
+        (err) => Promise.resolve(null),
+      );
+  }
+
+  init() {
     const db = addons.getDatabase();
 
     if (typeof db.persister._getUser !== 'function') {
@@ -47,8 +56,16 @@ export default class Container extends Component {
     db.persister._getUser()
       .then(user => {
         this.store.setCurrentUser(user);
-        this.setState({ user, loading: false });
-      });
+        this.setState({ user });
+        return this._getAppInfo(db.persister);
+      })
+      .then(appInfo => {
+        const updatedState = { loading: false }
+        if (!appInfo) {
+          updatedState.appNotAvailable = true;
+        }
+        this.setState(updatedState);
+      })
   }
 
   addComment(text) {
@@ -73,6 +90,7 @@ export default class Container extends Component {
       user: this.state.user,
       comments: this.state.comments,
       loading: this.state.loading,
+      appNotAvailable: this.state.appNotAvailable,
       deleteComment: commentId => this.deleteComment(commentId),
       addComment: text => this.addComment(text),
     };