From 2b7c6b0f182d93fea9c26c4283d8ff4a725b9d7c Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sat, 4 May 2024 15:38:55 +0000 Subject: [PATCH] feat: Add removeAdventure function to +page.svelte and adventureService.ts The code changes include adding a new function called removeAdventure to the +page.svelte file and adventureService.ts module. This function is responsible for sending a DELETE request to the corresponding API endpoint to remove an adventure. If the request is successful, the adventure is removed from the local plans array. If the request fails, an error toast is displayed. This functionality allows users to remove adventures from the planner page. --- src/routes/planner/+page.svelte | 40 +++++++++------------- src/services/adventureService.ts | 59 ++++++++++++++++++++++---------- 2 files changed, 57 insertions(+), 42 deletions(-) diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte index c1de223..0ac09bb 100644 --- a/src/routes/planner/+page.svelte +++ b/src/routes/planner/+page.svelte @@ -4,7 +4,10 @@ import AdventureCard from "$lib/components/AdventureCard.svelte"; import EditModal from "$lib/components/EditModal.svelte"; import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte"; - import { saveAdventure } from "../../services/adventureService.js"; + import { + saveAdventure, + removeAdventure, + } from "../../services/adventureService.js"; import SucessToast from "$lib/components/SucessToast.svelte"; export let data; let plans: Adventure[] = []; @@ -58,27 +61,18 @@ adventureToEdit = undefined; } - function removeAdventure(event: { detail: number }) { - console.log("Event ID " + event.detail); - // send delete request to server at /api/visits - fetch("/api/visits", { - method: "DELETE", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ id: event.detail }), - }) - .then((response) => response.json()) - .then((data) => { - console.log("Success:", data); - // remove adventure from array where id matches - plans = plans.filter((adventure) => adventure.id !== event.detail); - // showToast("Adventure removed successfully!"); - // visitCount.update((n) => n - 1); - }) - .catch((error) => { - console.error("Error:", error); - }); + async function remove(event: { detail: number }) { + let initialLenght: number = plans.length; + let theAdventure = plans.find((adventure) => adventure.id === event.detail); + if (theAdventure) { + let newArray = await removeAdventure(theAdventure, plans); + if (newArray.length == initialLenght - 1) { + plans = newArray; + showToast("Adventure removed successfully!"); + } else { + showToast("Failed to remove adventure"); + } + } } const createNewAdventure = (event: { detail: Adventure }) => { @@ -146,7 +140,7 @@ {adventure} type="planner" on:edit={editPlan} - on:remove={removeAdventure} + on:remove={remove} /> {/each} diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts index a8b3c27..b08ebb0 100644 --- a/src/services/adventureService.ts +++ b/src/services/adventureService.ts @@ -50,36 +50,57 @@ export async function saveAdventure( return adventureArray; } -/** - * function savePlan(event: { detail: Adventure }) { - console.log("Event", event.detail); - let detailAdventure = event.detail; +export async function removeAdventure( + adventure: Adventure, + adventureArray: Adventure[] +): Promise { + let url = apiRoutes[adventure.type]; + // delete request to /api/visits with id + const response = await fetch(url, { + method: "DELETE", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ id: adventure.id }), + }); - // put request to /api/visits with id and adventure data - fetch("/api/planner", { - method: "PUT", + if (response.ok) { + // remove adventure from array where id matches + adventureArray = adventureArray.filter( + (adventure) => adventure.id !== adventure.id + ); + // showToast("Adventure removed successfully!"); + } else { + console.error("Error:", response.statusText); + adventureArray = []; + } + + return adventureArray; +} + +/** + * function removeAdventure(event: { detail: number }) { + console.log("Event ID " + event.detail); + // send delete request to server at /api/visits + fetch("/api/visits", { + method: "DELETE", headers: { "Content-Type": "application/json", }, - body: JSON.stringify({ - detailAdventure, - }), + body: JSON.stringify({ id: event.detail }), }) .then((response) => response.json()) .then((data) => { console.log("Success:", data); - // update local array with new data - const index = plans.findIndex( - (adventure) => adventure.id === detailAdventure.id - ); - if (index !== -1) { - plans[index] = detailAdventure; - } - adventureToEdit = undefined; - // showToast("Adventure edited successfully!"); + // remove adventure from array where id matches + plans = plans.filter((adventure) => adventure.id !== event.detail); + // showToast("Adventure removed successfully!"); + // visitCount.update((n) => n - 1); }) .catch((error) => { console.error("Error:", error); }); } + * + * */