mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2026-02-06 21:01:00 -05: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:
@@ -14,6 +14,11 @@
|
||||
import { generateRandomString } from "$lib";
|
||||
import { visitCount } from "$lib/utils/stores/visitCountStore";
|
||||
import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
|
||||
import {
|
||||
addAdventure,
|
||||
removeAdventure,
|
||||
saveAdventure,
|
||||
} from "../../services/adventureService.js";
|
||||
|
||||
let isShowingMoreFields = false;
|
||||
|
||||
@@ -56,72 +61,26 @@
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
const createNewAdventure = (event: { detail: Adventure }) => {
|
||||
const createNewAdventure = async (event: { detail: Adventure }) => {
|
||||
isShowingMoreFields = false;
|
||||
let detailAdventure = event.detail;
|
||||
console.log("Event" + event.detail.name);
|
||||
|
||||
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!");
|
||||
visitCount.update((n) => n + 1);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
showToast(error.message);
|
||||
});
|
||||
let newArray = await addAdventure(event.detail, adventures);
|
||||
if (newArray.length > 0) {
|
||||
adventures = newArray;
|
||||
showToast("Adventure added successfully!");
|
||||
} else {
|
||||
showToast("Failed to add adventure");
|
||||
}
|
||||
};
|
||||
|
||||
function saveAdventure(event: { detail: Adventure }) {
|
||||
console.log("Event", event.detail);
|
||||
let detailAdventure = event.detail;
|
||||
|
||||
// put request to /api/visits with id and adventure data
|
||||
fetch("/api/visits", {
|
||||
method: "PUT",
|
||||
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;
|
||||
showToast("Adventure edited successfully!");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
async function save(event: { detail: Adventure }) {
|
||||
let newArray = await saveAdventure(event.detail, adventures);
|
||||
if (newArray.length > 0) {
|
||||
adventures = newArray;
|
||||
showToast("Adventure updated successfully!");
|
||||
} else {
|
||||
showToast("Failed to update adventure");
|
||||
}
|
||||
adventureToEdit = undefined;
|
||||
}
|
||||
|
||||
function editAdventure(event: { detail: number }) {
|
||||
@@ -186,29 +145,20 @@
|
||||
});
|
||||
}
|
||||
|
||||
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
|
||||
adventures = adventures.filter(
|
||||
(adventure) => adventure.id !== event.detail
|
||||
);
|
||||
async function remove(event: { detail: number }) {
|
||||
let initialLength: number = adventures.length;
|
||||
let theAdventure = adventures.find(
|
||||
(adventure) => adventure.id === event.detail
|
||||
);
|
||||
if (theAdventure) {
|
||||
let newArray = await removeAdventure(theAdventure, adventures);
|
||||
if (newArray.length === initialLength - 1) {
|
||||
adventures = newArray;
|
||||
showToast("Adventure removed successfully!");
|
||||
visitCount.update((n) => n - 1);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
} else {
|
||||
showToast("Failed to remove adventure");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -254,11 +204,7 @@
|
||||
{/if}
|
||||
|
||||
{#if adventureToEdit && adventureToEdit.id != undefined}
|
||||
<EditModal
|
||||
bind:adventureToEdit
|
||||
on:submit={saveAdventure}
|
||||
on:close={handleClose}
|
||||
/>
|
||||
<EditModal bind:adventureToEdit on:submit={save} on:close={handleClose} />
|
||||
{/if}
|
||||
|
||||
<div
|
||||
@@ -269,7 +215,7 @@
|
||||
{adventure}
|
||||
type="mylog"
|
||||
on:edit={editAdventure}
|
||||
on:remove={removeAdventure}
|
||||
on:remove={remove}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user