Merge pull request #50 from SELab-2/frontend

Frontend naar develop voor milestone 1
SELab-2 · Mar 12, 2024 · ef0be33 · ef0be33
2 parents db8b92d + 1064a49
commit ef0be33
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 39 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,42 @@
+import {Button, Stack, TextField, Typography} from "@mui/material";
+import {FormEvent, 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: FormEvent) => {
+        e.preventDefault();
+        console.log("Requesting...");
+        const params = JSON.parse(query);
+        axios.get(url, {params: params}).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>
+        </>
+    );
+}