From c27a0d2389013ee75d8d1fbe81d532c42ab0276e Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 11 Mar 2024 18:09:39 +0100
Subject: [PATCH 1/2] simpele http request pagina aangemaakt, nodig om
 authenticatie te testen

---
 frontend/frontend/src/Theme.ts                | 32 ++++++------
 frontend/frontend/src/main.tsx                | 51 ++++++++++---------
 .../simpleRequestsPage/SimpleRequestsPage.tsx | 41 +++++++++++++++
 3 files changed, 85 insertions(+), 39 deletions(-)
 create mode 100644 frontend/frontend/src/pages/simpleRequestsPage/SimpleRequestsPage.tsx

diff --git a/frontend/frontend/src/Theme.ts b/frontend/frontend/src/Theme.ts
index 783c5f2f..a16a5b44 100644
--- a/frontend/frontend/src/Theme.ts
+++ b/frontend/frontend/src/Theme.ts
@@ -1,27 +1,27 @@
 import {createTheme} from "@mui/material";
 
 const theme = createTheme({
-    palette:{
-        primary:{
-            main:'#1E64C8',
-            contrastText:'#FCF8FD'
+    palette: {
+        primary: {
+            main: '#1E64C8',
+            contrastText: '#FCF8FD'
         },
-        secondary:{
-            main:'#D0E4FF',
-            contrastText:'#47464A'
+        secondary: {
+            main: '#D0E4FF',
+            contrastText: '#47464A'
         },
-        background:{
-            default:'#FCF8FD',
+        background: {
+            default: '#FCF8FD',
         },
-        text:{
-            primary:'#47464A',
-            secondary:'#FCF8FD'
+        text: {
+            primary: '#47464A',
+            secondary: '#898991'
         },
-        error:{
-            main:'#FF5445'
+        error: {
+            main: '#FF5445'
         },
-        success:{
-            main:'#81A476'
+        success: {
+            main: '#81A476'
         }
     },
 });
diff --git a/frontend/frontend/src/main.tsx b/frontend/frontend/src/main.tsx
index 4afb80d1..f048b358 100644
--- a/frontend/frontend/src/main.tsx
+++ b/frontend/frontend/src/main.tsx
@@ -3,38 +3,43 @@ import ReactDOM from "react-dom/client";
 import {ThemeProvider} from "@mui/material";
 import theme from "./Theme.ts";
 import "./i18n/config.ts";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import ErrorPage from "./pages/ErrorPage.tsx";
 
 import {MainPage} from "./pages/mainPage/MainPage.tsx";
 import {Helmet, HelmetProvider} from "react-helmet-async";
-import { SubjectsStudentPage } from "./pages/subjects_page/SubjectsStudentPage.tsx";
+import {SubjectsStudentPage} from "./pages/subjects_page/SubjectsStudentPage.tsx";
+import {SimpleRequestsPage} from "./pages/simpleRequestsPage/SimpleRequestsPage.tsx";
 
 
 const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <MainPage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/subjects_student",
-    element: <SubjectsStudentPage />,
-  },
+    {
+        path: "/",
+        element: <MainPage/>,
+        errorElement: <ErrorPage/>,
+    },
+    {
+        path: "/subjects_student",
+        element: <SubjectsStudentPage/>,
+    },
+    {
+        path: "/test_requests",
+        element: <SimpleRequestsPage/>,
+    }
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-      <HelmetProvider>
-      <Helmet>
-          <style>{`body { background-color: ${theme.palette.background.default}; }`}</style>
-      </Helmet>
+    <React.StrictMode>
+        <HelmetProvider>
+            <Helmet>
+                <style>{`body { background-color: ${theme.palette.background.default}; }`}</style>
+            </Helmet>
 
-      <React.Suspense fallback={<div>Loading...</div>}>
-            <ThemeProvider theme={theme}>
-              <RouterProvider router={router} />
-            </ThemeProvider>
-        </React.Suspense>
-      </HelmetProvider>
-  </React.StrictMode>
+            <React.Suspense fallback={<div>Loading...</div>}>
+                <ThemeProvider theme={theme}>
+                    <RouterProvider router={router}/>
+                </ThemeProvider>
+            </React.Suspense>
+        </HelmetProvider>
+    </React.StrictMode>
 );
diff --git a/frontend/frontend/src/pages/simpleRequestsPage/SimpleRequestsPage.tsx b/frontend/frontend/src/pages/simpleRequestsPage/SimpleRequestsPage.tsx
new file mode 100644
index 00000000..4cef8ec3
--- /dev/null
+++ b/frontend/frontend/src/pages/simpleRequestsPage/SimpleRequestsPage.tsx
@@ -0,0 +1,41 @@
+import {Button, Stack, TextField, Typography} from "@mui/material";
+import {useState} from "react";
+import axios from "axios";
+
+export function SimpleRequestsPage() {
+    const [url, setUrl] = useState("");
+    const [query, setQuery] = useState("");
+    const [response, setResponse] = useState("");
+
+    const handleRequest = (e: React.FormEvent) => {
+        e.preventDefault();
+        console.log("Requesting...");
+        axios.get(url, {params: query}).then((response) => {
+                setResponse(response.data);
+            }
+        ).catch((error) => {
+            setResponse(error.message);
+        });
+
+    }
+
+    return (
+        <>
+            <Stack direction={"column"} gap={2}
+                   component={"form"} noValidate
+                   onSubmit={handleRequest}
+            >
+                <TextField variant={"outlined"} label="url"
+                           fullWidth required error={url === ""}
+                           onChange={(e) => setUrl(e.target.value)}
+                />
+                <TextField variant={"outlined"} label="query" multiline
+                           fullWidth required error={query === ""}
+                           onChange={(e) => setQuery(e.target.value)}
+                />
+                <Button variant={"contained"} type={"submit"} disabled={(url === "") || (query === "")}>Submit</Button>
+            </Stack>
+            <Typography>{response}</Typography>
+        </>
+    );
+}
\ No newline at end of file

From 0c608d85b4be23ded45a6023880a46770ff5cbdb Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 11 Mar 2024 18:15:19 +0100
Subject: [PATCH 2/2] query moest nog geparsed worden als json van string

---
 .../src/pages/simpleRequestsPage/SimpleRequestsPage.tsx    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/frontend/src/pages/simpleRequestsPage/SimpleRequestsPage.tsx b/frontend/frontend/src/pages/simpleRequestsPage/SimpleRequestsPage.tsx
index 4cef8ec3..c5054f87 100644
--- a/frontend/frontend/src/pages/simpleRequestsPage/SimpleRequestsPage.tsx
+++ b/frontend/frontend/src/pages/simpleRequestsPage/SimpleRequestsPage.tsx
@@ -1,5 +1,5 @@
 import {Button, Stack, TextField, Typography} from "@mui/material";
-import {useState} from "react";
+import {FormEvent, useState} from "react";
 import axios from "axios";
 
 export function SimpleRequestsPage() {
@@ -7,10 +7,11 @@ export function SimpleRequestsPage() {
     const [query, setQuery] = useState("");
     const [response, setResponse] = useState("");
 
-    const handleRequest = (e: React.FormEvent) => {
+    const handleRequest = (e: FormEvent) => {
         e.preventDefault();
         console.log("Requesting...");
-        axios.get(url, {params: query}).then((response) => {
+        const params = JSON.parse(query);
+        axios.get(url, {params: params}).then((response) => {
                 setResponse(response.data);
             }
         ).catch((error) => {