stored pitch types in local storage

app/src/services/PitchTypeService.ts

@@ -1,29 +1,14 @@
 import PitchType from "@/types/PitchType";
-import api from './Api';
-import authHeader from './AuthHeader';
 
 class PitchTypeService {
-    private static instance: PitchTypeService;
+    getLocalPitchTypes(): PitchType[] {
-
+        return JSON.parse(localStorage.getItem("pitchTypes") || '""');
-    private constructor() {}
-
-    // Static method to get the instance of the service
-    public static getInstance(): PitchTypeService {
-        if (!PitchTypeService.instance) {
-            PitchTypeService.instance = new PitchTypeService();
-        }
-        return PitchTypeService.instance;
     }
 
-    async getAllPitchTypes(): Promise<PitchType[]> {
+    updateLocalPitchTypes(pitchTypes: PitchType[]): void {
-        const users = await api.get('/pitch_types', { headers: authHeader() });
+        localStorage.setItem("pitchTypes", JSON.stringify(pitchTypes));
-        return users.data;
     }
 
-    async getPitchType(id: number): Promise<PitchType> {
-        const pitchType = await api.get(`/pitch_types/${id}`, { headers: authHeader() });
-        return pitchType.data;
-    }
 }
 
-export const pitchTypeService = PitchTypeService.getInstance();
+export default new PitchTypeService();

app/src/store/pitchType.ts

@@ -1,8 +1,11 @@
-import {pitchTypeService} from '@/services/PitchTypeService'
+import pitchTypeService from '@/services/PitchTypeService'
 import PitchType from "@/types/PitchType";
+import api from "@/services/Api";
+import authHeader from '@/services/AuthHeader';
 
 import { Module, ActionContext } from 'vuex';
 import { RootState } from './index';
+import {AxiosResponse} from 'axios';
 
 export interface PitchTypeState {
     pitchTypes: PitchType[];
@@ -15,10 +18,10 @@ const pitchTypes: Module<PitchTypeState, RootState> = {
     state: {pitchTypes: []},
     actions: {
         initialize({ commit }: PitchTypeActionContext) {
-            return pitchTypeService.getAllPitchTypes().then(
+            api.get('/pitch_types', { headers: authHeader() }).then(
-                (pitchTypeList: PitchType[]) => {
+                (response: AxiosResponse) => {
-                    commit('initializedPitchTypes', pitchTypeList);
+                    commit('initializedPitchTypes', response.data);
-                    return Promise.resolve(pitchTypeList);
+                    return Promise.resolve(response.data);
                 },
                 error => {
                     return Promise.reject(error);
@@ -28,7 +31,7 @@ const pitchTypes: Module<PitchTypeState, RootState> = {
     },
     mutations: {
         initializedPitchTypes(state, pitchTypeList: PitchType[]) {
-            localStorage.setItem("pitchTypes", JSON.stringify(pitchTypeList));
+            pitchTypeService.updateLocalPitchTypes(pitchTypeList);
             state.pitchTypes = pitchTypeList;
         }
     }

app/src/views/PitcherList.vue

@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonLabel } from '@ionic/vue';
+import { pitcherService } from "@/services/PitcherService";
+import Pitcher from "@/types/Pitcher";
+import {bullpenSessionService} from "@/services/BullpenSessionService";
+
+const pitchers = ref<Pitcher[]>([]);
+const router = useRouter();
+
+bullpenSessionService.clear();
+
+onMounted(async () => {
+  pitchers.value = await pitcherService.getAllPitchers();
+});
+
+const goToPreparePitch = (pitcher: Pitcher) => {
+  bullpenSessionService.startSession( pitcher );
+  router.push({ name: 'PreparePitch' });
+};
+
+</script>
+
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -22,48 +46,6 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonLabel } from '@ionic/vue';
-import { pitcherService } from "@/services/PitcherService";
-import Pitcher from "@/types/Pitcher";
-import {bullpenSessionService} from "@/services/BullpenSessionService";
-
-export default defineComponent({
-  name: "PitcherList",
-  components: {
-    IonContent,
-    IonHeader,
-    IonToolbar,
-    IonPage,
-    IonTitle,
-    IonList,
-    IonItem,
-    IonLabel,
-  },
-  setup() {
-    // Define a reactive array to hold colors
-    const pitchers = ref<Pitcher[]>([]);
-    const router = useRouter();
-
-    bullpenSessionService.clear();
-
-    // Fetch colors from the service when the component is mounted
-    onMounted(async () => {
-      pitchers.value = await pitcherService.getAllPitchers();
-    });
-
-    const goToPreparePitch = (pitcher: Pitcher) => {
-      bullpenSessionService.startSession( pitcher );
-      router.push({ name: 'PreparePitch' });
-    };
-
-    return { pitchers, goToPreparePitch };
-  },
-});
-</script>
-
 <style scoped>
 #container {
   text-align: center;

app/src/views/PreparePitch.vue

@@ -1,8 +1,51 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import {pitchTypeService} from "@/services/PitchTypeService";
+import {
+  IonContent,
+  IonHeader,
+  IonFooter,
+  IonToolbar,
+  IonTitle,
+  IonLabel,
+  IonButton,
+  IonPage,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+} from "@ionic/vue";
+import PitchType from "@/types/PitchType";
+import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";
+import {useRouter} from "vue-router";
+
+const router = useRouter();
+const pitchTypes = ref<PitchType[]>([]);
+const bps = ref<BullpenSessionService>(bullpenSessionService);
+
+onMounted(async () => {
+  pitchTypes.value = await pitchTypeService.getAllPitchTypes();
+  bps.value.currentBullpenPitch().pitchType = await pitchTypeService.getPitchType(1);
+});
+
+const setPitchType = (pitchType: PitchType) => {
+  bps.value.currentBullpenPitch().pitchType = pitchType;
+}
+
+const gotoFinalizePitch = () => {
+  router.push({ name: 'FinalizePitch' });
+}
+const setPlannedPitchArea = (hitArea: number) => {
+  bps.value.currentBullpenPitch().plannedPitchArea = hitArea;
+};
+
+</script>
+
 <template>
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-title>Prepare Pitch for {{ bps.getPitcher().first_name }} {{ bps.getPitcher().last_name }}</ion-title>
+        <ion-title>Prepare Pitch for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
@@ -87,71 +130,6 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-import {defineComponent, onMounted, ref} from "vue";
-import {pitchTypeService} from "@/services/PitchTypeService";
-import {
-  IonContent,
-  IonHeader,
-  IonFooter,
-  IonToolbar,
-  IonTitle,
-  IonLabel,
-  IonButton,
-  IonPage,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardTitle,
-} from "@ionic/vue";
-import PitchType from "@/types/PitchType";
-import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";
-import {useRouter} from "vue-router";
-
-export default defineComponent({
-  name: "PreparePitch",
-  components: {
-    IonPage,
-    IonLabel,
-    IonFooter,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonToolbar,
-    IonTitle,
-    IonCard,
-    IonCardContent,
-    IonCardHeader,
-    IonCardTitle
-  },
-  setup() {
-    const router = useRouter();
-    // const pitcher = ref<Pitcher>(bullpenSessionService.getPitcher());
-    // const pitch = ref<BullpenPitch>(bullpenSessionService.currentBullpenPitch());
-    const pitchTypes = ref<PitchType[]>([]);
-    const bps = ref<BullpenSessionService>(bullpenSessionService);
-    onMounted(async () => {
-      pitchTypes.value = await pitchTypeService.getAllPitchTypes();
-      bps.value.currentBullpenPitch().pitchType = await pitchTypeService.getPitchType(1);
-    });
-
-    const setPitchType = (pitchType: PitchType) => {
-      bps.value.currentBullpenPitch().pitchType = pitchType;
-    }
-
-    const gotoFinalizePitch = () => {
-      router.push({ name: 'FinalizePitch' });
-    }
-    return {bps, pitchTypes, setPitchType, gotoFinalizePitch};
-  },
-  methods: {
-    setPlannedPitchArea(hitArea: number) {
-      this.bps.currentBullpenPitch().plannedPitchArea = hitArea;
-    }
-  }
-});
-</script>
-
 <style scoped>
 .wasted {
   fill: firebrick;