feat: add tanstack query to gather record information

Author: david-roper

apps/web/src/hooks/useInstrumentRecordExportQuery.ts

@@ -0,0 +1,16 @@
+import type { InstrumentRecordsExport } from '@opendatacapture/schemas/instrument-records';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export const useInstrumentRecordsExportQuery = (groupId?: string) => {
+  return useQuery({
+    queryKey: ['instrument-records-export', groupId],
+    enabled: !!groupId,
+    queryFn: async () => {
+      const { data } = await axios.get<InstrumentRecordsExport>('/v1/instrument-records/export', {
+        params: { groupId }
+      });
+      return data;
+    }
+  });
+};

apps/web/src/routes/_app/dashboard.tsx

@@ -14,6 +14,9 @@ import { useInstrumentInfoQuery } from '@/hooks/useInstrumentInfoQuery';
 import { summaryQueryOptions, useSummaryQuery } from '@/hooks/useSummaryQuery';
 import { useAppStore } from '@/store';
 import { useUsersQuery } from '@/hooks/useUsersQuery';
+import type { InstrumentRecordsExport } from '@opendatacapture/schemas/instrument-records';
+import axios from 'axios';
+import { useInstrumentRecordsExportQuery } from '@/hooks/useInstrumentRecordExportQuery';
 
 const RouteComponent = () => {
   const changeGroup = useAppStore((store) => store.changeGroup);
@@ -28,6 +31,13 @@ const RouteComponent = () => {
   const instrumentInfoQuery = useInstrumentInfoQuery();
   const userInfoQuery = useUsersQuery();
 
+  const recordsExportQuery = useInstrumentRecordsExportQuery(currentGroup?.id);
+
+  const recordsData =
+    recordsExportQuery.data?.map((record) => ({
+      title: record.instrumentName
+    })) ?? [];
+
   const chartColors = {
     records: {
       fill: theme === 'dark' ? 'rgba(59, 130, 246, 0.1)' : 'rgba(37, 99, 235, 0.1)',