refactor: move response wrapping func to utils

See: BEDS-481

frontend/components/dashboard/table/DashboardTableRewards.vue

@@ -137,19 +137,6 @@ const findNextEpochDuties = (epoch: number) => {
 
   return list.join(', ')
 }
-
-const wrappedRewards = computed(() => {
-  if (!rewards.value) {
-    return
-  }
-  return {
-    data: rewards.value.data.map(d => ({
-      ...d,
-      identifier: `${d.epoch}-${d.group_id}`,
-    })),
-    paging: rewards.value.paging,
-  }
-})
 </script>
 
 <template>
@@ -168,8 +155,11 @@ const wrappedRewards = computed(() => {
       <template #table>
         <ClientOnly fallback-tag="span">
           <BcTable
-            :data="wrappedRewards"
-            data-key="identifier"
+            :data="wrapWithIdentifier(
+              rewards,
+              row => `${row.epoch}-${row.group_id}`,
+            )"
+            data-key="wrapped_identifier"
             :expandable="true"
             class="rewards-table"
             :cursor

frontend/utils/wrapWithIdentifier.ts

@@ -0,0 +1,19 @@
+import type { ApiPagingResponse } from '~/types/api/common'
+/**
+ * This function wraps each element in an `ApiPagingResponse` interface with a unique id field `wrapped_identifier`.
+ * @param response The api response to wrap
+ * @param getIdFromRow A function that takes a row and builds a unique identifier
+ * @returns The wrapped response
+ */
+export function wrapWithIdentifier<T>(response: ApiPagingResponse<T> | undefined, getIdFromRow: (row: T) => string) {
+  if (!response) {
+    return
+  }
+  return {
+    data: response.data.map(row => ({
+      ...row,
+      wrapped_identifier: getIdFromRow(row),
+    })),
+    paging: response.paging,
+  }
+}