second toast added

frontend/plan/components/modals/AddScheduleFriendsModalInterior.tsx

@@ -4,6 +4,7 @@ import {
     validateInput,
 } from "./modal_actions";
 import { User } from "../../types";
+import { showToast } from "../../pages";
 
 interface AddScheduleFriendsModalInteriorProps {
     user: User;
@@ -43,7 +44,7 @@ const AddScheduleFriendsModalInterior = ({
     const [errorObj, setErrorObj] = useState({ message: "", error: false });
 
     useEffect(() => {
-        console.log(existingData)
+        console.log(existingData);
         validateInput(
             user,
             userInput,
@@ -74,10 +75,11 @@ const AddScheduleFriendsModalInterior = ({
                         if (responseResult.error) {
                             setErrorObj(responseResult);
                         } else {
-                            setErrorObj({
-                                message: "Success! Your friendship request was sent.",
-                                error: false,
-                            });
+                            showToast(
+                                "Success! Your friend request was sent.",
+                                false
+                            );
+                            close();
                         }
                     }
                 );
@@ -112,13 +114,7 @@ const AddScheduleFriendsModalInterior = ({
                 }}
                 placeholder={placeholder}
             />
-            <p 
-                className="error_message" 
-                style={{
-                    color: errorObj.error ? "red" : "green",
-                }}>
-                    {errorObj.message}
-            </p>
+            <p className="error_message">{errorObj.message}</p>
             <button
                 className="button is-link"
                 type="button"

frontend/plan/pages/_app.tsx

@@ -6,6 +6,7 @@ import "bulma-extensions/bulma-checkradio/dist/css/bulma-checkradio.min.css";
 import "react-circular-progressbar/dist/styles.css";
 import "rc-slider/assets/index.css";
 import "../styles/App.css";
+import "react-toastify/dist/ReactToastify.css";
 import * as Sentry from "@sentry/browser";
 import type { AppProps } from "next/app";
 

frontend/plan/pages/index.tsx

@@ -9,6 +9,7 @@ import Tab from "@material-ui/core/Tab";
 import LoginModal from "pcx-shared-components/src/accounts/LoginModal";
 import styled, { createGlobalStyle } from "styled-components";
 import Schedule from "../components/schedule/Schedule";
+import { toast } from "react-toastify";
 
 import {
     initGA,
@@ -26,6 +27,7 @@ import { openModal } from "../actions";
 import { preventMultipleTabs } from "../components/syncutils";
 import { DISABLE_MULTIPLE_TABS } from "../constants/sync_constants";
 import { User } from "../types";
+import { ToastContainer } from "react-toastify";
 
 const GlobalStyle = createGlobalStyle`
   html {
@@ -78,13 +80,37 @@ const Box = styled.div`
     }
 `;
 
+const StyledToast = styled(ToastContainer)`
+    .Toastify__toast {
+        border-radius: 1rem;
+        background-color: white;
+    }
+    .Toastify__toast-body {
+        font-family: "Gill Sans", sans-serif;
+        color: black;
+        font-size: 1.2rem;
+    }
+`;
+
 let middlewares = [thunkMiddleware, analyticsMiddleware];
 // if (process.env.NODE_ENV === "development") {
 //     // eslint-disable-next-line
 //     const { logger: loggerMiddleware } = require("redux-logger");
 //     middlewares = [thunkMiddleware, loggerMiddleware, analyticsMiddleware];
 // }
 
+export function showToast(text: string, error: boolean) {
+    if (error) {
+        toast.error(text, {
+            position: toast.POSITION.TOP_CENTER,
+        });
+    } else {
+        toast.success(text, {
+            position: toast.POSITION.TOP_CENTER,
+        });
+    }
+}
+
 function Index() {
     const [tab, setTab] = useState(0);
     const [view, setView] = useState(0);
@@ -386,6 +412,10 @@ function Index() {
                                         : "smooth-transition column is-5"
                                 }
                             >
+                                <StyledToast
+                                    autoClose={1000}
+                                    hideProgressBar={true}
+                                />
                                 <Schedule />
                             </div>
                         </div>

frontend/plan/reducers/schedule.js

@@ -19,6 +19,7 @@ import {
     REMOVE_CART_ITEM,
 } from "../actions";
 import { scheduleContainsSection } from "../components/meetUtil";
+import { showToast } from "../pages";
 
 import { MIN_TIME_DIFFERENCE } from "../constants/sync_constants";
 
@@ -148,9 +149,10 @@ const handleUpdateSchedulesOnFrontend = (state, schedulesFromBackend) => {
             // If changes to the cart are still syncing, ignore the requested update
             if (
                 !("cartId" in newState) ||
-                newState.cartPushedToBackend &&
-                cloudUpdated >= newState.cartUpdatedAt &&
-                cloudUpdated - newState.cartUpdatedAt >= MIN_TIME_DIFFERENCE
+                (newState.cartPushedToBackend &&
+                    cloudUpdated >= newState.cartUpdatedAt &&
+                    cloudUpdated - newState.cartUpdatedAt >=
+                        MIN_TIME_DIFFERENCE)
             ) {
                 newState = {
                     ...newState,
@@ -340,6 +342,8 @@ export const schedule = (state = initialState, action) => {
                     },
                 };
             }
+            showToast("Cannot add courses to a friend's schedule!", true);
+
             return {
                 ...state,
             };
@@ -361,6 +365,8 @@ export const schedule = (state = initialState, action) => {
                     },
                 };
             }
+            showToast("Cannot remove courses from a friend's schedule!", true);
+
             return {
                 ...state,
             };