Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-05 05:05:17 +02:00
Code Issues Releases Activity

feat: Add removeAdventure function to +page.svelte and adventureService.ts

Browse source 
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.
This commit is contained in:
Sean Morley 2024-05-04 15:38:55 +00:00
parent 798ce1e3e5
commit 2b7c6b0f18
2 changed files with 57 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/routes/planner/+page.svelte
View file

@ -4,7 +4,10 @@
import AdventureCard from "$lib/components/AdventureCard.svelte"; import AdventureCard from "$lib/components/AdventureCard.svelte";
import EditModal from "$lib/components/EditModal.svelte"; import EditModal from "$lib/components/EditModal.svelte";
import MoreFieldsInput from "$lib/components/CreateNewAdventure.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"; import SucessToast from "$lib/components/SucessToast.svelte";
export let data; export let data;
let plans: Adventure[] = []; let plans: Adventure[] = [];
@ -58,27 +61,18 @@
adventureToEdit = undefined; adventureToEdit = undefined;
} }
function removeAdventure(event: { detail: number }) { async function remove(event: { detail: number }) {
console.log("Event ID " + event.detail); let initialLenght: number = plans.length;
// send delete request to server at /api/visits let theAdventure = plans.find((adventure) => adventure.id === event.detail);
fetch("/api/visits", { if (theAdventure) {
method: "DELETE", let newArray = await removeAdventure(theAdventure, plans);
headers: { if (newArray.length == initialLenght - 1) {
"Content-Type": "application/json", plans = newArray;
}, showToast("Adventure removed successfully!");
body: JSON.stringify({ id: event.detail }), } else {
}) showToast("Failed to remove adventure");
.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);
});
} }
const createNewAdventure = (event: { detail: Adventure }) => { const createNewAdventure = (event: { detail: Adventure }) => {
@ -146,7 +140,7 @@
{adventure} {adventure}
type="planner" type="planner"
on:edit={editPlan} on:edit={editPlan}
on:remove={removeAdventure} on:remove={remove}
/> />
{/each} {/each}
</div> </div>

59
src/services/adventureService.ts
View file

@ -50,36 +50,57 @@ export async function saveAdventure(
return adventureArray; return adventureArray;
} }
/** export async function removeAdventure(
* function savePlan(event: { detail: Adventure }) { adventure: Adventure,
console.log("Event", event.detail); adventureArray: Adventure[]
let detailAdventure = event.detail; ): Promise<Adventure[]> {
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 if (response.ok) {
fetch("/api/planner", { // remove adventure from array where id matches
method: "PUT", 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: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({ id: event.detail }),
detailAdventure,
}),
}) })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
console.log("Success:", data); console.log("Success:", data);
// update local array with new data // remove adventure from array where id matches
const index = plans.findIndex( plans = plans.filter((adventure) => adventure.id !== event.detail);
(adventure) => adventure.id === detailAdventure.id // showToast("Adventure removed successfully!");
); // visitCount.update((n) => n - 1);
if (index !== -1) {
plans[index] = detailAdventure;
}
adventureToEdit = undefined;
// showToast("Adventure edited successfully!");
}) })
.catch((error) => { .catch((error) => {
console.error("Error:", error); console.error("Error:", error);
}); });
} }
*
*
*/ */