add some typescript

client/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_API_URL: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}

client/src/components/addItem.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import itemService from '../services/itemService';
+import { createItem } from '../services/itemService';
 
 export default {
   name: "addItem",
@@ -44,7 +44,7 @@ export default {
       if (this.name != "" && this.price > 0) {
         this.loading = true;
 
-        let response = await itemService.createItem(this.budgetId, this.recipientId, this.name, this.price);
+        let response = await createItem(this.budgetId, this.recipientId, this.name, this.price);
           
         this.items.push(response.data.data);
         this.clear();        

client/src/components/budgetList.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="budget-list-container">
     <h1 class="title is-4">My Budgets</h1>
+    <Test />
     <clip-loader v-if="loading" size="80" color="#973735" />
     <div class="grid">
       <budget-card-v2 v-for="budget in budgets" v-bind:key="budget.id" v-bind:budget="budget" />

client/src/components/item.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import itemService from '../services/itemService';
+import { updateItem } from '../services/itemService';
 
 export default {
   name: "item",
@@ -49,7 +49,7 @@ export default {
   methods: {
     togglePurchase: async function() {
       try {
-        await itemService.updateItem(
+        await updateItem(
           this.budgetId,
           this.recipientId,
           this.item.id,
@@ -64,7 +64,7 @@ export default {
       }
     },
     update: async function() {      
-      await itemService.updateItem(
+      await updateItem(
         this.budgetId,
         this.recipientId,
         this.item.id,

client/src/components/recipientDetails.vue

@@ -42,7 +42,7 @@
 import addItem from './addItem.vue'
 import item from './item.vue'
 
-import itemService from '../services/itemService'
+import { deleteItem } from '../services/itemService'
 
 export default {
   name: 'recipientDetails',
@@ -61,7 +61,7 @@ export default {
       if (!confirm(`Are you sure you'd like to delete '${item.name}'? This cannot be undone.`))
         return;
 
-      await itemService.deleteItem(this.budgetId, this.recipient.id, item.id);
+      await deleteItem(this.budgetId, this.recipient.id, item.id);
       
       this.recipient.items = this.recipient.items.filter(i => i.id != item.id);
     }

client/src/infrastructure/http.ts

@@ -0,0 +1,32 @@
+import axios from 'axios';
+
+let http = 
+  axios.create({
+    baseURL: import.meta.env.VITE_API_URL
+  });
+
+let headers = () =>
+  ({
+    headers: {
+      'Access-Control-Allow-Headers': '*',
+      'Authorization': `Bearer ${localStorage.getItem('token')}`
+    }
+  });
+
+export default {
+  get<T>(url: string) {
+    return http.get<T>(url, headers());
+  },
+
+  post<T>(url: string, data: any) {
+    return http.post<T>(url, data, headers());
+  },
+
+  patch<T>(url: string, data: any) {
+    return http.patch<T>(url, data, headers());
+  },
+
+  delete(url: string) {
+    http.delete(url, headers());
+  }
+};

client/src/services/itemService.ts

@@ -0,0 +1,15 @@
+import http from '../infrastructure/http';
+import { Item } from '../types/Item';
+
+
+export function createItem(budgetId: number, recipientId: number, name: string, price: number) {
+  return http.post<Item>(`/api/budgets/${budgetId}/recipients/${recipientId}/items`, { name, price });
+}
+
+export function updateItem(budgetId, recipientId, id, name, price, purchased) {
+  return http.patch<Item>(`/api/budgets/${budgetId}/recipients/${recipientId}/items/${id}`, { name, price, purchased });
+}
+
+export function deleteItem(budgetId, recipientId, id) {
+  http.delete(`/api/budgets/${budgetId}/recipients/${recipientId}/items/${id}`);
+}

client/src/types/Item.ts

@@ -0,0 +1,9 @@
+export type Item = {
+    id: number
+    recipientId: number
+    name: string
+    price: number
+    purchased: boolean
+    created_at: Date
+    updated_at: Date
+}

client/vite.config.js

@@ -1,10 +1,10 @@
-import vue from '@vitejs/plugin-vue2'
 import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue2'
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [vue()],
     server: {
         port: 8080
     }
-})
+})