From cbe0f21cc395f0efb37b08944656989e88700693 Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Mon, 20 May 2024 16:02:33 +0200
Subject: [PATCH] feat: Example Implementation

---
 public/locales/de/translation.json   |  3 ++-
 public/locales/en/translation.json   |  3 ++-
 src/App.js                           | 15 +++++++++------
 src/components/InfoPageComponent.jsx | 26 +++++++++++---------------
 src/core/log/RouteTracker.jsx        |  2 +-
 src/pages/TestEndPage.jsx            | 11 +++++++++++
 src/pages/TestInfoPage.jsx           | 10 ++++++++++
 src/pages/TestPage.jsx               |  9 +++++----
 src/pages/TestPage2.jsx              | 16 ++++++++++++++++
 9 files changed, 67 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/TestEndPage.jsx
 create mode 100644 src/pages/TestInfoPage.jsx
 create mode 100644 src/pages/TestPage2.jsx

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 56c66cc..cb0f7fb 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -1,4 +1,5 @@
 {
     "hello_world": "Hallo Welt",
-    "download": "Download"
+    "download": "Download",
+    "continue": "Fortfahren"
 }
\ No newline at end of file
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 850859e..562fb5f 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -1,4 +1,5 @@
 {
     "hello_world": "Hello World",
-    "download": "Download"
+    "download": "Download",
+    "continue": "Continue"
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 5819e0a..9f95f21 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Route, Routes } from "react-router-dom";
 import { GeistProvider, CssBaseline } from '@geist-ui/core'
 import RouteTracker from "./core/log/RouteTracker";
@@ -7,8 +7,9 @@ import { persist, createJSONStorage } from 'zustand/middleware'
 
 const NoPageFound = React.lazy(() => import("./pages/NoPageFound"));
 const TestPage = React.lazy(() => import("./pages/TestPage"));
