reverted to hash routing

anshuthopsee · Oct 19, 2023 · 58af2bb · 58af2bb
1 parent ecc8848
commit 58af2bb
Show file tree

Hide file tree

Showing 10 changed files with 9 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ An Option Payoff visualizing tool, that allows you to create strategies, add and
 2. Select/Unselect option legs with the checkbox.
 3. Save modified (custom) strategies as new, or update saved strategies.
 4. Persistence of saved strategies through local storage.
-5. URL based routing, to select a strategy from the URL with 404 error mitigation. (Example - https://anshuthopsee.github.io/option-payoff/Bull-Call-Spread). The strategy name is case sensitive and all the words should be joined with "-" (hyphen).
+5. Hash routing, to select a strategy from the URL without throwing a 404 error. (Example - https://anshuthopsee.github.io/option-payoff/#/Bull-Call-Spread). The strategy name is case sensitive and all the words should be joined with "-" (hyphen).
 6. Numeric input value range: 0.1 >= value < 10000.
 
 ## To be added

diff --git a/index.html b/index.html
@@ -5,28 +5,6 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Option Payoff - Visualize Payoff for Preset & Custom Strategies.</title>
-    <script type="text/javascript">
-      // Single Page Apps for GitHub Pages
-      // MIT License
-      // https://github.com/rafgraph/spa-github-pages
-      // This script checks to see if a redirect is present in the query string,
-      // converts it back into the correct url and adds it to the
-      // browser's history using window.history.replaceState(...),
-      // which won't cause the browser to attempt to load the new url.
-      // When the single page app is loaded further down in this file,
-      // the correct url will be waiting in the browser's history for
-      // the single page app to route accordingly.
-      (function(l) {
-        if (l.search[1] === '/' ) {
-          var decoded = l.search.slice(1).split('&').map(function(s) { 
-            return s.replace(/~and~/g, '&')
-          }).join('?');
-          window.history.replaceState(null, null,
-              l.pathname.slice(0, -1) + decoded + l.hash
-          );
-        }
-      }(window.location))
-    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/404.html b/public/404.html
diff --git a/src/Contexts/CustomPresetsContextProvider.jsx b/src/Contexts/CustomPresetsContextProvider.jsx
@@ -38,9 +38,9 @@ const CustomPresetsContextProvider = ({ children }) => {
       const precedingPresetIndex = index-1;
       if (precedingPresetIndex > -1) {
         const precedingPresetName = customPresets[precedingPresetIndex].name;
-        navigate(`/${precedingPresetName}`);
+        navigate(`#/${precedingPresetName}`);
       } else {
-        navigate("/Bull-Put-Spread");
+        navigate("#/Bull-Put-Spread");
       };
     };
     setCustomPresets(customPresets.filter((preset, i) => index !== i))

diff --git a/src/components/Presets/BullCallSpreadSVG.jsx b/src/components/Presets/BullCallSpreadSVG.jsx
@@ -27,7 +27,7 @@ const BullCallSpreadSVG = () => {
         justifyContent: "center" 
       }
     }
-      onClick={() => navigate("/Bull-Call-Spread")}
+      onClick={() => navigate("#/Bull-Call-Spread")}
     >
       <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         {/* Background */}

diff --git a/src/components/Presets/BullPutSpreadSVG.jsx b/src/components/Presets/BullPutSpreadSVG.jsx
@@ -26,7 +26,7 @@ const BullPutSpreadSVG = () => {
         justifyContent: "center" 
       }
     }
-      onClick={() => navigate("/Bull-Put-Spread")}
+      onClick={() => navigate("#/Bull-Put-Spread")}
     >
       <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         {/* Background */}

diff --git a/src/components/Presets/CustomSVG.jsx b/src/components/Presets/CustomSVG.jsx
@@ -46,7 +46,7 @@ const CustomSVG = ({ name, index }) => {
         justifyContent: "center" 
       }
     }
-      onClick={() => navigate(`/${joinWords(name)}`)}
+      onClick={() => navigate(`#/${joinWords(name)}`)}
     >
       <IconButton sx={{ position: 'absolute', top: "0px", right: "0px" }} onClick={handleDeleteClick}>
         <CancelIcon/>

diff --git a/src/components/Presets/ShortStraddleSVG.jsx b/src/components/Presets/ShortStraddleSVG.jsx
@@ -26,7 +26,7 @@ const ShortStraddleSVG = () => {
         justifyContent: "center" 
       }
     }
-      onClick={() => navigate("/Short-Straddle")}
+      onClick={() => navigate("#/Short-Straddle")}
     >
       <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         {/* Background */}

diff --git a/src/components/Presets/ShortStrangleSVG.jsx b/src/components/Presets/ShortStrangleSVG.jsx
@@ -26,7 +26,7 @@ const ShortStrangleSVG = () => {
         justifyContent: "center" 
       }
     }
-      onClick={() => navigate("/Short-Strangle")}
+      onClick={() => navigate("#/Short-Strangle")}
     >
       <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         {/* Background */}

diff --git a/src/hooks/utils.js b/src/hooks/utils.js
@@ -11,7 +11,7 @@ export const splitWords = (hyphenSeparatedString) => {
 };
 
 export const getPathName = (location) => {
-  let pathName = location.pathname.slice(1);
+  let pathName = location.hash.slice(2);
   const indexOfSlash = pathName.indexOf('/');
 
   if (indexOfSlash !== -1) {