fix:remove toastify

package.json

@@ -19,8 +19,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-redux": "^8.1.2",
-    "react-router-dom": "^6.14.2",
-    "react-toastify": "^9.1.3"
+    "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.12",

src/App.jsx

@@ -23,7 +23,6 @@ import { action as loginAction } from "./pages/Login";
 import { action as registerAction } from "./pages/Register";
 import { action as checkoutAction } from "./components/CheckoutForm";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient({
   defaultOptions: {

src/components/CheckoutForm.jsx

@@ -2,7 +2,6 @@ import { Form, redirect } from "react-router-dom";
 import FormInput from "./FormInput";
 import SubmitBtn from "./SubmitBtn";
 import { customFetch, formatPrice } from "../utils";
-import { toast } from "react-toastify";
 import { clearCart } from "../features/cart/cartSlice";
 
 export const action =
@@ -35,14 +34,12 @@ export const action =
       );
       queryClient.removeQueries(["orders"]);
       store.dispatch(clearCart());
-      toast.success("order placed successfully");
       return redirect("/orders");
     } catch (error) {
       console.log(error);
       const errorMessage =
         error?.response?.data?.error?.message ||
         "there was an error placing your order";
-      toast.error(errorMessage);
       if (error?.response?.status === 401 || 403) return redirect("/login");
       return null;
     }

src/features/cart/cartSlice.js

@@ -1,5 +1,4 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { toast } from "react-toastify";
 
 const defaultState = {
     cartItems: [],
@@ -30,7 +29,6 @@ const cartSlice = createSlice({
             state.numItemsInCart += product.amount;
             state.cartTotal += product.price * product.amount;
             cartSlice.caseReducers.calculateTotals(state);
-            toast.success("Item added to cart");
         },
         clearCart: (state) => {
             localStorage.setItem("cart", JSON.stringify(defaultState));
@@ -44,7 +42,6 @@ const cartSlice = createSlice({
             state.numItemsInCart -= product.amount;
             state.cartTotal -= product.price * product.amount;
             cartSlice.caseReducers.calculateTotals(state);
-            toast.error("Items removed from cart");
         },
         editItem: (state, action) => {
             const { cartID, amount } = action.payload;
@@ -53,7 +50,6 @@ const cartSlice = createSlice({
             state.cartTotal += item.price * (amount - item.amount);
             item.amount = amount;
             cartSlice.caseReducers.calculateTotals(state);
-            toast.success("Cart Updated");
          },
 
         calculateTotals: (state) => {

src/features/user/userSlice.js

@@ -1,5 +1,4 @@
 import { createSlice } from "@reduxjs/toolkit";
-import {toast} from "react-toastify";
 
 
 const themes = {
@@ -34,7 +33,6 @@ const userSlice = createSlice({
         logoutUser: (state) => {
             state.user = null;
             localStorage.removeItem("user");
-            toast.success("Logged out successfully");
         },
         toggleTheme: (state) => {
             const { dracula, winter } = themes;

src/main.jsx

@@ -1,13 +1,10 @@
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
-import "react-toastify/dist/ReactToastify.css";
 import "./index.css";
 import { Provider } from "react-redux";
-import { ToastContainer } from "react-toastify";
 import { store } from "./store.js";
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Provider store={store}>
     <App />
-    <ToastContainer position="top-center" />
   </Provider>
 );

src/pages/Checkout.jsx

@@ -1,13 +1,11 @@
 import { useSelector } from "react-redux";
 import { CheckoutForm, SectionTitle, CartTotals } from "../components";
 import { redirect } from "react-router-dom";
-import { toast } from "react-toastify";
 
 export const loader = (store) => async () => {
   const user = store.getState().userState.user;
 
   if (!user) {
-    toast.warn("You must be logged in to checkout");
     return redirect("/login");
   }
   return null;
@@ -27,4 +25,4 @@ const Checkout = () => {
     </>
   );
 };
-export default Checkout;
+export default Checkout;

src/pages/Login.jsx

@@ -1,7 +1,6 @@
 import { FormInput, SubmitBtn } from "../components";
 import { Form, Link, redirect, useNavigate } from "react-router-dom";
 import { customFetch } from "../utils";
-import { toast } from "react-toastify";
 import { loginUser } from "../features/user/userSlice";
 import { useDispatch } from "react-redux";
 
@@ -14,13 +13,11 @@ export const action =
     try {
       const response = await customFetch.post("/auth/local", data);
       store.dispatch(loginUser(response.data));
-      toast.success("Logged in successfully");
       return redirect("/");
     } catch (error) {
       const errorMessage =
         error?.response?.data?.error?.message ||
         "Please double check your credentials";
-      toast.error(errorMessage);
       return null;
     }
   };
@@ -36,11 +33,9 @@ const Login = () => {
         password: "demo666",
       });
       dispatch(loginUser(response.data));
-      toast.success("Welcome guest user");
       navigate("/");
     } catch (error) {
       console.log(error);
-      toast.error("Guest user login error. please try again");
     }
   };
 
@@ -76,4 +71,4 @@ const Login = () => {
     </section>
   );
 };
-export default Login;
+export default Login;

src/pages/Orders.jsx

@@ -1,5 +1,4 @@
 import { redirect, useLoaderData } from "react-router-dom";
-import { toast } from "react-toastify";
 import { customFetch } from "../utils";
 import {
   OrdersList,
@@ -30,7 +29,6 @@ export const loader =
     const user = store.getState().userState.user;
 
     if (!user) {
-      toast.warn("You must be logged in to view orders");
       return redirect("/login");
     }
 
@@ -47,7 +45,6 @@ export const loader =
       const errorMessage =
         error?.response?.data?.error?.message ||
         "there was an error accessing your orders";
-      toast.error(errorMessage);
       if (error?.response?.status === 401 || 403) return redirect("login");
       return null;
     }
@@ -66,4 +63,4 @@ const Orders = () => {
     </>
   );
 };
-export default Orders;
+export default Orders;

src/pages/Register.jsx

@@ -1,21 +1,18 @@
 import { FormInput, SubmitBtn } from "../components";
 import { Form, Link, redirect } from "react-router-dom";
 import { customFetch } from "../utils";
-import { toast } from "react-toastify";
 
 export const action = async ({ request }) => {
   const formData = await request.formData();
   const data = Object.fromEntries(formData);
 
   try {
     const response = await customFetch.post("/auth/local/register", data);
-    toast.success("account created successfully");
     return redirect("/login");
   } catch (error) {
     const errorMessage =
       error?.response?.data?.error?.message ||
       "please double check your credentials";
-    toast.error(errorMessage);
     return null;
   }
 };
@@ -47,4 +44,4 @@ const Register = () => {
     </section>
   );
 };
-export default Register;
+export default Register;