141 refactoring toast

src/deskstar-frontend/components/LoginPanel.tsx

@@ -1,14 +1,13 @@
 import { signIn, useSession } from "next-auth/react";
 import { useState } from "react";
 import Input from "./forms/Input";
+import { toast } from "react-toastify";
 
 export default function LoginPanel() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [clicked, setClicked] = useState(false);
 
-  const [error, setError] = useState("");
-
   const onSubmit = async (
     e: React.FormEvent<HTMLFormElement>
   ): Promise<void> => {
@@ -21,16 +20,14 @@ export default function LoginPanel() {
     });
     if (result && result.status !== 200) {
       const msg = result.error;
-      setError(msg || "Unknown Error");
+      toast.error(msg);
     }
-    //TODO: display error on status != 200
     setClicked(false);
   };
 
   return (
     <div className="flex flex-col">
       <h1 className="text-3xl font-bold">Login</h1>
-      <p className="text-red-400">{error}</p>
       <form className="flex flex-col" onSubmit={onSubmit}>
         <Input
           name="email"

src/deskstar-frontend/components/RegisterPanel.tsx

@@ -1,7 +1,8 @@
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { AuthResponse, register } from "../lib/api/AuthService";
 import Input from "./forms/Input";
+import { toast } from "react-toastify";
 
 export default function RegisterPanel() {
   const [company, setCompany] = useState("");
@@ -13,7 +14,6 @@ export default function RegisterPanel() {
 
   // const [msg, setMsg] = useState("");
 
-  const [error, setError] = useState("");
   const [clicked, setClicked] = useState(false);
 
   const router = useRouter();
@@ -23,7 +23,7 @@ export default function RegisterPanel() {
     setClicked(true);
 
     if (password !== repeatPassword) {
-      setError("Passwords must be equal!");
+      toast.error("Passwords must be equal!");
 
       setClicked(false);
       return;
@@ -42,11 +42,11 @@ export default function RegisterPanel() {
     if (response !== AuthResponse.Success) {
       switch (response) {
         case AuthResponse.ErrorCompanyNotFound:
-          setError("Company not Found");
+          toast.error("Company not Found");
         case AuthResponse.ErrorEmailaddressAlreadyExists:
-          setError("Email adress already registered");
+          toast.error("Email adress already registered");
         default:
-          setError("unknown error");
+          toast.error("Unknown error");
       }
       return;
     }
@@ -57,7 +57,6 @@ export default function RegisterPanel() {
   return (
     <div className="flex flex-col">
       <h1 className="text-3xl font-bold">Register</h1>
-      <span className="text-red-400">{error}</span>
       <form className="flex flex-col" onSubmit={submitForm}>
         <Input
           name="company"

src/deskstar-frontend/components/ToastContainer.tsx

@@ -0,0 +1,6 @@
+import { ToastContainer as ToastifyContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+export function ToastContainer() {
+  return <ToastifyContainer />;
+}

src/deskstar-frontend/components/layout.tsx

@@ -1,5 +1,6 @@
 import { useSession } from "next-auth/react";
 import Sidebar from "./Sidebar";
+import { ToastContainer } from "./ToastContainer";
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -10,24 +11,30 @@ export default function Layout({ children }: LayoutProps) {
 
   if (!session)
     return (
-      <div className="container p-2 md:p-4 min-h-[100vh] flex flex-col justify-between">
-        <main className="flex-1 py-2">{children}</main>
-        <footer className="text-center">
-          {/* No copyright, because MIT License */}
-          Deskstar {new Date().getFullYear()}
-        </footer>
-      </div>
+      <>
+        <ToastContainer />
+        <div className="container p-2 md:p-4 min-h-[100vh] flex flex-col justify-between">
+          <main className="flex-1 py-2">{children}</main>
+          <footer className="text-center">
+            {/* No copyright, because MIT License */}
+            Deskstar {new Date().getFullYear()}
+          </footer>
+        </div>
+      </>
     );
 
   return (
+    <>
+      <ToastContainer />
       <Sidebar>
         <div className="container p-2 md:p-4 min-h-[100vh] flex flex-col justify-between">
-        <main className="flex-1 py-2">{children}</main>
-        <footer className="text-center">
-          {/* No copyright, because MIT License */}
-          Deskstar {new Date().getFullYear()}
-        </footer>
+          <main className="flex-1 py-2">{children}</main>
+          <footer className="text-center">
+            {/* No copyright, because MIT License */}
+            Deskstar {new Date().getFullYear()}
+          </footer>
         </div>
       </Sidebar>
+    </>
   );
 }

src/deskstar-frontend/package.json

@@ -17,7 +17,8 @@
     "next-auth": "^4.16.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "^4.6.0"
+    "react-icons": "^4.6.0",
+    "react-toastify": "^9.1.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.28.1",

src/deskstar-frontend/pages/bookings/add.tsx

@@ -12,6 +12,7 @@ import DeskSearchResults from "../../components/DeskSearchResults";
 import { IDesk } from "../../types/desk";
 import Filterbar from "../../components/Filterbar";
 import DesksTable from "../../components/DesksTable";
+import { toast } from "react-toastify";
 
 export default function AddBooking({
   buildings: origBuildings,
@@ -64,15 +65,15 @@ export default function AddBooking({
         message = `You successfully booked the desk ${desk.deskName} from ${startDateTime} to ${endDateTime}`;
         event.target.setAttribute("class", "btn btn-disabled");
         setButtonText("Booked");
+        toast.success(message);
       } else {
         console.log(response);
         message = response;
         event.target.setAttribute("class", "btn btn-success");
+        toast.error(message);
       }
-
-      alert(message);
     } catch (error) {
-      console.error("Error calling createBooking:", error);
+      toast.error(`Error calling createBooking: ${error}`);
       event.target.setAttribute("class", "btn btn-success");
     }
   }

src/deskstar-frontend/pages/bookings/index.tsx

@@ -5,6 +5,7 @@ import { IBooking } from "../../types/booking";
 import { unstable_getServerSession } from "next-auth";
 import { authOptions } from "../api/auth/[...nextauth]";
 import { getBookings, deleteBooking } from "../../lib/api/BookingService";
+import { toast } from "react-toastify";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useSession } from "next-auth/react";
@@ -44,97 +45,32 @@ export default function Bookings({
       let response = await deleteBooking(session, booking.bookingId);
 
       if (response == "success") {
-        setAlertMessage("Booking successfully deleted!");
-        setShowAlertSuccess(true);
+        toast.success("Booking successfully deleted!");
 
         let index = bookings.indexOf(booking);
         if (index > -1) {
           bookings.splice(index, 1);
         }
         return;
       } else {
-        setAlertMessage(response);
-        setShowAlertError(true);
+        toast.error(response);
       }
     } catch (error) {
-      console.error("Error calling createBooking:", error);
-      setAlertMessage("Error calling Server:" + error);
-      setShowAlertError(true);
-      return;
+      toast.error("Error calling Server:" + error);
     }
   };
+
   const onEdit = (booking: IBooking) => {
     //TODO: implement
-    console.log(`Pressed edit on ${booking.bookingId}`);
+    toast.success(`Pressed edit on ${booking.bookingId}`);
   };
 
-  function onClose() {
-    setShowAlertSuccess(false);
-    setShowAlertError(false);
-  }
-
   return (
     <div>
       <Head>
         <title>Bookings</title>
       </Head>
       <h1 className="text-3xl font-bold text-center my-10">My Bookings</h1>
-      {showAlertSuccess && (
-        <div>
-          <div className="alert alert-success shadow-lg">
-            <div>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="stroke-current flex-shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <span>{alertMessage}</span>
-            </div>
-            <div className="flex-none">
-              <button onClick={onClose} className="btn btn-sm">
-                Ok
-              </button>
-            </div>
-          </div>
-          <br />
-        </div>
-      )}
-      {showAlertError && (
-        <div>
-          <div className="alert alert-error shadow-lg">
-            <div>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="stroke-current flex-shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <span>{alertMessage}</span>
-            </div>
-            <div className="flex-none">
-              <button onClick={onClose} className="btn btn-sm">
-                Ok
-              </button>
-            </div>
-          </div>
-          <br />
-        </div>
-      )}
       <BookingsTable bookings={bookings} onEdit={onEdit} onDelete={onDelete} />
       <div className="flex justify-center mt-10">
         <Paginator

src/deskstar-frontend/pages/resources/index.tsx

@@ -12,8 +12,9 @@ import {
   getDesks,
   getDeskTypes,
   getFloors,
-  getRooms
+  getRooms,
 } from "../../lib/api/ResourceService";
+import { toast } from "react-toastify";
 import { IBuilding } from "../../types/building";
 import { IDesk } from "../../types/desk";
 import { IDeskType } from "../../types/desktypes";
@@ -118,12 +119,12 @@ const ResourceOverview = ({
 
   const onEdit = async (desk: IDesk): Promise<void> => {
     //TODO: Implement
-    console.log(`Editing desk ${desk.deskId}...`);
+    toast.success(`Editing desk ${desk.deskId}...`);
   };
 
   const onDelete = async (desk: IDesk): Promise<void> => {
     //TODO: Implement
-    console.log(`Deleting desk ${desk.deskId}...`);
+    toast.success(`Deleting desk ${desk.deskId}...`);
   };
 
   return (
@@ -140,11 +141,11 @@ const ResourceOverview = ({
           href="#create-resource-modal"
           type="button"
           className="btn btn-secondary bg-deskstar-green-dark hover:bg-deskstar-green-light border-deskstar-green-dark hover:border-deskstar-green-light"
-          onClick={() => { }}>
+          onClick={() => {}}
+        >
           Add Resource
         </a>
-        <AddResourceModal buildings={origBuildings} deskTypes={origDeskTypes}/>
-
+        <AddResourceModal buildings={origBuildings} deskTypes={origDeskTypes} />
       </div>
       <DropDownFilter
         title="Locations"
@@ -235,7 +236,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     return {
       props: {
         buildings,
-        deskTypes
+        deskTypes,
       },
     };
   }

src/deskstar-frontend/pages/users/index.tsx

@@ -8,6 +8,7 @@ import { useState, useEffect } from "react";
 import { getUsers } from "../../lib/api/UserService";
 import { authOptions } from "../api/auth/[...nextauth]";
 import { unstable_getServerSession } from "next-auth";
+import { toast } from "react-toastify";
 
 export default function UsersOverview({ users }: { users: IUser[] }) {
   const { data: session } = useSession();
@@ -28,18 +29,18 @@ export default function UsersOverview({ users }: { users: IUser[] }) {
 
   const onPermissionUpdate = async (user: IUser): Promise<void> => {
     //TODO: Implement
-    if (user.isAdmin) console.log(`Demoting user ${user.userId}...`);
-    else console.log(`Promoting user ${user.userId}...`);
+    if (user.isAdmin) toast.success(`Demoting user ${user.userId}...`);
+    else toast.success(`Promoting user ${user.userId}...`);
   };
 
   const onEdit = async (user: IUser): Promise<void> => {
     //TODO: Implement
-    console.log(`Editing user ${user.userId}...`);
+    toast.success(`Editing user ${user.userId}...`);
   };
 
   const onDelete = async (user: IUser): Promise<void> => {
     //TODO: Implement
-    console.log(`Deleting user ${user.userId}...`);
+    toast.success(`Deleting user ${user.userId}...`);
   };
 
   if (!session?.user?.isAdmin) {