1 files changed, 42 insertions, 25 deletions

diff --git a/app/assets/javascripts/visual_review_toolbar/store/state.js b/app/assets/javascripts/visual_review_toolbar/store/state.js
index 22702d524b8..741a5c7d99c 100644
--- a/app/assets/javascripts/visual_review_toolbar/store/state.js
+++ b/app/assets/javascripts/visual_review_toolbar/store/state.js
@@ -1,8 +1,9 @@
-import { comment, login, collapseButton } from '../components';
+import { comment, login, mrForm } from '../components';
+import { localStorage, COMMENT_BOX, LOGIN, MR_ID } from '../shared';
 
 const state = {
   browser: '',
-  href: '',
+  usingGracefulStorage: '',
   innerWidth: '',
   innerHeight: '',
   mergeRequestId: '',
@@ -23,11 +24,31 @@ const getBrowserId = sUsrAg => {
   return aKeys[nIdx];
 };
 
+const nextView = (appState, form = 'none') => {
+  const formsList = {
+    [COMMENT_BOX]: currentState => (currentState.token ? mrForm : login),
+    [LOGIN]: currentState => (currentState.mergeRequestId ? comment(currentState) : mrForm),
+    [MR_ID]: currentState => (currentState.token ? comment(currentState) : login),
+    none: currentState => {
+      if (!currentState.token) {
+        return login;
+      }
+
+      if (currentState.token && !currentState.mergeRequestId) {
+        return mrForm;
+      }
+
+      return comment(currentState);
+    },
+  };
+
+  return formsList[form](appState);
+};
+
 const initializeState = (wind, doc) => {
   const {
     innerWidth,
     innerHeight,
-    location: { href },
     navigator: { platform, userAgent },
   } = wind;
 
@@ -39,7 +60,6 @@ const initializeState = (wind, doc) => {
   // This mutates our default state object above. It's weird but it makes the linter happy.
   Object.assign(state, {
     browser,
-    href,
     innerWidth,
     innerHeight,
     mergeRequestId,
@@ -49,30 +69,27 @@ const initializeState = (wind, doc) => {
     projectPath,
     userAgent,
   });
-};
 
-function getInitialView({ localStorage }) {
-  const loginView = {
-    content: login,
-    toggleButton: collapseButton,
-  };
+  return state;
+};
 
-  const commentView = {
-    content: comment,
-    toggleButton: collapseButton,
-  };
+const getInitialView = () => {
+  const token = localStorage.getItem('token');
+  const mrId = localStorage.getItem('mergeRequestId');
 
-  try {
-    const token = localStorage.getItem('token');
+  if (token) {
+    state.token = token;
+  }
 
-    if (token) {
-      state.token = token;
-      return commentView;
-    }
-    return loginView;
-  } catch (err) {
-    return loginView;
+  if (mrId) {
+    state.mergeRequestId = mrId;
   }
-}
 
-export { initializeState, getInitialView, state };
+  return nextView(state);
+};
+
+const setUsingGracefulStorageFlag = flag => {
+  state.usingGracefulStorage = !flag;
+};
+
+export { initializeState, getInitialView, nextView, setUsingGracefulStorageFlag, state };