chore(profile): moved fetching history journal to separate component

src/components/PlayerProfileView/ProfileHistoryList.vue

@@ -97,10 +97,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, reactive } from 'vue';
+import { computed, onMounted, PropType, reactive, ref } from 'vue';
 import { humanizeDuration } from '../../composables/time';
 import { API } from '../../typings/api';
 import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+import { useRoute } from 'vue-router';
 
 type JournalEntryType = 'Timetable' | 'Dispatcher' | 'IssuedTimetable';
 
@@ -111,17 +113,16 @@ interface JournalEntry {
 }
 
 const props = defineProps({
-  playerJournal: {
-    type: Object as PropType<API.PlayerJournal.Data | null>,
-    required: true
-  },
-
   playerName: {
     type: String
   }
 });
 
 const { t } = useI18n();
+const apiStore = useApiStore();
+const route = useRoute();
+
+const playerJournal = ref<API.PlayerJournal.Data | null>(null);
 
 const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
   Timetable: true,
@@ -129,13 +130,17 @@ const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
   IssuedTimetable: true
 });
 
+onMounted(() => {
+  fetchPlayerJournal();
+});
+
 const combinedJournal = computed<JournalEntry[]>(() => {
-  if (!props.playerJournal || !props.playerName) return [];
+  if (!playerJournal.value || !props.playerName) return [];
 
   const list = [
-    ...props.playerJournal.timetables,
-    ...props.playerJournal.duties,
-    ...props.playerJournal.issuedTimetables
+    ...playerJournal.value.timetables,
+    ...playerJournal.value.duties,
+    ...playerJournal.value.issuedTimetables
   ]
     .reduce<JournalEntry[]>((acc, v) => {
       // Timetable or dispatcher type
@@ -182,6 +187,27 @@ function toggleFilter(filterType: JournalEntryType) {
 
   activeFilterTypes[filterType] = toggledState;
 }
+
+async function fetchPlayerJournal() {
+  const playerId = route.query.playerId?.toString();
+
+  if (!apiStore.client || !playerId) return null;
+
+  try {
+    const response = await apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
+      params: {
+        playerId: playerId,
+        dateScope: '30d'
+      }
+    });
+
+    playerJournal.value = response.data;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return null;
+}
 </script>
 
 <style lang="scss" scoped>

src/views/PlayerProfileView.vue

@@ -9,7 +9,7 @@
 
       <div class="profile-side">
         <ProfileRecentStats :playerInfo="playerInfo" />
-        <ProfileHistoryList :playerJournal="playerJournal" :playerName="playerName" />
+        <ProfileHistoryList  :playerName="playerName" />
       </div>
     </div>
 
@@ -49,7 +49,6 @@ const route = useRoute();
 const playerName = ref('');
 
 const playerInfo = ref<API.PlayerInfo.Data | null>(null);
-const playerJournal = ref<API.PlayerJournal.Data | null>(null);
 const playerTD2Info = ref<Td2API.UsersInfoByName.UserInfo | null>(null);
 const playerDataStatus = ref(Status.Data.Initialized);
 
@@ -93,11 +92,10 @@ async function fetchAllData() {
   }
 
   const playerTd2InfoResponse = await fetchPlayerTD2Info(playerName.value);
-  const playerJournalResponse = await fetchPlayerJournal(playerId);
 
   playerInfo.value = playerInfoResponse;
   playerTD2Info.value = playerTd2InfoResponse;
-  playerJournal.value = playerJournalResponse;
+  // playerJournal.value = playerJournalResponse;
 
   playerDataStatus.value = Status.Data.Loaded;
 }
@@ -120,25 +118,6 @@ async function fetchPlayerInfoData(playerId: string) {
   return null;
 }
 
-async function fetchPlayerJournal(playerId: string) {
-  if (!apiStore.client || !playerId) return null;
-
-  try {
-    const response = await apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
-      params: {
-        playerId: playerId,
-        dateScope: '30d'
-      }
-    });
-
-    return response.data;
-  } catch (error) {
-    console.error(error);
-  }
-
-  return null;
-}
-
 async function fetchPlayerTD2Info(playerName: string) {
   if (!apiStore.client || !playerName) return null;