From 737460a2c285d993c4f79d518ff3c2807512a780 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sun, 14 Jan 2024 10:17:50 +0100
Subject: [PATCH] Add DEBUG component for development environment

Introduced a new DEBUG component exclusively for the development environment. This component contains navigation options for email verification and the 'thank you' page. Updated the .gitignore file to no longer exclude DEBUG files, and included a basic layout and styling for the component.
---
 .gitignore                     |  3 ---
 src/App.tsx                    |  2 ++
 src/components/DEBUG/DEBUG.css | 11 +++++++++++
 src/components/DEBUG/DEBUG.tsx | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DEBUG/DEBUG.css
 create mode 100644 src/components/DEBUG/DEBUG.tsx

diff --git a/.gitignore b/.gitignore
index c223db9..4d29575 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-**/DEBUG
-**/DEBUG*
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index d324913..dbcaf2b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import Footer from "./components/footer/footer";
 import React from "react";
 import VerifyMail from "./components/verify_email/verify_mail";
 import ThankYou from "./components/verify_email/thank_you";
+import DEBUG from "./components/DEBUG/DEBUG";
 
 function App() {
     return (
@@ -16,6 +17,7 @@ function App() {
                     <Route path="/contact" element={<ContactForm/>}/>
                     <Route path="/verify-email" element={<VerifyMail/>}/>
                     <Route path="/thank-you" element={<ThankYou/>}/>
+                    {process.env.NODE_ENV === 'development' && <Route path="/debug" element={<DEBUG/>}/>}
                 </Routes>
             </BrowserRouter>
             <Footer/>
diff --git a/src/components/DEBUG/DEBUG.css b/src/components/DEBUG/DEBUG.css
new file mode 100644
index 0000000..afbfb83
--- /dev/null
+++ b/src/components/DEBUG/DEBUG.css
@@ -0,0 +1,11 @@
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+}
+
+button {
+    margin: 10px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/DEBUG/DEBUG.tsx b/src/components/DEBUG/DEBUG.tsx
new file mode 100644
index 0000000..65928af
--- /dev/null
+++ b/src/components/DEBUG/DEBUG.tsx
@@ -0,0 +1,33 @@
+import {FC} from "react";
+import {useNavigate} from 'react-router-dom';
+import {NavigateOptions} from "react-router/dist/lib/context";
+import './DEBUG.css'
+
+const DEBUG: FC = () =>  {
+    const navigate = useNavigate()
+    const handleClick = (link: string, options: NavigateOptions) => {
+        navigate(link, options);
+    }
+
+    return (
+        <div className='container'>
+            <button onClick={() => handleClick('/verify-email', {
+                state: {
+                    email: 'akastijn@alttd.com'
+                }
+            })}>Verify Email Debug</button>
+            <button onClick={() => handleClick('/thank-you', {
+                state: {
+                    formData: {
+                        row1: 'This is some text',
+                        row2: 'This is text as well',
+                        row3: 'And finally, here is even more text!'
+                    }
+                }
+            })}>Thank You Debug</button>
+            {/*<button onClick={() => handleClick('/page3', {})}>Page 3</button>*/}
+        </div>
+    )
+}
+
+export default DEBUG;
\ No newline at end of file