initialize pitch types on login

app/src/App.vue

@@ -1,15 +1,9 @@
-<template>
-  <ion-app>
-    <ion-router-outlet />
-  </ion-app>
-</template>
-
 <script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex'
 import { AppStore } from '@/store';
-import { onMounted, onBeforeUnmount } from "vue";
+import { onMounted, onBeforeUnmount, ref } from "vue";
 import EventBus from "./common/EventBus";
 
 const router = useRouter();
@@ -20,13 +14,30 @@ const logout = () => {
   router.push('/login');
 }
 
+const isOnline = ref(navigator.onLine);
+
 onMounted(() => {
   EventBus.on("logout", () => {
     logout();
   });
+
+  window.addEventListener("online", () => isOnline.value = true);
+  window.addEventListener("offline", () => isOnline.value = false);
+
+  if (isOnline.value) {
+    router.push("/login");
+  } else {
+    // checkStoredUserData();
+  }
 });
 
 onBeforeUnmount(() => {
   EventBus.remove("logout", null);
 })
 </script>
+
+<template>
+  <ion-app>
+    <ion-router-outlet />
+  </ion-app>
+</template>

app/src/services/AuthHeader.ts

@@ -1,12 +1,10 @@
-export default class AuthHeader {
+export default function authHeader(): any {
-    public header(): any {
+    const user = JSON.parse(localStorage.getItem('user') || '""');
-        const user = JSON.parse(localStorage.getItem('user') || '""');
 
-        if (user && user.accessToken) {
+    if (user && user.accessToken) {
-            // return { Authorization: 'Bearer ' + user.accessToken }; // for Spring Boot back-end
+        // return { Authorization: 'Bearer ' + user.accessToken }; // for Spring Boot back-end
-            return { 'x-access-token': user.accessToken };       // for Node.js Express back-end
+        return { 'x-access-token': user.accessToken };       // for Node.js Express back-end
-        } else {
+    } else {
-            return {};
+        return {};
-        }
     }
 }

app/src/services/PitchTypeService.ts

@@ -1,5 +1,6 @@
 import PitchType from "@/types/PitchType";
 import api from './Api';
+import authHeader from './AuthHeader';
 
 class PitchTypeService {
     private static instance: PitchTypeService;
@@ -15,18 +16,13 @@ class PitchTypeService {
     }
 
     async getAllPitchTypes(): Promise<PitchType[]> {
-        const users = await api.get('/pitch_types');
+        const users = await api.get('/pitch_types', { headers: authHeader() });
         return users.data;
     }
 
     async getPitchType(id: number): Promise<PitchType> {
-        const pitchType = await api.get(`/pitch_types/${id}`);
+        const pitchType = await api.get(`/pitch_types/${id}`, { headers: authHeader() });
         return pitchType.data;
-        // if (pitcher !== undefined) {
-        //     return pitcher;
-        // } else {
-        //     return Promise.reject();
-        // }
     }
 }
 

app/src/store/auth.ts

@@ -39,7 +39,7 @@ const auth: Module<AuthState, RootState> = {
             commit('logout');
         },
         register({ commit }: AuthActionContext, user) {
-            return AuthService.register(user.firstName, user.email, user.password).then(
+            return AuthService.register(user.email, user.password).then(
                 response => {
                     commit('registerSuccess');
                     return Promise.resolve(response.data);

app/src/store/index.ts

@@ -1,3 +1,4 @@
+import { InjectionKey } from 'vue'
 import { createStore, Store } from 'vuex';
 import auth, {AuthState} from './auth';
 import pitchTypes, {PitchTypeState} from './pitchType';
@@ -8,6 +9,8 @@ export interface RootState {
     pitchTypes: PitchTypeState;
 }
 
+export const key: InjectionKey<Store<RootState>> = Symbol()
+
 const store = createStore<RootState>({
     modules: {
         auth,

app/src/store/pitchType.ts

@@ -28,6 +28,7 @@ const pitchTypes: Module<PitchTypeState, RootState> = {
     },
     mutations: {
         initializedPitchTypes(state, pitchTypeList: PitchType[]) {
+            localStorage.setItem("pitchTypes", JSON.stringify(pitchTypeList));
             state.pitchTypes = pitchTypeList;
         }
     }

app/src/views/BullpenStats.vue

@@ -29,7 +29,7 @@
       </ion-card>
     </ion-content>
     <ion-footer>
-      <ion-button expand="full" color="success" @click="gotoPitcherList">Goto Pitcher List</ion-button>
+      <ion-button expand="full" color="success" @click="gotoHome">Home</ion-button>
     </ion-footer>
   </ion-page>
 </template>
@@ -79,10 +79,10 @@ export default defineComponent({
     const router = useRouter();
     const bps = ref<BullpenSessionService>(bullpenSessionService);
 
-    const gotoPitcherList = () => {
+    const gotoHome = () => {
-      router.push({ name: 'Pitchers' });
+      router.push('/home');
     }
-    return {bps, gotoPitcherList};
+    return {bps, gotoHome};
   }
 });
 

app/src/views/Home.vue

@@ -1,21 +1,26 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+// import { ref } from 'vue';
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
 import { playOutline, statsChartOutline, personOutline } from 'ionicons/icons';
 import img from '../assets/groot.jpg'
+import {useRouter} from "vue-router";
 
-const userImage = ref('../assets/groot.jpg'); // Replace with actual user image URL
+const router = useRouter();
+// const userImage = ref('../assets/groot.jpg'); // Replace with actual user image URL
 
 const startBullpen = () => {
   console.log('Starting bullpen session');
+  router.push({ path: '/prepare' });
 };
 
 const showStats = () => {
   console.log('Showing bullpen stats');
+  router.push({ path: '/stats' });
 };
 
 const showProfile = () => {
   console.log('Showing profile');
+  router.push({ path: '/profile' });
 };
 </script>
 

app/src/views/Login.vue

@@ -16,12 +16,12 @@
             <ion-list>
 
               <ion-item>
-                <ion-icon name="person" class="icon-login"></ion-icon>
+                <ion-icon :icon="personOutline" class="icon-login"></ion-icon>
                 <ion-input name="user" v-model="email" v-bind="emailAttrs" type="text" required placeholder="Username"></ion-input>
               </ion-item>
               <br />
               <ion-item>
-                <ion-icon name="lock" class="icon-login"></ion-icon>
+                <ion-icon :icon="lockClosedOutline" class="icon-login"></ion-icon>
                 <ion-input name="password" v-model="password" v-bind="passwordAttrs" type="password" required placeholder="Password"></ion-input>
               </ion-item>
 
@@ -79,6 +79,7 @@ import {
   IonInput,
   IonIcon,
 } from "@ionic/vue";
+import { lockClosedOutline, personOutline } from 'ionicons/icons';
 import { useForm } from 'vee-validate';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex'
@@ -104,7 +105,7 @@ const loggedIn = computed(() => store.state.auth.isAuthenticated);
 
 onMounted(() => {
   if (loggedIn.value) {
-    router.push('/prepare');
+    onLogin();
   }
 });
 
@@ -114,10 +115,11 @@ const submit = handleSubmit(values => {
     password: values.password,
   }).then(
       () => {
-        router.push('/prepare');
+        onLogin();
       },
       error => {
         loading.value = false;
+        console.log(error);
         // message.value =
         //     (error.response && error.response.data && error.response.data.message) ||
         //     error.message ||
@@ -128,4 +130,13 @@ const submit = handleSubmit(values => {
   loading.value = false;
 });
 
+const onLogin = () => {
+  console.log('check if pitch types are available.');
+
+  store.dispatch('pitchTypes/initialize').then(() => {
+    router.push('/home');
+  }, error => {
+    console.log(error);
+  });
+}
 </script>

app/src/vuex.d.ts

@@ -1,13 +1,12 @@
 import { Store } from 'vuex'
-import Pitcher from 'types/Pitcher'
+import {AuthState} from '@/store/auth'
+import {PitchTypeState} from '@/store/pitchType'
 
 declare module 'vue' {
     // declare your own auth states
     interface State {
-        status: {
+        auth: AuthState,
-            loggedIn: boolean
+        pitchTypes: PitchTypeState
-        },
-        user: Pitcher | null
     }
 
     // provide typings for `this.$auth`