Added support for using real accessTokens in mgt.dev (#1286)

nmetulev · sebastienlevert · web-flow · commit 58966be9c65b · 2021-12-07T14:04:48.000-05:00
Co-authored-by: Sébastien Levert &lt;sebastienlevert@users.noreply.github.com&gt;
diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -97,7 +97,25 @@ export const withCodeEditor = makeDecorator({
       css: styleCode
     };
 
-    editor.addEventListener('fileUpdated', () => {
+    const loadEditorContent = () => {
+      const token = window.parent.location.hash.replace('#', '');
+      console.log(token);
+
+      let providerInitCode = `
+        import {Providers, MockProvider} from "${mgtScriptName}";
+        Providers.globalProvider = new MockProvider(true);
+      `;
+
+      if (token) {
+        providerInitCode = `
+          import {Providers, SimpleProvider, ProviderState} from "${mgtScriptName}";
+          Providers.globalProvider = new SimpleProvider(async () => {
+            return '${token}';
+          });
+          Providers.globalProvider.setState(ProviderState.SignedIn);
+        `;
+      }
+
       const storyElement = document.createElement('iframe');
 
       storyElement.addEventListener('load', () => {
@@ -114,8 +132,7 @@ export const withCodeEditor = makeDecorator({
             <head>
               <script type="module" src="${mgtScriptName}"></script>
               <script type="module">
-                import {Providers, MockProvider} from "${mgtScriptName}";
-                Providers.globalProvider = new MockProvider(true);
+                ${providerInitCode}
               </script>
               <style>
                 html, body {
@@ -141,7 +158,11 @@ export const withCodeEditor = makeDecorator({
       storyElement.className = 'story-mgt-preview';
       storyElementWrapper.innerHTML = '';
       storyElementWrapper.appendChild(storyElement);
-    });
+    };
+
+    window.parent.addEventListener('hashchange', loadEditorContent);
+
+    editor.addEventListener('fileUpdated', loadEditorContent);
 
     const separator = document.createElement('div');
 
