Add debug menu and clearing local storage

1 files changed, 21 insertions, 1 deletions

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 448da54..1743133 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,9 +1,21 @@
 import React from "react";
-import { IoHeart } from "react-icons/io5";
+import { IoBug, IoHeart } from "react-icons/io5";
+import { Button } from "..";
 
 import * as Styled from "./index.styled";
 
 export function Footer() {
+  const [showDebugMenu, setShowDebugMenu] = React.useState<boolean>(false);
+
+  const toggleDebugMenu = React.useCallback(() => {
+    setShowDebugMenu(show => !show)
+  }, []);
+
+  const clearLocalStorage = React.useCallback(() => {
+    localStorage.clear();
+    location.reload();
+  }, []);
+
   return (
     <footer>
       <Styled.Text>
@@ -16,6 +28,14 @@ export function Footer() {
           Maciej Synowski
         </Styled.Link>
       </Styled.Text>
+      <Styled.Text>
+        <Button onClick={toggleDebugMenu}><IoBug /> Debug Options</Button><br />
+        {showDebugMenu &&
+          <Button variant="red" onClick={clearLocalStorage}>
+            Clear Local Storage & Reload
+          </Button>
+        }
+      </Styled.Text>
     </footer>
   );
 }