Toast Error Feedback

package.json

@@ -38,6 +38,7 @@
     "react-router-dom": "^6.23.0",
     "react-scripts": "^5.0.1",
     "react-tag-autocomplete": "^7.0.1",
+    "react-toastify": "^11.0.5",
     "web-vitals": "^3.3.1"
   },
   "scripts": {

src/admin/Admin.jsx

@@ -110,15 +110,23 @@ function UsersTable() {
   const [order, setOrder] = useState('desc');
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [usersError, setUsersError] = useState('');
 
   useEffect(() => {
     setLoading(true);
+    setUsersError('');
     axios.get(
       `${constants.SERVER_URL}/api/admin/users?page=${page}&sort=${sort}&order=${order}`,
       { withCredentials: true }
     )
-      .then(res => { if (res.data.success) setData(res.data); })
-      .catch(() => {})
+      .then(res => {
+        if (res.data.success) {
+          setData(res.data);
+        } else {
+          setUsersError(res.data.message || 'Failed to load users. Try again.');
+        }
+      })
+      .catch(() => setUsersError('Failed to load users. Try again.'))
       .finally(() => setLoading(false));
   }, [page, sort, order]);
 
@@ -168,6 +176,11 @@ function UsersTable() {
           </button>
         </div>
       </div>
+      {!loading && usersError && (
+        <div className="admin-error" role="alert">
+          {usersError}
+        </div>
+      )}
       {loading ? (
         <div className="admin-users-loading">
           <div className="spinner-border spinner-border-sm text-warning" role="status">

src/app/Navbar.jsx

@@ -3,6 +3,7 @@ import NewTypeModal from "./components/modals/NewTypeModal";
 import ImportModal from "./components/modals/ImportModal";
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import { toast } from 'react-toastify';
 import { useClickOutside } from './hooks/useClickOutside';
 const constants = require('./constants');
 const theme = require('../styling/theme');
@@ -133,9 +134,9 @@ const NavbarFunction = ({user, setUserChanged, newTypes, isAdmin}) => {
   const onCreateNewType = (newName) => {
     newName = newName.trim().toLowerCase().replace(/ /g, '-');
     if(user.newTypes[newName]) {
-      window.alert('Type Already Exists');
+      toast.error('Type already exists');
     } else if(Object.keys(user.newTypes).length === constants.maxCustomTypes) {
-      window.alert(`Maximum custom types reached (${constants.maxCustomTypes})`);
+      toast.error(`Maximum custom types reached (${constants.maxCustomTypes})`);
     } else {
       axios
         .put(constants['SERVER_URL'] + `/api/user/newTypes`, {newType: newName})
@@ -144,7 +145,7 @@ const NavbarFunction = ({user, setUserChanged, newTypes, isAdmin}) => {
           setPendingNewType(newName);
           setUserChanged(true);
         })
-        .catch(() => window.alert("Error on Create New Type"));
+        .catch(() => toast.error("Error creating new type"));
     }
   };
 
@@ -163,11 +164,11 @@ const NavbarFunction = ({user, setUserChanged, newTypes, isAdmin}) => {
         link.click();
         document.body.removeChild(link);
       } else {
-        window.alert('Failed to export data');
+        toast.error('Failed to export data');
       }
     } catch (error) {
       console.error('Export error:', error);
-      window.alert('Error exporting data');
+      toast.error('Error exporting data');
     }
   };
 

src/app/Navbar.test.jsx

@@ -1,8 +1,16 @@
 import { renderWithRouter, screen, fireEvent, waitFor } from '../test-utils';
 import axios from 'axios';
 import Navbar from './Navbar';
+import { toast } from 'react-toastify';
 
 jest.mock('axios');
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    success: jest.fn(),
+  },
+  ToastContainer: () => null,
+}));
 jest.mock('./components/modals/NewTypeModal', () => ({ show }) =>
   show ? <div data-testid="mock-new-type-modal" /> : null
 );
@@ -30,7 +38,6 @@ beforeEach(() => {
   jest.useFakeTimers();
   axios.get.mockResolvedValue({ data: { success: true, incoming: [] } });
   axios.put.mockResolvedValue({});
-  window.alert = jest.fn();
 });
 
 afterEach(() => {
@@ -138,6 +145,6 @@ describe('Navbar', () => {
     // Modal is mocked, so simulate the onSaveClick by accessing internal state is not possible
     // Instead test by calling the handler directly through the modal interaction stub
     // This test verifies the alert path exists — covered indirectly by the component
-    expect(window.alert).not.toHaveBeenCalled(); // sanity — no alert yet
+    expect(toast.error).not.toHaveBeenCalled(); // sanity — no toast yet
   });
 });

src/app/components/modals/ShareLinkModal.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { toast } from 'react-toastify';
 import { toCapitalNotation } from '../../helpers';
 import Modal from './Modal';
 const constants = require('../../constants');
