From 609d3743ed43996f94897d53f03ed990d2721e64 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sat, 4 May 2024 17:14:20 +0000 Subject: [PATCH 1/5] feat: Add addAdventure function to adventureService The code changes include adding a new function called addAdventure to the adventureService module. This function is responsible for sending a POST request to the corresponding API endpoint to add a new adventure. If the request is successful, the adventure is added to the local plans array and a success toast is displayed. If the request fails, an error toast is displayed. This functionality allows users to add adventures to the planner page. --- src/routes/planner/+page.svelte | 42 +++++---------------- src/services/adventureService.ts | 63 +++++++++++++++++++------------- 2 files changed, 47 insertions(+), 58 deletions(-) diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte index c0acbd1..8e9092d 100644 --- a/src/routes/planner/+page.svelte +++ b/src/routes/planner/+page.svelte @@ -7,6 +7,7 @@ import { saveAdventure, removeAdventure, + addAdventure, } from "../../services/adventureService.js"; import SucessToast from "$lib/components/SucessToast.svelte"; import mapDrawing from "$lib/assets/adventure_map.svg"; @@ -76,40 +77,15 @@ } } - 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/planner", { - 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 - plans = [...plans, 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, plans); + if (newArray.length > 0) { + plans = newArray; + showToast("Adventure added successfully!"); + } else { + showToast("Failed to add adventure"); + } }; diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts index cf851b6..b39492d 100644 --- a/src/services/adventureService.ts +++ b/src/services/adventureService.ts @@ -1,6 +1,8 @@ import type { Adventure } from "$lib/utils/types"; -// json that maps the type to api routes +/** + * Object containing the API routes for the different types of adventures. + */ const apiRoutes: { [key: string]: string } = { planner: "/api/planner", mylog: "/api/visits", @@ -50,6 +52,12 @@ export async function saveAdventure( return adventureArray; } +/** + * Removes an adventure from the adventure array and sends a delete request to the server. + * @param adventure - The adventure to be removed. + * @param adventureArray - The array of adventures. + * @returns A promise that resolves to the updated adventure array. + */ export async function removeAdventure( adventure: Adventure, adventureArray: Adventure[] @@ -81,28 +89,33 @@ export async function removeAdventure( } /** - * 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 }), + * Adds an adventure to the adventure array and sends a POST request to the specified URL. + * @param {Adventure} adventure - The adventure to be added. + * @param {Adventure[]} adventureArray - The array of adventures. + * @returns {Promise} - A promise that resolves to the updated adventure array. + */ +export async function addAdventure( + adventure: Adventure, + adventureArray: Adventure[] +): Promise { + let url = apiRoutes[adventure.type]; + let detailAdventure = adventure; + // post request to /api/visits with adventure data + const response = await fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ detailAdventure }), + }) + .then((response) => response.json()) + .then((data) => { + adventureArray.push(data.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); - }); - } - * - * - */ + .catch((error) => { + console.error("Error:", error); + return []; + }); + + return adventureArray; +} From 66d2dc7b15aa6bec50e035d85bed7edb94ce5978 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sat, 4 May 2024 17:18:53 +0000 Subject: [PATCH 2/5] 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. --- src/routes/log/+page.svelte | 128 +++++++++++------------------------- 1 file changed, 37 insertions(+), 91 deletions(-) diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte index ac491b6..08cfe28 100644 --- a/src/routes/log/+page.svelte +++ b/src/routes/log/+page.svelte @@ -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"); + } + } } @@ -254,11 +204,7 @@ {/if} {#if adventureToEdit && adventureToEdit.id != undefined} - + {/if}
{/each}
From 87cc6da518a9ecb39c217a6c796d1f1b9a5c50ce Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sat, 4 May 2024 17:27:51 +0000 Subject: [PATCH 3/5] feat: Add validation for adventure name in CreateNewAdventure component The code changes include adding validation for the adventure name in the CreateNewAdventure component. If the name is empty, an alert is displayed and the adventure creation is prevented. This enhancement ensures that users provide a name for the adventure before creating it. --- src/lib/components/CreateNewAdventure.svelte | 5 +++++ src/services/adventureService.ts | 12 ++++++++++++ 2 files changed, 17 insertions(+) diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte index 615b8e4..7dd1639 100644 --- a/src/lib/components/CreateNewAdventure.svelte +++ b/src/lib/components/CreateNewAdventure.svelte @@ -26,6 +26,10 @@ function create() { addActivityType(); + if (newAdventure.name.trim() === "") { + alert("Name is required"); + return; + } dispatch("create", newAdventure); console.log(newAdventure); } @@ -70,6 +74,7 @@ diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts index b39492d..8559702 100644 --- a/src/services/adventureService.ts +++ b/src/services/adventureService.ts @@ -1,3 +1,4 @@ +import { visitCount } from "$lib/utils/stores/visitCountStore"; import type { Adventure } from "$lib/utils/types"; /** @@ -111,6 +112,9 @@ export async function addAdventure( .then((response) => response.json()) .then((data) => { adventureArray.push(data.adventure); + if (data.adventure.type === "mylog") { + incrementVisitCount(1); + } }) .catch((error) => { console.error("Error:", error); @@ -119,3 +123,11 @@ export async function addAdventure( return adventureArray; } + +/** + * Increments the visit count by the specified amount. + * @param {number} amount - The amount to increment the visit count by. + */ +export function incrementVisitCount(amount: number) { + visitCount.update((n) => n + 1); +} From 0c2ce8ce93ffec4536543975dd49c3eb5efb5c69 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sat, 4 May 2024 17:41:37 +0000 Subject: [PATCH 4/5] feat: Add ConfirmModal component for delete confirmation --- src/routes/log/+page.svelte | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte index 08cfe28..1326ead 100644 --- a/src/routes/log/+page.svelte +++ b/src/routes/log/+page.svelte @@ -7,6 +7,7 @@ import type { Adventure } from "$lib/utils/types"; import { onMount } from "svelte"; import exportFile from "$lib/assets/exportFile.svg"; + import ConfirmModal from "$lib/components/ConfirmModal.svelte"; import deleteIcon from "$lib/assets/deleteIcon.svg"; import SucessToast from "$lib/components/SucessToast.svelte"; import mapDrawing from "$lib/assets/adventure_map.svg"; @@ -26,6 +27,7 @@ let isShowingToast: boolean = false; let toastAction: string = ""; + let confirmModalOpen: boolean = false; // Sets the adventures array to the data from the server onMount(async () => { @@ -122,6 +124,7 @@ function handleClose() { adventureToEdit = undefined; + confirmModalOpen = false; isShowingMoreFields = false; } @@ -239,7 +242,7 @@ -