From f868dbf4b9fe9d5adb62c7c7ecde3968e61b033f Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Thu, 6 Jun 2024 12:41:09 +0200
Subject: [PATCH] feat: Made endpage look better and added secret code for
 download button.

---
 src/App.js                |  4 ++--
 src/pages/EndPage.jsx     | 33 +++++++++++++++++++++++++++++++++
 src/pages/TestEndPage.jsx | 13 -------------
 3 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/EndPage.jsx
 delete mode 100644 src/pages/TestEndPage.jsx

diff --git a/src/App.js b/src/App.js
index 04c7680..c83e49e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -28,7 +28,7 @@ const InBetweenSite6 = React.lazy(() =>
 
 const TestInfoPage = React.lazy(() => import("./pages/TestInfoPage"));
 
-const TestEndPage = React.lazy(() => import("./pages/TestEndPage"));
+const EndPage = React.lazy(() => import("./pages/EndPage"));
 const StartPage1 = React.lazy(() => import("./pages/study_site_1/StartPage1"));
 const StartPage2 = React.lazy(() => import("./pages/study_site_2/StartPage2"));
 const StartPage3 = React.lazy(() => import("./pages/study_site_3/StartPage3"));
@@ -252,7 +252,7 @@ function App() {
             path="/end"
             element={
               <React.Suspense fallback={<>...</>}>
-                <TestEndPage />
+                <EndPage />
               </React.Suspense>
             }
           />
diff --git a/src/pages/EndPage.jsx b/src/pages/EndPage.jsx
new file mode 100644
index 0000000..fc78674
--- /dev/null
+++ b/src/pages/EndPage.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import DownloadButton from "../components/DownloadButton";
+
+function EndPage() {
+  const [clickCount, setClickCount] = useState(0);
+  const [buttonVisible, setButtonVisible] = useState(false);
+
+  const handleTextClick = () => {
+    const newCount = clickCount + 1;
+    setClickCount(newCount);
+    if (newCount >= 10) {
+      setButtonVisible(true);
+    }
+  };
+
+  return (
+    <div>
+      <p
+        onClick={handleTextClick}
+        style={{ cursor: "pointer", margin: "10px auto", width: "fit-content" }}
+      >
+        Thank you for participating! ❤️
+      </p>
+      {buttonVisible && (
+        <div style={{ margin: "0 auto", width: "fit-content" }}>
+          <DownloadButton />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default EndPage;
diff --git a/src/pages/TestEndPage.jsx b/src/pages/TestEndPage.jsx
deleted file mode 100644
index e86728e..0000000
--- a/src/pages/TestEndPage.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import DownloadButton from "../components/DownloadButton";
-
-function TestInfoPage() {
-  return (
-    <div>
-      <p>Thank you for participating! ❤️</p>
-      <DownloadButton />
-    </div>
-  );
-}
-
-export default TestInfoPage;