Use ToastifyJs to replace alerts

site/package.json

@@ -28,6 +28,7 @@
     "react-twemoji": "^0.5.0",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5",
+    "toastify-js": "^1.12.0",
     "websoc-fuzzy-search": "1.0.1"
   },
   "scripts": {
@@ -57,6 +58,7 @@
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-transition-group": "^4.4.10",
     "@types/react-twemoji": "^0.4.3",
+    "@types/toastify-js": "^1.12.3",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react": "^4.2.1",

site/src/App.tsx

@@ -5,7 +5,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
 import './style/theme.scss';
 import './App.scss';
-
+import 'toastify-js/src/toastify.css';
 import AppHeader from './component/AppHeader/AppHeader';
 import ChangelogModal from './component/ChangelogModal/ChangelogModal';
 import SearchPage from './pages/SearchPage';

site/src/component/Review/SubReview.tsx

@@ -15,7 +15,7 @@ import ThemeContext from '../../style/theme-context';
 import ReviewForm from '../ReviewForm/ReviewForm';
 import trpc from '../../trpc';
 import { ReviewData, VoteRequest } from '@peterportal/types';
-
+import useToastify from '../../hooks/toastifyHook';
 interface SubReviewProps {
   review: ReviewData;
   course?: CourseGQLData;
@@ -31,7 +31,7 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor }) => {
   const buttonVariant = darkMode ? 'dark' : 'secondary';
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showReviewForm, setShowReviewForm] = useState(false);
-
+  const toastify = useToastify();
   const sendVote = async (voteReq: VoteRequest) => {
     const { deltaScore } = await trpc.reviews.vote.mutate(voteReq);
     return deltaScore;
@@ -63,7 +63,7 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor }) => {
 
   const upvote = async () => {
     if (cookies.user === undefined) {
-      alert('You must be logged in to vote.');
+      toastify('You must be logged in to vote.');
       return;
     }
 

site/src/component/ReviewForm/ReviewForm.tsx

@@ -25,6 +25,7 @@ import {
   ReviewTags,
   tags,
 } from '@peterportal/types';
+import toaster from '../../hooks/toastifyHook';
 
 interface ReviewFormProps extends ReviewProps {
   closeForm: () => void;
@@ -62,13 +63,13 @@ const ReviewForm: FC<ReviewFormProps> = ({
   const [userName, setUserName] = useState<string>(reviewToEdit?.userDisplay ?? cookies.user?.name);
   const [validated, setValidated] = useState(false);
   const { darkMode } = useContext(ThemeContext);
-
+  const toastify = toaster();
   useEffect(() => {
     if (show) {
       // form opened
       // if not logged in, close the form
       if (cookies.user === undefined) {
-        alert('You must be logged in to add a review!');
+        toastify('You must be logged in to add a review!');
         closeForm();
       }
 
@@ -86,15 +87,15 @@ const ReviewForm: FC<ReviewFormProps> = ({
         setSubmitted(true);
         dispatch(editReview(res));
       } catch (e) {
-        alert((e as Error).message);
+        toastify((e as Error).message);
       }
     } else {
       try {
         const res = await trpc.reviews.add.mutate(review);
         setSubmitted(true);
         dispatch(addReview(res));
       } catch (e) {
-        alert((e as Error).message);
+        toastify((e as Error).message);
       }
     }
   };
@@ -115,7 +116,7 @@ const ReviewForm: FC<ReviewFormProps> = ({
     }
     // check if CAPTCHA is completed for new reviews (captcha omitted for editing)
     if (!editing && !captchaToken) {
-      alert('Please complete the CAPTCHA');
+      toastify('Please complete the CAPTCHA');
       return;
     }
     const review = {
@@ -154,7 +155,7 @@ const ReviewForm: FC<ReviewFormProps> = ({
         newSelectedTags.push(tag);
         setSelectedTags(newSelectedTags);
       } else {
-        alert('Cannot select more than 3 tags');
+        toastify('Cannot select more than 3 tags');
       }
     }
   };

site/src/hooks/toastifyHook.tsx

@@ -0,0 +1,14 @@
+import Toastify from 'toastify-js';
+
+export default function toaster() {
+  return (text: string, style?: Record<string, string>, callback?: () => void) =>
+    Toastify({
+      text,
+      duration: 3000,
+      close: true,
+      gravity: 'bottom',
+      position: 'right',
+      style: { background: 'var(--peterportal-primary-color-1)', fontWeight: 'bold', ...style },
+      onClick: callback,
+    }).showToast();
+}

site/src/pages/RoadmapPage/Planner.tsx

@@ -22,6 +22,7 @@ import ImportTranscriptPopup from './ImportTranscriptPopup';
 import { collapseAllPlanners, loadRoadmap, validatePlanner } from '../../helpers/planner';
 import { Button, Modal } from 'react-bootstrap';
 import trpc from '../../trpc';
+import toaster from '../../hooks/toastifyHook';
 
 const Planner: FC = () => {
   const dispatch = useAppDispatch();
@@ -32,7 +33,7 @@ const Planner: FC = () => {
   const transfers = useAppSelector((state) => state.roadmap.transfers);
   const coursebag = useAppSelector((state) => state.roadmap.coursebag);
   const [showSyncModal, setShowSyncModal] = useState(false);
-
+  const toastify = toaster();
   const [missingPrerequisites, setMissingPrerequisites] = useState(new Set<string>());
   const roadmapStr = JSON.stringify({
     planners: collapseAllPlanners(allPlanData),
@@ -71,13 +72,13 @@ const Planner: FC = () => {
       trpc.roadmaps.save
         .mutate(mongoRoadmap)
         .then(() => {
-          alert(`Roadmap saved under ${cookies.user.email}`);
+          toastify(`Roadmap saved under ${cookies.user.email}`);
         })
         .catch(() => {
-          alert('Roadmap saved locally! Login to save it to your account.');
+          toastify('Roadmap saved locally! Login to save it to your account.');
         });
     } else {
-      alert('Roadmap saved locally! Login to save it to your account.');
+      toastify('Roadmap saved locally! Login to save it to your account.');
     }
   };
 

site/src/pages/RoadmapPage/RoadmapMultiplan.tsx

@@ -14,7 +14,7 @@
 import * as Icon from 'react-bootstrap-icons';
 import { Button } from 'semantic-ui-react';
 import { Button as Button2, Form, Modal } from 'react-bootstrap';
-
+import toaster from '../../hooks/toastifyHook';
 interface RoadmapSelectableItemProps {
   plan: RoadmapPlan;
   index: number;
@@ -54,7 +54,7 @@
   const [delIdx, setDelIdx] = useState(-1);
   const [newPlanName, setNewPlanName] = useState(allPlans.plans[allPlans.currentPlanIndex].name);
   const [showDropdown, setShowDropdown] = useState(false);
-
+  const toastify = toaster();
   const isDuplicateName = () => allPlans.plans.find((p) => p.name === newPlanName);
 
   // name: name of the plan, content: stores the content of plan
@@ -74,8 +74,8 @@
   };
 
   const handleSubmitNewPlan = () => {
-    if (!newPlanName) return alert('Name cannot be empty');
-    if (isDuplicateName()) return alert('A plan with that name already exists');
+    if (!newPlanName) return toastify('Name cannot be empty');
+    if (isDuplicateName()) return toastify('A plan with that name already exists');
     setIsOpen(false);
     addNewPlan(newPlanName);
     const newIndex = allPlans.plans.length;
@@ -84,15 +84,15 @@
   };
 
   const modifyPlanName = () => {
-    if (!newPlanName) return alert('Name cannot be empty');
-    if (isDuplicateName()) return alert('A plan with that name already exists');
+    if (!newPlanName) return toastify('Name cannot be empty');
+    if (isDuplicateName()) return toastify('A plan with that name already exists');
     dispatch(setPlanName({ index: editIdx, name: newPlanName }));
     setEditIdx(-1);
   };
 
   useEffect(() => {
     document.title = `${allPlans.plans[currentPlanIndex].name} | PeterPortal`;
   }, [currentPlanIndex]);
 
   return (
     <div className="multi-plan-selector">

site/src/store/slices/roadmapSlice.ts

@@ -13,7 +13,7 @@ import {
 } from '../../types/types';
 import type { RootState } from '../store';
 import { TransferData } from '@peterportal/types';
-
+import toaster from '../../hooks/toastifyHook';
 // Define a type for the slice state
 interface RoadmapPlanState {
   // Store planner data
@@ -169,8 +169,9 @@ export const roadmapSlice = createSlice({
       const newQuarter = action.payload.quarterData;
 
       // if year doesn't exist
+      const toastify = toaster();
       if (!currentYears.includes(startYear)) {
-        alert(`${startYear}-${startYear + 1} has not yet been added!`);
+        toastify(`${startYear}-${startYear + 1} has not yet been added!`);
         return;
       }
 
@@ -181,7 +182,7 @@ export const roadmapSlice = createSlice({
 
       // if duplicate quarter
       if (currentQuarters.includes(newQuarter.name)) {
-        alert(`${quarterDisplayNames[newQuarter.name]} has already been added to Year ${yearIndex}!`);
+        toastify(`${quarterDisplayNames[newQuarter.name]} has already been added to Year ${yearIndex}!`);
         return;
       }
 
@@ -218,16 +219,16 @@ export const roadmapSlice = createSlice({
       const newYear = action.payload.yearData.startYear;
       const currentNames = state.plans[state.currentPlanIndex].content.yearPlans.map((e) => e.name);
       const newName = action.payload.yearData.name;
-
+      const toastify = toaster();
       // if duplicate year
       if (currentYears.includes(newYear)) {
-        alert(`${newYear}-${newYear + 1} has already been added as Year ${currentYears.indexOf(newYear) + 1}!`);
+        toastify(`${newYear}-${newYear + 1} has already been added as Year ${currentYears.indexOf(newYear) + 1}!`);
         return;
       }
       // if duplicate name
       if (currentNames.includes(newName)) {
         const year = state.plans[state.currentPlanIndex].content.yearPlans[currentNames.indexOf(newName)].startYear;
-        alert(`${newName} already exists from ${year} - ${year + 1}!`);
+        toastify(`${newName} already exists from ${year} - ${year + 1}!`);
         return;
       }
 
@@ -246,10 +247,10 @@ export const roadmapSlice = createSlice({
       const currentYears = state.plans[state.currentPlanIndex].content.yearPlans.map((e) => e.startYear);
       const newYear = action.payload.startYear;
       const yearIndex = action.payload.index;
-
+      const toastify = toaster();
       // if duplicate year
       if (currentYears.includes(newYear)) {
-        alert(`${newYear}-${newYear + 1} already exists as Year ${currentYears.indexOf(newYear) + 1}!`);
+        toastify(`${newYear}-${newYear + 1} already exists as Year ${currentYears.indexOf(newYear) + 1}!`);
         return;
       }
 
@@ -273,11 +274,11 @@ export const roadmapSlice = createSlice({
       const currentNames = state.plans[state.currentPlanIndex].content.yearPlans.map((e) => e.name);
       const newName = action.payload.name;
       const yearIndex = action.payload.index;
-
+      const toastify = toaster();
       // if duplicate name
       if (currentNames.includes(newName)) {
         const year = state.plans[state.currentPlanIndex].content.yearPlans[yearIndex].startYear;
-        alert(`${newName} already exists from ${year} - ${year + 1}!`);
+        toastify(`${newName} already exists from ${year} - ${year + 1}!`);
         return;
       }