some small app changes

app/src/App.vue

@@ -95,7 +95,7 @@ const logoutUser = () => {
               <ion-icon slot="icon-only" :icon="chevronBack"></ion-icon>
             </ion-button>
           </ion-buttons>
-          <ion-title>Menu Content</ion-title>
+          <ion-title>User Menu</ion-title>
         </ion-toolbar>
       </ion-header>
       <ion-content>

app/src/services/BullpenSessionService.ts

@@ -30,7 +30,7 @@ export class BullpenSessionService extends ApiService<Bullpen> {
         }
     }
 
-    public findByPitcherId(id: number, page: number, size: number): Promise<Pageable<Bullpen>> {
+    public fetchAllByUser(id: number, page: number, size: number): Promise<Pageable<Bullpen>> {
         return api
             .get('/bullpen_session', { params: {
                 user: id,

app/src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, ref} from 'vue';
+import {computed, ref, reactive} from 'vue';
 import {
   IonPage,
   IonHeader,
@@ -7,24 +7,33 @@ import {
   IonTitle,
   IonContent,
   IonAvatar,
-  IonButton,
   IonButtons,
   IonIcon,
   IonMenuButton,
   IonFab,
-  IonFabButton
+  IonFabButton,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  InfiniteScrollCustomEvent,
+  IonList,
+  IonItem,
+  IonLabel, IonBadge,
 } from '@ionic/vue';
 import {
   playOutline,
   statsChartOutline,
   personOutline,
+  baseball,
   add,
-  personAddOutline
+  personAddOutline, baseballOutline
 } from 'ionicons/icons';
 import {useStore} from "vuex";
 import {useRouter} from "vue-router";
 import BullpenSessionService from "@/services/BullpenSessionService";
 import TokenService from "@/services/TokenService";
+import dayjs from "dayjs";
+import Bullpen from "@/types/Bullpen";
+import PitchType from "@/types/PitchType";
 
 const router = useRouter();
 const store = useStore();
@@ -60,6 +69,39 @@ const addPlayer = () => {
   router.push({ path: '/player/create' });
 }
 
+const items = reactive<Bullpen[]>([]);
+const page = ref(0);
+
+const generateItems = () => {
+  BullpenSessionService
+      .fetchAllByUser(user.value.id, page.value, 10)
+      .then((bullpens) => {
+        ++page.value;
+        bullpens.data.forEach((bullpen: Bullpen) => {
+          items.push(bullpen);
+        })
+      }, error => {
+        console.log(error);
+      });
+};
+
+const formatDate = (date: Date) => {
+  return dayjs(date).format('YYYY.MM.DD HH:mm');
+}
+
+// const determinePitchTypeName = (id: number): string => {
+//   const pitchType = store.state.pitchTypes.find((pitchType: PitchType) => pitchType.id === id);
+//
+//   return pitchType?.name ?? 'Unknown';
+// }
+
+const ionInfinite = (event: InfiniteScrollCustomEvent) => {
+  generateItems();
+  setTimeout(() => event.target.complete(), 500);
+};
+
+generateItems();
+
 </script>
 
 <template>
@@ -75,7 +117,24 @@ const addPlayer = () => {
       </ion-toolbar>
     </ion-header>
 
-    <ion-content class="ion-padding">
+    <ion-content>
+      <ion-list>
+        <ion-item v-for="(bullpen, index) in items" :key="index">
+          <ion-icon aria-hidden="true" :icon="baseball" slot="start"></ion-icon>
+          <ion-label>Bullpen from ({{formatDate(bullpen.startedAt)}})</ion-label>
+<!--          <ion-list v-for="(pitch, index) in bullpen.pitches" :key="index">-->
+<!--            <ion-item>-->
+<!--              <ion-icon slot="start" :icon="baseballOutline" class="icon-login"></ion-icon>-->
+<!--              <ion-label>{{determinePitchTypeName(pitch.pitchTypeId)}}</ion-label>-->
+<!--              <ion-badge>{{pitch.aimedArea}}</ion-badge>-->
+<!--              <ion-badge>{{pitch.hitArea}}</ion-badge>-->
+<!--            </ion-item>-->
+<!--          </ion-list>-->
+        </ion-item>
+      </ion-list>
+      <ion-infinite-scroll @ionInfinite="ionInfinite">
+        <ion-infinite-scroll-content></ion-infinite-scroll-content>
+      </ion-infinite-scroll>
 <!--      <div class="user-container">-->
 <!--        <ion-avatar class="user-avatar">-->
 <!--          <template v-if="userImage">-->