-const TestQuestionnaire = React.lazy(() => import("./pages/TestQuestionnaire"));
-
+const TestPage2 = React.lazy(() => import("./pages/TestPage2"));
+const TestInfoPage = React.lazy(() => import("./pages/TestInfoPage"));
+const TestEndPage = React.lazy(() => import("./pages/TestEndPage"));
 
 export const sensorLogState = createStore(
   persist(
@@ -47,9 +48,11 @@ function App() {
       <React.Suspense fallback="loading">
       <RouteTracker />
         <Routes>
-          <Route path="/" element={<React.Suspense fallback={<>...</>}><TestPage /></React.Suspense>} />
-          <Route path="/info" element={<React.Suspense fallback={<>...</>}><TestPage /></React.Suspense>} />
-          <Route path="/questionnaire/:id" element={<React.Suspense fallback={<>...</>}><TestQuestionnaire /></React.Suspense>} />
+          <Route path="/" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="info"/></React.Suspense>} />
+          <Route path="/info" element={<React.Suspense fallback={<>...</>}><TestPage redirectLoc="in-between"/></React.Suspense>} />
+          <Route path="/in-between" element={<React.Suspense fallback={<>...</>}><TestInfoPage redirectLoc="otherpage"/></React.Suspense>} />
+          <Route path="/otherpage" element={<React.Suspense fallback={<>...</>}><TestPage2 redirectLoc="end"/></React.Suspense>} />
+          <Route path="/end" element={<React.Suspense fallback={<>...</>}><TestEndPage /></React.Suspense>} />
           <Route path="*" element={<React.Suspense fallback={<>...</>}><NoPageFound /></React.Suspense>} />
         </Routes>
       </React.Suspense>
diff --git a/src/components/InfoPageComponent.jsx b/src/components/InfoPageComponent.jsx
index 98c37c0..634cc9a 100644
--- a/src/components/InfoPageComponent.jsx
+++ b/src/components/InfoPageComponent.jsx
@@ -1,24 +1,20 @@
 import React from "react";
+import { getTranslation } from "../core/i18n/I18NHandler";
+import { Button } from '@geist-ui/core';
 
-export default class InfoPageComponent extends React.Component {
+const redirectToPage = (redirectLoc) => {
+    window.location.href = "./" + redirectLoc;
+}
 
-    constructor(props) {
-        super(props);
-        console.log("ye");
-    }
-
-    setContent(content) {
-        this.props.children = content;
-    }
-
-    render() {
+function InfoPageComponent({children, redirectLoc}) {
         return (
             <div>
-                {this.props.children}
+                {children}
                 <div>
-                    <button>Hello World</button>
+                    <Button onClick={() => {redirectToPage(redirectLoc)}}>{getTranslation("continue")}</Button>
                 </div>
             </div>
         );
-    }
-}
\ No newline at end of file
+}
+
+export default InfoPageComponent;
\ No newline at end of file
diff --git a/src/core/log/RouteTracker.jsx b/src/core/log/RouteTracker.jsx
index 36d962e..4f545e5 100644
--- a/src/core/log/RouteTracker.jsx
+++ b/src/core/log/RouteTracker.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { pushToVisitLog } from './SensorLogger';
 
diff --git a/src/pages/TestEndPage.jsx b/src/pages/TestEndPage.jsx
new file mode 100644
index 0000000..77d50a3
--- /dev/null
+++ b/src/pages/TestEndPage.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import DownloadButton from "../components/DownloadButton";
+
+function TestInfoPage() {
+        return (<div>
+            <p>Thank you for participating! ❤️</p>
+            <DownloadButton />
+            </div>);
+}
+
+export default TestInfoPage;
\ No newline at end of file
diff --git a/src/pages/TestInfoPage.jsx b/src/pages/TestInfoPage.jsx
new file mode 100644
index 0000000..ccf7d95
--- /dev/null
+++ b/src/pages/TestInfoPage.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import InfoPageComponent from "../components/InfoPageComponent";
+
+function TestInfoPage({redirectLoc}) {
+        return (<InfoPageComponent redirectLoc={redirectLoc}>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+            </InfoPageComponent>);
+}
+
+export default TestInfoPage;
\ No newline at end of file
diff --git a/src/pages/TestPage.jsx b/src/pages/TestPage.jsx
index a72bccd..1983142 100644
--- a/src/pages/TestPage.jsx
+++ b/src/pages/TestPage.jsx
@@ -3,14 +3,15 @@ import { getTranslation } from "../core/i18n/I18NHandler";
 import WebpageBanner from "../components/webpage_container/WebpageBanner";
 import { StudySite, getHeatmapData } from "../components/webpage_container/StudySite";
 import { pushToMouseLog, getSensorLog } from "../core/log/SensorLogger";
+import { Button } from '@geist-ui/core';
 
-function TestPage() {
+
+function TestPage({redirectLoc}) {
         var clickFunction = function() {
             pushToMouseLog(getHeatmapData());
-            console.log(getSensorLog());
-            alert(JSON.stringify(getSensorLog()));
+            window.location.href = "./" + redirectLoc;
         };
-        return (<StudySite><WebpageBanner translationKey="hello_world" /><p onClick={clickFunction}>{getTranslation("hello_world")}</p><button>Teeest</button></StudySite>);
+        return (<StudySite><WebpageBanner translationKey="hello_world" /><p onClick={() => {clickFunction()}}>{getTranslation("hello_world")}</p><Button onClick={clickFunction}>Ye</Button></StudySite>);
 }
 
 export default TestPage;
\ No newline at end of file
diff --git a/src/pages/TestPage2.jsx b/src/pages/TestPage2.jsx
new file mode 100644
index 0000000..7b76ca7
--- /dev/null
+++ b/src/pages/TestPage2.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { getTranslation } from "../core/i18n/I18NHandler";
+import WebpageBanner from "../components/webpage_container/WebpageBanner";
+import { StudySite, getHeatmapData } from "../components/webpage_container/StudySite";
+import { pushToMouseLog } from "../core/log/SensorLogger";
+import { Button } from '@geist-ui/core';
+
+function TestPage2({redirectLoc}) {
+    var clickFunction = function() {
+        pushToMouseLog(getHeatmapData());
+        window.location.href = "./" + redirectLoc;
+    };
+        return (<StudySite><WebpageBanner translationKey="hello_world" /><p>{getTranslation("hello_world")}</p><Button onClick={() => {clickFunction()}}>Go on...</Button></StudySite>);
+}
+
+export default TestPage2;
\ No newline at end of file