Added API toast service for ARO and MCC.

[batteryspecial]

Purpose

Closes #570.

New Changes

• A standardized notification service which responds based on the success or failure of an API call. The service is very flexible and can be called in a variety of situations. A toast will emerge from the top-left, and will last for five seconds. If you hover over it, the toast will not dissapear.
• Uses react-toastify, so be sure to install that.
• In ARO's main.tsx, I added two buttons that you can play around with to see how the toasts appear. Please remove them for future updates.
• Added .DS_Store to .gitignore.

How to Use the Service

Usage

Import the Service

import toastService from '../services/Toast.service.ts';

Call the Service

The service should be used within logic that handles asynchronous operations, such as in a try...catch...finally block after an API call.
On Success, call toastService.success() with a confirmation message.
On Error, call toastService.error() with an informative error message.

Example Implementation for a Form

Place a single at the application root and trigger toasts from the API service layer.

const handleFormSubmit = async (formData) => {
  try {
    await apiClient.saveData(formData);
    toastService.success("Data saved successfully!");
  } catch (err: any) {
    const message = err.response?.data?.message || "An unexpected error occurred.";
    toastService.error(`Failed to save: ${message}`);
  }
};

Example in App.tsx

Try running the following code added to App.tsx. The dots ... represents the rest of the code.

...
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './styles/toasts.css';

import toastService from './services/Toast.service.ts'
...

function App() {
 ...
 const showSuccess = () => {
     toastService.success("This is a success message for testing!");
 };
 
 const showError = () => {
     toastService.error("This is an error message for testing.");
 };
 return (
  ...
  {/* --- TEST BUTTONS --- */}
   <div className="w-1/4 flex flex-row mt-[10%] ms-[34.5%]">
       <h3>Toast Test Controls</h3>
       <button onClick={showSuccess} className="bg-lime-400 w-1/2 cursor-pointer">Success</button>
       <button onClick={showError} className="bg-red-400 btn w-1/2 cursor-pointer">Error</button>
   </div>
   <ToastContainer />
  {/* --- END --- */}
  ...
 )
}

Clicking on the buttons should display the error messages respectively.

Testing

Explain tests that you ran to verify code functionality.

• I have tested this PR by running the ARO website by adding buttons which call the toasts, and they worked as expected.
• I have tested this PR by running the MCC website by adding buttons which call the toasts, and they worked as expected.
• I have included a video of the tests performed below.

2025-10-14.mp4

Outstanding Changes

Because this is meant to be a standardized service, I tried making the service with generality in mind. You can use this for any API call, from backend to frontend responses (although it was designed for frontend).

[github-actions]

Pull reviewers stats

Stats of the last 120 days for UWOrbital:

	User	Total reviews	Time to review	Total comments
	Adityya-K	47	23h 9m	145
	camspec	18	23h 54m	130
	kepler452b123	16	6d 6h 38m	64
	Yarik-Popov	7	1d 1h 41m	58
	Navtajh04	3	11d 5h 50m	49
	sunray4	1	12d 21m	9
	proprogrammer504	1	8d 6h 19m	5

^{⚡️ Pull request stats}

[batteryspecial]

No idea why the frontend test is failing, it was working on my end, I'm wondering if someone can help.

[camspec]

You can just check the frontend test to see why it's failing; the react and react-dom package versions are out of sync, so you'll need to update that.