Changeset b70fbeb for frontend

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

Files:

• package-lock.json (modified) (3 diffs)
• package.json (modified) (1 diff)
• src/App.tsx (modified) (2 diffs)
• src/pages/Login.tsx (modified) (2 diffs)
• src/pages/Nav.tsx (modified) (2 diffs)
• src/pages/Register.tsx (modified) (5 diffs)

frontend/package-lock.json

@@ -15 +15 @@
                                 "react-dom": "^19.2.0",
                                 "react-router-dom": "^7.13.0",
+                                "react-toastify": "^11.0.5",
                                 "tailwindcss": "^4.1.18"
                         },
@@ -2152 +2153 @@
                         "funding": {
                                 "url": "https://github.com/chalk/chalk?sponsor=1"
+                        }
+                },
+                "node_modules/clsx": {
+                        "version": "2.1.1",
+                        "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+                        "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+                        "license": "MIT",
+                        "engines": {
+                                "node": ">=6"
                         }
                 },
@@ -3683 +3693 @@
                         }
                 },
+                "node_modules/react-toastify": {
+                        "version": "11.0.5",
+                        "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+                        "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+                        "license": "MIT",
+                        "dependencies": {
+                                "clsx": "^2.1.1"
+                        },
+                        "peerDependencies": {
+                                "react": "^18 || ^19",
+                                "react-dom": "^18 || ^19"
+                        }
+                },
                 "node_modules/resolve-from": {
                         "version": "4.0.0",

frontend/package.json

@@ -17 +17 @@
                 "react-dom": "^19.2.0",
                 "react-router-dom": "^7.13.0",
+                "react-toastify": "^11.0.5",
                 "tailwindcss": "^4.1.18"
         },

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">