Combine POST endpoint frontend and backend

frontend/src/components/forms/NewTicketForm.tsx

@@ -3,15 +3,22 @@ import StatusChip from "../chips/StatusChip.tsx";
 import RichTextEditor from "../richtexteditor/RichTextEditor.tsx";
 import { Dispatch, SetStateAction, useState } from "react";
 import { User } from "../../types/User.ts";
+import axios from "axios";
+import { ApiResponseStatusSnackbar } from "../../types/Api.ts";
 
 type NewTicketFormProps = {
   user: User | null | undefined;
   setOpenDrawer: Dispatch<SetStateAction<boolean>>;
+  apiRequestStatusSnackbar: ApiResponseStatusSnackbar;
+  setApiRequestStatusSnackbar: Dispatch<
+    SetStateAction<ApiResponseStatusSnackbar>
+  >;
 };
 
 export default function NewTicketForm({
   user,
   setOpenDrawer,
+  setApiRequestStatusSnackbar,
 }: Readonly<NewTicketFormProps>) {
   const [title, setTitle] = useState<string>("");
   const [titleError, setTitleError] = useState<boolean>(false);
@@ -29,8 +36,23 @@ export default function NewTicketForm({
     setDescriptionError(isDescriptionError);
 
     if (!isTitleError && !isDescriptionError) {
-      console.log(title);
-      console.log(description);
+      axios
+        .post("/api/ticket", { title: title, description: description })
+        .then(() => {
+          setApiRequestStatusSnackbar({
+            open: true,
+            severity: "success",
+            message: "Ticket created successfully!",
+          });
+          setOpenDrawer(false);
+        })
+        .catch((error) => {
+          setApiRequestStatusSnackbar({
+            open: true,
+            severity: "error",
+            message: error.response.data.error,
+          });
+        });
     }
   }
 

frontend/src/components/pages/MainPage.tsx

@@ -14,6 +14,8 @@ import {
 } from "@mui/material";
 import SearchForm from "../forms/SearchForm.tsx";
 import NewTicketForm from "../forms/NewTicketForm.tsx";
+import ApiStatusSnackbar from "../snackbars/ApiStatusSnackbar.tsx";
+import { ApiResponseStatusSnackbar } from "../../types/Api.ts";
 
 type MainPageProps = {
   user: User | null | undefined;
@@ -27,6 +29,12 @@ export default function MainPage({
   setSearchResults,
 }: Readonly<MainPageProps>) {
   const [openDrawer, setOpenDrawer] = useState<boolean>(false);
+  const [apiRequestStatusSnackbar, setApiRequestStatusSnackbar] =
+    useState<ApiResponseStatusSnackbar>({
+      open: false,
+      severity: "error",
+      message: "Initial value",
+    });
   const theme = useTheme();
   const isVeryLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
   const isVerySmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -74,9 +82,18 @@ export default function MainPage({
         }}
       >
         <Container sx={{ p: 3 }}>
-          <NewTicketForm user={user} setOpenDrawer={setOpenDrawer} />
+          <NewTicketForm
+            user={user}
+            setOpenDrawer={setOpenDrawer}
+            apiRequestStatusSnackbar={apiRequestStatusSnackbar}
+            setApiRequestStatusSnackbar={setApiRequestStatusSnackbar}
+          />
         </Container>
       </Drawer>
+      <ApiStatusSnackbar
+        apiRequestStatusSnackbar={apiRequestStatusSnackbar}
+        setApiRequestStatusSnackbar={setApiRequestStatusSnackbar}
+      />
     </>
   );
 }

frontend/src/components/snackbars/ApiStatusSnackbar.tsx

@@ -0,0 +1,43 @@
+import Snackbar from "@mui/material/Snackbar";
+import Alert from "@mui/material/Alert";
+import { Dispatch, SetStateAction, SyntheticEvent } from "react";
+import { ApiResponseStatusSnackbar } from "../../types/Api.ts";
+
+type ApiStatusSnackbarProps = {
+  apiRequestStatusSnackbar: ApiResponseStatusSnackbar;
+  setApiRequestStatusSnackbar: Dispatch<
+    SetStateAction<ApiResponseStatusSnackbar>
+  >;
+};
+
+export default function ApiStatusSnackbar({
+  apiRequestStatusSnackbar,
+  setApiRequestStatusSnackbar,
+}: Readonly<ApiStatusSnackbarProps>) {
+  const handleClose = (_event?: SyntheticEvent | Event, reason?: string) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setApiRequestStatusSnackbar({ ...apiRequestStatusSnackbar, open: false });
+  };
+
+  return (
+    <div>
+      <Snackbar
+        open={apiRequestStatusSnackbar.open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+      >
+        <Alert
+          onClose={handleClose}
+          severity={apiRequestStatusSnackbar.severity}
+          variant="filled"
+          sx={{ width: "100%" }}
+        >
+          {apiRequestStatusSnackbar.message}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+}

frontend/src/types/Api.ts

@@ -0,0 +1,5 @@
+export type ApiResponseStatusSnackbar = {
+  open: boolean;
+  severity: "success" | "error";
+  message: string;
+};