From 7f1f25eb423c76dd3e8e384020653b3c0de1cb60 Mon Sep 17 00:00:00 2001
From: stevepodell <steve@podell.com>
Date: Fri, 16 Feb 2024 15:25:22 -0800
Subject: [PATCH] Added building and access via webapp to the Storybook design
 inventory (Part 2)

Now do the redirect in App.jsx.
New https requests will be intercepted before they get to the React Router, and the DOM window.location.hrf and if pointed at /storybook will be reset to the desired /storybook/index.html

Works fine locally (as did the prior approach), we will see how it does on the production servers.

Implements https://wevoteusa.atlassian.net/browse/WV-206
---
 .../README.TXT => node/STORYBOOK-README.TXT          |  0
 src/App.jsx                                          |  8 ++++++--
 src/js/components/Widgets/StorybookRedirect.jsx      | 12 ------------
 webpack.config.js                                    |  3 ++-
 4 files changed, 8 insertions(+), 15 deletions(-)
 rename storybook-static/README.TXT => node/STORYBOOK-README.TXT (100%)
 delete mode 100644 src/js/components/Widgets/StorybookRedirect.jsx

diff --git a/storybook-static/README.TXT b/node/STORYBOOK-README.TXT
similarity index 100%
rename from storybook-static/README.TXT
rename to node/STORYBOOK-README.TXT
diff --git a/src/App.jsx b/src/App.jsx
index dde24eb6b..9636c01d8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -20,7 +20,6 @@ import { isCordova, isWebApp } from './js/common/utils/isCordovaOrWebApp';
 import { renderLog } from './js/common/utils/logging';
 import Header from './js/components/Navigation/Header';
 import HeaderBarSuspense from './js/components/Navigation/HeaderBarSuspense';
-import StorybookRedirect from './js/components/Widgets/StorybookRedirect';
 import webAppConfig from './js/config';
 import VoterStore from './js/stores/VoterStore';
 import initializeFacebookSDK from './js/utils/initializeFacebookSDK';
@@ -363,6 +362,12 @@ class App extends Component {
     The props.match.path shows exactly which route string from this file, was selected by the <Switch>
     */
 
+    if (window.location.href.endsWith('/storybook')) {
+      const destinationHref = `${window.location.href}-static/index.html?path=/docs/design-system--docs`;
+      console.log('Storybook redirect from: ', window.location.href, ' to: ', destinationHref);
+      window.location.href = destinationHref;
+    }
+
     return (
       <>
         {enableFullStory && <FullStory org={webAppConfig.FULL_STORY_ORG} />}
@@ -551,7 +556,6 @@ class App extends Component {
                   <Route path="/sign_in_email/:email_secret_key" component={SignInEmailProcess} />
                   <Route path="/setupaccount/:set_up_page" exact component={SetUpAccountRoot} />
                   <Route path="/setupaccount" exact><SetUpAccountRoot /></Route>
-                  <Route path="/storybook"><StorybookRedirect /></Route>
                   <Route path="/squads" exact><Squads /></Route>
                   <Route exact path="/start-a-campaign"><CampaignStartIntro /></Route>
                   <Route path="/terms" component={TermsOfService} />
diff --git a/src/js/components/Widgets/StorybookRedirect.jsx b/src/js/components/Widgets/StorybookRedirect.jsx
deleted file mode 100644
index ae049c55d..000000000
--- a/src/js/components/Widgets/StorybookRedirect.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { renderLog } from '../../common/utils/logging';
-
-
-// React functional component example
-export default function StorybookRedirect () {
-  renderLog('StorybookRedirect functional component');
-
-  return (
-    <a href="/storybook?path=/docs/design-system--docs">Redirect to Html page</a>
-  );
-}
diff --git a/webpack.config.js b/webpack.config.js
index 0a269cd3f..e3378a920 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -135,7 +135,8 @@ module.exports = (env, argv) => ({
           to: 'img/',
           globOptions: { ignore: ['**/DO-NOT-BUNDLE/**']},
         },
-        { from: 'storybook-static', to: './storybook' },
+        { from: 'node/STORYBOOK-README.TXT', to: './storybook-static/STORYBOOK-README.TXT' },
+        { from: 'storybook-static', to: './storybook-static' },
       ],
     }),
     new MomentLocalesPlugin(),