Move API calls from state to Track methods

client/src/components/NavBar.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router';
-import { error } from '../error'
 import { state } from '../state'
 
 </script>

client/src/components/TickComponent.vue

@@ -15,8 +15,8 @@ const className = computed(() => isSet.value ? "button is-rounded is-info" : "bu
 
 async function toggle() {
     if (isSet.value) {
-        await state.taskMarkedIncomplete(props.track, props.date)
+        await props.track.markIncomplete(props.date)
     } else
-        await state.taskCompleted(props.track, props.date)
+        await props.track.markComplete(props.date)
 }
 </script>

client/src/components/TrackIcon.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { state } from '../state';
+import { Track } from '../track';
 
 const props = defineProps<{icon: String, id: number|undefined}>()
 
 const del = () => {
     if(props.id)
         if(confirm("are you sure you want to delete this track?"))
-            state.removeTrack(props.id)
+            Track.deleteById(props.id)
 }
 </script>
 <template>

client/src/state.ts

@@ -11,15 +11,6 @@ enum State {
     Fetched,
 }
 
-function dateQuery(date: Date): URLSearchParams {
-    let query = new URLSearchParams()
-    query.set("year", date.getUTCFullYear().toString())
-    query.set("month", (date.getUTCMonth() + 1).toString())
-    // good thing I still had this ^^^^^^^^^^^^^^ in mind when I wrote this 😬
-    query.set("day", date.getUTCDate().toString())
-    return query
-}
-
 interface LoggedInUser {
     name: string
 }
@@ -101,36 +92,6 @@ class AppState {
         if (this.state != State.Unfetched) return
         await this.repopulate()
     }
-    async taskCompleted(track: Track, date: Date): Promise<Tick> {
-        const query = dateQuery(date)
-        const response: Response = await fetch(`/api/v1/tracks/${track.id}/ticked?${query.toString()}`, { method: "PATCH" })
-        const body = await response.text()
-        if (!response.ok) {
-            error(body)
-            throw new Error(`error setting tick for track ${track.id} ("${track.name}"): ${response.status} ${response.statusText}`)
-        }
-        return JSON.parse(body)
-    }
-    async taskMarkedIncomplete(track: Track, date: Date) {
-        const query = dateQuery(date)
-        const { ok, status, statusText } = await fetch(`/api/v1/tracks/${track.id}/all-ticks?${query.toString()}`, { method: 'DELETE' })
-        if (!ok)
-            error(`error deleting ticks for ${track.id}: ${statusText} (${status})`)
-    }
-    async addTrack(track: Track): Promise<boolean> {
-        const response = await fetch('/api/v1/tracks', {
-            method: "POST",
-            body: JSON.stringify(track),
-            headers: { "Content-Type": "application/json" }
-        })
-        if (!response.ok)
-            error(`error submitting track: ${track}: ${response.statusText} (${response.status})`)
-        return response.ok
-    }
-    async removeTrack(trackID: number) {
-        const response = await fetch(`/api/v1/tracks/${trackID}`, { method: "DELETE" })
-        if (!response.ok) error(`error deleting track with ID ${trackID}: ${response.statusText} (${response.status})`)
-    }
     async logOut() {
         const result = await fetch('/api/v1/auth', {method: 'DELETE'})
         if(!result.ok) return error('failed to log out')

client/src/track.ts

@@ -1,5 +1,6 @@
 import { error } from "./error"
 import { Tick, ITick } from './ticks'
+import { dateQuery } from "./util"
 
 export interface ITrack {
     id?: number
@@ -48,6 +49,34 @@ export class Track implements ITrack {
         this.fetchTicks = this.fetchTicks.bind(this)
     }
 
+    /**
+     * Add this track to the database. A `TrackAdded` event should have been
+     * received from the server on the event stream by the time this returns.
+     * 
+     * @returns whether or not the query succeeded
+     */
+    async create(): Promise<boolean> {
+        // note that this.id is expected to be `undefined` here.
+        const response = await fetch('/api/v1/tracks', {
+            method: "POST",
+            body: JSON.stringify(this),
+            headers: { "Content-Type": "application/json" }
+        })
+        if (!response.ok)
+            error(`error submitting track ${this.name}: ${response.statusText} (${response.status})`)
+        return response.ok
+    }
+
+    async delete() {
+        const id = this.id
+        if (id) await Track.deleteById(id)
+    }
+
+    static async deleteById(id: number) {
+        const response = await fetch(`/api/v1/tracks/${id}`, { method: "DELETE" })
+        if (!response.ok) error(`error deleting track with ID ${id}: ${response.statusText} (${response.status})`)
+    }
+
     static fromJSON(track: ITrack): Track {
         return new Track(track.id, track.name, track.description, track.icon, track.enabled, track.multiple_entries_per_day, track.color, track.order)
     }
@@ -98,4 +127,36 @@ export class Track implements ITrack {
         }
         return []
     }
+    /**
+     * Mark this track as being completed on the given date. A `TickAdded` event
+     * should have been received from the server on the event stream by the time
+     * this returns.
+     * 
+     * @param date the date the task was completed
+     * @returns the decoded server API response
+     */
+    async markComplete(date: Date) {
+        const query = dateQuery(date)
+        const response: Response = await fetch(`/api/v1/tracks/${this.id}/ticked?${query.toString()}`, { method: "PATCH" })
+        const body = await response.text()
+        if (!response.ok) {
+            error(body)
+            throw new Error(`error setting tick for track ${this.id} ("${this.name}"): ${response.status} ${response.statusText}`)
+        }
+        return JSON.parse(body)
+    }
+    /**
+     * Mark this track as being incomplete on the given date. A `TickAdded` event
+     * should have been received from the server on the event stream by the time
+     * this returns.
+     * 
+     * @param date the date the task was completed
+     * @returns the decoded server API response
+     */
+    async markIncomplete(date: Date) {
+        const query = dateQuery(date)
+        const { ok, status, statusText } = await fetch(`/api/v1/tracks/${this.id}/all-ticks?${query.toString()}`, { method: 'DELETE' })
+        if (!ok)
+            error(`error deleting ticks for ${this.id}: ${statusText} (${status})`)
+    }
 }

client/src/util.ts

@@ -5,4 +5,13 @@ export function getCookie(key: string): string | null {
     if(end === -1)
         end = undefined
     return document.cookie.substring(start + key.length + 1, end)
-}
+}
+
+export function dateQuery(date: Date): URLSearchParams {
+    let query = new URLSearchParams()
+    query.set("year", date.getUTCFullYear().toString())
+    query.set("month", (date.getUTCMonth() + 1).toString())
+    // good thing I still had this ^^^^^^^^^^^^^^ in mind when I wrote this 😬
+    query.set("day", date.getUTCDate().toString())
+    return query
+}

client/src/views/NewTrackView.vue

@@ -2,7 +2,6 @@
 import { RouterLink, useRouter } from 'vue-router';
 import { Track } from '../track';
 import { computed, ref } from 'vue';
-import { state } from '../state';
 
 const props = defineProps<{ initialState?: Track }>()
 const router = useRouter()
@@ -26,7 +25,7 @@ const submit = async () => {
     const track = new Track(undefined, name.value, description.value,
         icon.value, Number(enabled.value), Number(multipleEntriesPerDay.value),
         color.value, order.value)
-    if (await state.addTrack(track))
+    if (await track.create())
         router.push('/')
 }
 </script>