@@ -70,7 +71,7 @@ function ShareLinkModal({
     .catch(err => {
       console.error(err);
       setIsGeneratingLink(false);
-      window.alert('Error generating link');
+      toast.error('Error generating link');
     });
   }
 
@@ -88,7 +89,7 @@ function ShareLinkModal({
       })
       .catch(err => {
           console.error(err);
-          window.alert('Error revoking link');
+          toast.error('Error revoking link');
       });
   }
 

src/app/components/modals/ShareLinkModal.test.jsx

@@ -1,8 +1,16 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import axios from 'axios';
 import ShareLinkModal from './ShareLinkModal';
+import { toast } from 'react-toastify';
 
 jest.mock('axios');
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    success: jest.fn(),
+  },
+  ToastContainer: () => null,
+}));
 
 const defaultProps = {
   show: true,
@@ -26,7 +34,7 @@ beforeEach(() => {
     configurable: true,
   });
   window.confirm = jest.fn(() => true);
-  window.alert = jest.fn();
+  toast.error.mockClear();
 });
 
 describe('ShareLinkModal', () => {

src/app/pages/CreateMedia.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Link, useParams, useNavigate, useLocation } from 'react-router-dom';
 import axios from 'axios';
+import { toast } from 'react-toastify';
 import PageMeta from '../components/ui/PageMeta';
 import TagMaker from "../components/TagMaker";
 import { toCapitalNotation } from "../helpers";
@@ -183,7 +184,7 @@ const CreateMedia = ({user, toDo, newType, selectedTags, dataSource = 'api', bas
         navigate(-1);
       })
       .catch((err) => {
-        window.alert("Create Failed :(")
+        toast.error("Create failed");
       });
   };
 

src/app/pages/CreateMedia.test.jsx

@@ -4,8 +4,16 @@ import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
 import axios from 'axios';
 import CreateMedia from './CreateMedia';
+import { toast } from 'react-toastify';
 
 jest.mock('axios');
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    success: jest.fn(),
+  },
+  ToastContainer: () => null,
+}));
 jest.mock('../components/TagMaker', () => () => <div data-testid="mock-tag-maker" />);
 
 const mockUser = {
@@ -44,7 +52,7 @@ function renderCreateMedia(props = {}) {
 beforeEach(() => {
   jest.clearAllMocks();
   axios.post.mockResolvedValue({ data: {} });
-  window.alert = jest.fn();
+  toast.error.mockClear();
 });
 
 describe('CreateMedia', () => {

src/app/pages/Friends.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
 import PageMeta from '../components/ui/PageMeta';
 const constants = require('../constants');
 const theme = require('../../styling/theme');
@@ -56,7 +57,7 @@ function Friends({ user, setUserChanged }) {
       }
     } catch (err) {
       console.error('Error accepting friend request:', err);
-      window.alert(err.response?.data?.message || 'Failed to accept friend request');
+      toast.error(err.response?.data?.message || 'Failed to accept friend request');
     }
   };
 
@@ -73,7 +74,7 @@ function Friends({ user, setUserChanged }) {
       }
     } catch (err) {
       console.error('Error rejecting friend request:', err);
-      window.alert(err.response?.data?.message || 'Failed to reject friend request');
+      toast.error(err.response?.data?.message || 'Failed to reject friend request');
     }
   };
 
@@ -94,7 +95,7 @@ function Friends({ user, setUserChanged }) {
       }
     } catch (err) {
       console.error('Error removing friend:', err);
-      window.alert(err.response?.data?.message || 'Failed to remove friend');
+      toast.error(err.response?.data?.message || 'Failed to remove friend');
     }
   };
 

src/app/pages/Profile.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
 import PageMeta from '../components/ui/PageMeta';
 import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, KeyboardSensor } from '@dnd-kit/core';
 import { arrayMove, SortableContext, rectSortingStrategy, useSortable, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
@@ -79,7 +80,7 @@ function Profile({ user: currentUser, setUserChanged }) {
       }
     } catch (err) {
       console.error('Error updating visibility:', err);
-      window.alert('Failed to update visibility');
+      toast.error('Failed to update visibility');
     } finally {
       setIsUpdatingVisibility(false);
     }
@@ -146,11 +147,11 @@ function Profile({ user: currentUser, setUserChanged }) {
       }
 
       if (response && !response.data.success) {
-        window.alert(response.data.message || 'Action failed');
+        toast.error(response.data.message || 'Action failed');
       }
     } catch (err) {
       console.error(`Error ${action}ing friend:`, err);
-      window.alert(err.response?.data?.message || `Failed to ${action} friend`);
+      toast.error(err.response?.data?.message || `Failed to ${action} friend`);
     } finally {
       setIsUpdatingFriendship(false);
     }