feat: Example Implementation

public/locales/de/translation.json

@@ -1,4 +1,5 @@
 {
     "hello_world": "Hallo Welt",
-    "download": "Download"
+    "download": "Download",
+    "continue": "Fortfahren"
 }

public/locales/en/translation.json

@@ -1,4 +1,5 @@
 {
     "hello_world": "Hello World",
-    "download": "Download"
+    "download": "Download",
+    "continue": "Continue"
 }

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>

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>
         );
-    }
-}
+}
+
+export default InfoPageComponent;

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';
 

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;

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;

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;

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;