Refactor useExtendedHistory composable

client/src/components/History/Multiple/MultipleViewItem.vue

@@ -3,7 +3,7 @@ import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
-import { useDetailedHistory } from "@/composables/detailedHistory";
+import { useExtendedHistory } from "@/composables/detailedHistory";
 import { useHistoryStore } from "@/stores/historyStore";
 
 import CollectionPanel from "@/components/History/CurrentCollection/CollectionPanel.vue";
@@ -22,7 +22,7 @@ const props = defineProps<Props>();
 const historyStore = useHistoryStore();
 const { currentHistoryId, pinnedHistories } = storeToRefs(historyStore);
 
-const { detailedHistory: history } = useDetailedHistory(props.source.id);
+const { history } = useExtendedHistory(props.source.id);
 
 const selectedCollections = ref<any[]>([]);
 

client/src/composables/detailedHistory.ts

@@ -1,18 +1,32 @@
-import { onMounted, ref } from "vue";
+/**
+ * This module provides composable functions for working with different types (views) of history objects.
+ * Containing different amounts of required information about a history object depending on the use case.
+ */
+import { computed, onMounted } from "vue";
 
 import { type HistorySummaryExtended } from "@/api";
 import { useHistoryStore } from "@/stores/historyStore";
 
-export function useDetailedHistory(historyId: string) {
+/**
+ * Provides the extended details for a history.
+ * This composable should be used when the extended details are required.
+ * The extended details usually include the size of the history and the number of active, deleted, and hidden items.
+ * @param historyId The id of the history to get the extended details for.
+ */
+export function useExtendedHistory(historyId: string) {
     const historyStore = useHistoryStore();
 
     onMounted(async () => {
-        detailedHistory.value = await historyStore.loadHistoryById(historyId);
+        // Make sure the history is loaded with the extended details
+        // as it may not have been loaded yet or may not have the extended details.
+        await historyStore.loadHistoryById(historyId);
     });
 
-    const detailedHistory = ref<HistorySummaryExtended>();
+    const history = computed<HistorySummaryExtended>(
+        () => historyStore.getHistoryById(historyId) as HistorySummaryExtended
+    );
 
     return {
-        detailedHistory,
+        history,
     };
 }