delete button for sessions - gets sessions from backend

package.json

@@ -34,5 +34,8 @@
 		"vite": "^4.0.0",
 		"vitest": "^0.25.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@sveltestack/svelte-query": "^1.6.0"
+	}
 }

src/components/DeleteButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import type { Session } from '../types/session';
+	export let session: Session;
+
+	const dispatch = createEventDispatcher();
+
+	const deleteSession = (session: Session) => async () => {
+		const res = await fetch('http://localhost:8000/sessions', {
+			method: 'DELETE',
+			body: JSON.stringify(session._id)
+		});
+		if (res.ok) {
+			dispatch('delete', {
+				id: session._id
+			});
+		}
+	};
+</script>
+
+<div class="ml-auto">
+	<button
+		on:click={deleteSession(session)}
+		class="bg-red-500 p-[10px] text-white font-semibold rounded-sm hover:bg-red-600 transition"
+		>Delete Session</button
+	>
+</div>

src/routes/+page.server.ts

@@ -0,0 +1,14 @@
+import type { PageServerLoad } from './$types';
+import type { Session } from '../types/session';
+// import { useQuery } from '@sveltestack/svelte-query'
+import { fetchData } from '../use/fetch';
+export const load = (async () => {
+	return { sessions: await fetchData<Session[]>('http://localhost:8000/sessions')}
+}) satisfies PageServerLoad;
+
+// export const load = (() => {
+// 	const queryResult = useQuery('sessions', () => {
+//         return fetch('http://localhost:8000/sessions').then(res => res.json())
+//     })
+//     return { sessions: queryResult }
+// }) satisfies PageServerLoad;

src/routes/+page.svelte

@@ -1,8 +1,61 @@
 <script lang="ts">
-    import type { PageData } from './$types';
-    export let data: PageData;
+	import type { PageServerData } from './$types';
+	import { convertISODate, calculateHours } from '../use/time';
+	import DeleteButton from '../components/DeleteButton.svelte';
+	export let data: PageServerData;
+
+	$: startTimesFormatted = data.sessions.map((session) => convertISODate(session.startTime));
+	$: endTimesFormatted = data.sessions.map((session) => convertISODate(session.endTime));
+	$: totalHours = data.sessions.map((session) =>
+		calculateHours(session.startTime, session.endTime)
+	);
+
+  const handleDelete = (event: CustomEvent<{id: string}>) => {
+    data.sessions = data.sessions.filter((session) => session._id !== event.detail.id);
+  };
 </script>
 
-<div>
-    {data.text}
-</div>
+<main class="p-4">
+	<div class="px-8">
+		<button
+			class="p-[10px] rounded-sm bg-blue-400 text-white font-semibold hover:bg-blue-500 transition"
+			>New Session</button
+		>
+	</div>
+	<div class="p-8 flex flex-col gap-3">
+		{#if data.sessions.length === 0}
+			<div class="text-xl font-semibold">No sessions found</div>
+		{:else}
+			{#each data.sessions as session, i}
+				<div class="p-8 bg-white rounded-md flex flex-col gap-3 shadow-sm">
+					<div class="text-xl font-semibold">
+						{session.name}
+					</div>
+					<div class="relative overflow-x-auto">
+						<table class="w-full text-sm text-left">
+							<thead class="text-sm uppercase bg-gray-100 border-l border-r border-t">
+								<tr>
+									<th scope="col" class="px-6 py-3"> Session start </th>
+									<th scope="col" class="px-6 py-3"> Session end </th>
+									<th scope="col" class="px-6 py-3"> Hourly rate </th>
+									<th scope="col" class="px-6 py-3"> Total hours </th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr class="bg-white border-l border-r border-b">
+									<th scope="row" class="px-6 py-4 font-medium text-gray-900">
+										{startTimesFormatted[i]}
+									</th>
+									<td class="px-6 py-4"> {endTimesFormatted[i]} </td>
+									<td class="px-6 py-4"> {session.hourlyRate} </td>
+									<td class="px-6 py-4"> {totalHours[i]} </td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<DeleteButton on:delete={handleDelete} session={session}/>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</main>

src/styles/app.css

@@ -26,7 +26,7 @@
     }
 
     html {
-        @apply font-opensans;
+        @apply font-opensans bg-gray-100;
     }
 }
 

src/types/greeting.ts

@@ -0,0 +1,3 @@
+export interface Greeting {
+    message: string;
+}

src/types/session.ts

@@ -0,0 +1,8 @@
+export interface Session {
+    _id: string
+    name: string
+    hours: number
+    startTime: Date
+    endTime: Date
+    hourlyRate?: number
+  }

src/use/fetch.ts

@@ -0,0 +1,4 @@
+export const fetchData = async <T>(url: string): Promise<T> => {
+    const response = await fetch(url);
+    return await response.json()
+}

src/use/time.ts

@@ -0,0 +1,21 @@
+export const convertISODate = (timestamp: Date): string => {
+    const date = new Date(timestamp);
+
+    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    const day = date.getDate().toString().padStart(2, '0')
+    const year = date.getFullYear()
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    const AMorPM = Number(hours) >= 12 ? 'PM' : 'AM';
+
+    return `${month}/${day}/${year} ${hours}:${minutes} ${AMorPM}`
+}
+
+export const calculateHours = (startTimestamp: Date, endTimestamp: Date): string => {
+    const start = new Date(startTimestamp);
+    const end = new Date(endTimestamp);
+    const diff = end.getTime() - start.getTime();
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    return `${hours} hours ${minutes} minutes`;
+}