Changeset b70fbeb for frontend/src

Timestamp:

01/27/26 14:03:17 (6 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

3238007

Parents:

4e5cf92

Message:

add toasts on frontend

Location:

frontend/src

Files:

• App.tsx (modified) (2 diffs)
• pages/Login.tsx (modified) (2 diffs)
• pages/Nav.tsx (modified) (2 diffs)
• pages/Register.tsx (modified) (5 diffs)

frontend/src/App.tsx

@@ -1 +1 @@
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import AllUsers from "./pages/AllUsers";
 import LandingPage from "./pages/LandingPage";
@@ -11 +13 @@
                 <div className="flex flex-col min-h-screen">
                         <Nav />
+                        <ToastContainer
+                                position="top-right"
+                                autoClose={2000}
+                                hideProgressBar={false}
+                                newestOnTop={false}
+                                closeOnClick
+                                rtl={false}
+                                pauseOnFocusLoss
+                                draggable
+                                pauseOnHover
+                                theme="light"
+                        />
                         <main className="grow">
                                 <Outlet />

frontend/src/pages/Login.tsx

@@ -1 +1 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -22 +23 @@
                         setUser(response.data.user);
                         navigate("/");
-                } catch (error) {
-                        setError("Login failed. Please check your credentials.");
+                        toast.success("Login successful!");
+                } catch (error: any) {
+                        const errorMessage =
+                                error.response?.data?.error ||
+                                "Login failed. Please check your credentials.";
+                        setError(errorMessage);
+                        toast.error(errorMessage);
                 }
         };

frontend/src/pages/Nav.tsx

@@ -1 +1 @@
 import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
 import Logo from "../assets/logo-finkwave.png";
@@ -12 +13 @@
                         await axiosInstance.post("/auth/logout");
                         setUser(undefined);
+                        toast.success("Logout successful!");
                 } catch (error) {
                         console.error("Logout failed:", error);
+                        toast.error("Logout failed!");
                 }
         };

frontend/src/pages/Register.tsx

@@ -1 +1 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -15 +16 @@
                 null,
         );
+        const [error, setError] = useState<string | null>(null);
 
         const navigate = useNavigate();
@@ -28 +30 @@
         const handleRegister = async (e: React.FormEvent) => {
                 e.preventDefault();
-                // todo: add proper error handling
                 if (profilePhotoFile && profilePhotoFile.size > 5 * 1024 * 1024) {
                         alert("Max file size is 5MB");
@@ -53 +54 @@
                         setUser(response.data.user);
                         navigate("/");
-                } catch (error) {
-                        console.error("Registration failed:", error);
+                        toast.success("Registration successful!");
+                } catch (error: any) {
+                        const errorMessage =
+                                error.response?.data?.error || "Registration failed. Please try again.";
+                        setError(errorMessage);
+                        toast.error(errorMessage);
                 }
         };
@@ -62 +67 @@
                         <h2 className="text-2xl mb-4">Register</h2>
                         <form className="bg-white p-6 rounded shadow-md w-80">
+                                {error && <p className="text-red-500 mb-4">{error}</p>}
                                 <div className="mb-4">
                                         <label className="block text-gray-700 mb-2" htmlFor="username">