1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-07 14:15:18 +02:00

feat: Add addAdventure, removeAdventure, and saveAdventure functions

The code changes include adding the addAdventure, removeAdventure, and saveAdventure functions to the +page.svelte file and adventureService.js module. These functions handle the API requests for adding, removing, and saving adventures respectively. They update the local plans array based on the API response and display appropriate toast messages. These changes enhance the functionality of the planner page by allowing users to add, remove, and save adventures.
This commit is contained in:
Sean Morley 2024-05-04 17:18:53 +00:00
parent 609d3743ed
commit 66d2dc7b15

View file

@ -14,6 +14,11 @@
import { generateRandomString } from "$lib"; import { generateRandomString } from "$lib";
import { visitCount } from "$lib/utils/stores/visitCountStore"; import { visitCount } from "$lib/utils/stores/visitCountStore";
import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte"; import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
import {
addAdventure,
removeAdventure,
saveAdventure,
} from "../../services/adventureService.js";
let isShowingMoreFields = false; let isShowingMoreFields = false;
@ -56,72 +61,26 @@
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
} }
const createNewAdventure = (event: { detail: Adventure }) => { const createNewAdventure = async (event: { detail: Adventure }) => {
isShowingMoreFields = false; isShowingMoreFields = false;
let detailAdventure = event.detail; let newArray = await addAdventure(event.detail, adventures);
console.log("Event" + event.detail.name); if (newArray.length > 0) {
adventures = newArray;
fetch("/api/visits", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
detailAdventure,
}),
})
.then((response) => {
if (!response.ok) {
return response.json().then((data) => {
throw new Error(
data.error || `Failed to add adventure - ${data?.message}`
);
});
}
return response.json();
})
.then((data) => {
// add to local array for instant view update
adventures = [...adventures, data.adventure];
showToast("Adventure added successfully!"); showToast("Adventure added successfully!");
visitCount.update((n) => n + 1); } else {
}) showToast("Failed to add adventure");
.catch((error) => { }
console.error("Error:", error);
showToast(error.message);
});
}; };
function saveAdventure(event: { detail: Adventure }) { async function save(event: { detail: Adventure }) {
console.log("Event", event.detail); let newArray = await saveAdventure(event.detail, adventures);
let detailAdventure = event.detail; if (newArray.length > 0) {
adventures = newArray;
// put request to /api/visits with id and adventure data showToast("Adventure updated successfully!");
fetch("/api/visits", { } else {
method: "PUT", showToast("Failed to update adventure");
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
detailAdventure,
}),
})
.then((response) => response.json())
.then((data) => {
console.log("Success:", data);
// update local array with new data
const index = adventures.findIndex(
(adventure) => adventure.id === detailAdventure.id
);
if (index !== -1) {
adventures[index] = detailAdventure;
} }
adventureToEdit = undefined; adventureToEdit = undefined;
showToast("Adventure edited successfully!");
})
.catch((error) => {
console.error("Error:", error);
});
} }
function editAdventure(event: { detail: number }) { function editAdventure(event: { detail: number }) {
@ -186,29 +145,20 @@
}); });
} }
function removeAdventure(event: { detail: number }) { async function remove(event: { detail: number }) {
console.log("Event ID " + event.detail); let initialLength: number = adventures.length;
// send delete request to server at /api/visits let theAdventure = adventures.find(
fetch("/api/visits", { (adventure) => adventure.id === event.detail
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
adventures = adventures.filter(
(adventure) => adventure.id !== event.detail
); );
if (theAdventure) {
let newArray = await removeAdventure(theAdventure, adventures);
if (newArray.length === initialLength - 1) {
adventures = newArray;
showToast("Adventure removed successfully!"); showToast("Adventure removed successfully!");
visitCount.update((n) => n - 1); } else {
}) showToast("Failed to remove adventure");
.catch((error) => { }
console.error("Error:", error); }
});
} }
</script> </script>
@ -254,11 +204,7 @@
{/if} {/if}
{#if adventureToEdit && adventureToEdit.id != undefined} {#if adventureToEdit && adventureToEdit.id != undefined}
<EditModal <EditModal bind:adventureToEdit on:submit={save} on:close={handleClose} />
bind:adventureToEdit
on:submit={saveAdventure}
on:close={handleClose}
/>
{/if} {/if}
<div <div
@ -269,7 +215,7 @@
{adventure} {adventure}
type="mylog" type="mylog"
on:edit={editAdventure} on:edit={editAdventure}
on:remove={removeAdventure} on:remove={remove}
/> />
{/each} {/each}
</div> </div>