Delete a favorite deck.

src/appConstants.ts

@@ -140,7 +140,8 @@ export const URL_END_POINT = {
   SIGNUP: `AccountFiles/SignupAPI.php`,
   FORGOT_PASSWORD: `AccountFiles/PasswordResetRequestAPI.php`,
   RESET_PASSWORD: `AccountFiles/ResetPassword.php`,
-  GET_COSMETICS: `APIs/GetCosmetics.php`
+  GET_COSMETICS: `APIs/GetCosmetics.php`,
+  DELETE_DECK: `APIs/DeleteDeckAPI.php`
 };
 
 export const GAME_VISIBILITY = {

src/features/api/apiSlice.ts

@@ -5,7 +5,7 @@ import {
   FetchArgs,
   FetchBaseQueryError
 } from '@reduxjs/toolkit/query/react';
-import { isRejected, isRejectedWithValue } from '@reduxjs/toolkit';
+import { isRejectedWithValue } from '@reduxjs/toolkit';
 import type { MiddlewareAPI, Middleware } from '@reduxjs/toolkit';
 import { RootState } from 'app/Store';
 import {
@@ -30,18 +30,23 @@ import { ChooseFirstPlayer } from 'interface/API/ChooseFirstPlayer.php';
 import { SubmitSideboardAPI } from 'interface/API/SubmitSideboard.php';
 import { GetFavoriteDecksResponse } from 'interface/API/GetFavoriteDecks.php';
 import { GameListResponse } from 'routes/index/components/gameList/GameList';
-import { ProcessInputAPI } from 'interface/API/ProcessInputAPI';
 import { GetCosmeticsResponse } from 'interface/API/GetCosmeticsResponse.php';
+import {
+  DeleteDeckAPIRequest,
+  DeleteDeckAPIResponse
+} from 'interface/API/DeleteDeckAPI.php';
 
 // catch warnings and show a toast if we get one.
 export const rtkQueryErrorToaster: Middleware =
   (api: MiddlewareAPI) => (next) => (action) => {
-    // if (isRejectedWithValue(action)) {
-    //   console.warn('Rejected action:', action);
-    //   const errorMessage = action.error?.message ?? 'an error happened';
-    //   const errorStatus = action.payload?.status ?? 0;
-    //   toast.error(`Error: ${errorStatus} - ${errorMessage}`);
-    // }
+    if (isRejectedWithValue(action)) {
+      console.warn('Rejected action:', action);
+      const errorMessage = action.error?.message ?? 'an error happened';
+      const errorStatus = action.payload?.status ?? 0;
+      toast.error(
+        `A network error happened, please try again. Error:\n${errorStatus}\n${errorMessage}`
+      );
+    }
     return next(action);
   };
 
@@ -203,8 +208,17 @@ export const apiSlice = createApi({
         return response;
       }
     }),
+    deleteDeck: builder.mutation<DeleteDeckAPIResponse, DeleteDeckAPIRequest>({
+      query: (body: DeleteDeckAPIRequest) => {
+        return {
+          url: URL_END_POINT.DELETE_DECK,
+          method: 'post',
+          body: body
+        };
+      }
+    }),
     createGame: builder.mutation<CreateGameResponse, CreateGameAPI>({
-      query: ({ ...body }: CreateGameAPI) => {
+      query: (body: CreateGameAPI) => {
         return {
           url: URL_END_POINT.CREATE_GAME,
           method: 'POST',
@@ -216,7 +230,7 @@ export const apiSlice = createApi({
         response.status
     }),
     joinGame: builder.mutation<JoinGameResponse, JoinGameAPI>({
-      query: ({ ...body }: JoinGameAPI) => {
+      query: (body: JoinGameAPI) => {
         return {
           url: URL_END_POINT.JOIN_GAME,
           method: 'POST',
@@ -269,6 +283,7 @@ export const {
   useGetGameListQuery,
   useGetCosmeticsQuery,
   useGetFavoriteDecksQuery,
+  useDeleteDeckMutation,
   useLoginMutation,
   useLoginWithCookieQuery,
   useLogOutMutation,

src/interface/API/DeleteDeckAPI.php.ts

@@ -0,0 +1,7 @@
+export interface DeleteDeckAPIRequest {
+  deckLink: string;
+}
+
+export interface DeleteDeckAPIResponse {
+  message?: string;
+}

src/interface/API/GetFavoriteDecks.php.ts

@@ -13,4 +13,5 @@ export interface FavoriteDeck {
   format: string;
   cardBack: string;
   playmat: string;
+  link: string;
 }

src/routes/user/profile/index.tsx

@@ -1,12 +1,47 @@
-import { useGetFavoriteDecksQuery } from 'features/api/apiSlice';
+import {
+  useDeleteDeckMutation,
+  useGetFavoriteDecksQuery
+} from 'features/api/apiSlice';
+import { DeleteDeckAPIResponse } from 'interface/API/DeleteDeckAPI.php';
+import { toast } from 'react-hot-toast';
 import { GiTrashCan } from 'react-icons/gi';
 import styles from './profile.module.css';
 
 export const ProfilePage = () => {
-  const { data, isLoading } = useGetFavoriteDecksQuery(undefined);
+  const { data, isLoading, refetch } = useGetFavoriteDecksQuery(undefined);
+  const [deleteDeck] = useDeleteDeckMutation();
 
-  const handleButtonClick = (deckKey: string) => {
-    console.log('clicked this one', deckKey);
+  const handleDeleteDeckMessage = (resp: DeleteDeckAPIResponse): string => {
+    if (resp.message !== 'Deck deleted successfully.') {
+      return 'The deck has been removed from your favorites list. It is still available to view on the deckbuilding site.';
+    } else {
+      return 'There has been a problem deleting your deck, please try again.';
+    }
+  };
+
+  const handleDeleteDeck = async (deckLink: string) => {
+    try {
+      const deleteDeckPromise = deleteDeck({ deckLink }).unwrap();
+      toast.promise(
+        deleteDeckPromise,
+        {
+          loading: 'Deleting deck...',
+          success: (data) => handleDeleteDeckMessage(data),
+          error: (err) =>
+            `There has been an error, please try again. Error: ${err.toString()}`
+        },
+        {
+          style: {
+            minWidth: '250px'
+          },
+          position: 'top-center'
+        }
+      );
+      const resp = await deleteDeckPromise;
+    } catch (err) {
+    } finally {
+      refetch();
+    }
   };
 
   return (
@@ -51,7 +86,7 @@ export const ProfilePage = () => {
                   <td className={styles.deleteButton}>
                     <button
                       className={styles.button}
-                      onClick={() => handleButtonClick(deck.key)}
+                      onClick={() => handleDeleteDeck(deck.link)}
                     >
                       <GiTrashCan
                         fontSize={'1.5em'}