wired up sort model changes

app/src/contexts/observationsTableContext.tsx

@@ -3,6 +3,7 @@ import {
   GridPaginationModel,
   GridRowId,
   GridRowSelectionModel,
+  GridSortModel,
   GridValidRowModel,
   useGridApiRef
 } from '@mui/x-data-grid';
@@ -14,6 +15,7 @@ import { default as dayjs } from 'dayjs';
 import { APIError } from 'hooks/api/useAxios';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { createContext, PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { firstOrNull } from 'utils/Utils';
 import { v4 as uuidv4 } from 'uuid';
 import { RowValidationError, TableValidationModel } from '../components/data-grid/DataGridValidationAlert';
 import { SurveyContext } from './surveyContext';
@@ -149,6 +151,8 @@ export type IObservationsTableContext = {
 
   updatePaginationModel: (model: GridPaginationModel) => void;
   paginationModel: GridPaginationModel;
+  updateSortModel: (mode: GridSortModel) => void;
+  sortModel: GridSortModel;
 };
 
 export const ObservationsTableContext = createContext<IObservationsTableContext>({
@@ -173,7 +177,9 @@ export const ObservationsTableContext = createContext<IObservationsTableContext>
   observationCount: 0,
   setObservationCount: () => undefined,
   updatePaginationModel: () => undefined,
-  paginationModel: { page: 0, pageSize: 0 }
+  paginationModel: { page: 0, pageSize: 0 },
+  updateSortModel: () => undefined,
+  sortModel: []
 });
 
 export const ObservationsTableContextProvider = (props: PropsWithChildren<Record<never, any>>) => {
@@ -213,16 +219,37 @@ export const ObservationsTableContextProvider = (props: PropsWithChildren<Record
     page: 0,
     pageSize: 10
   });
-  // const [sortModel, setSortModel] = useState<GridSortModel>([]);
+  const [sortModel, setSortModel] = useState<GridSortModel>([]);
 
   const updatePaginationModel = (model: GridPaginationModel) => {
     setPaginationModel(model);
   };
 
+  const updateSortModel = (model: GridSortModel) => {
+    console.log("Updating Sort Model")
+    setSortModel(model);
+  };
+
+  // initial load with pagination values
   useEffect(() => {
-    observationsContext.observationsDataLoader.refresh({ page: 1, limit: 10 });
+    observationsContext.observationsDataLoader.refresh({
+      page: paginationModel.page + 1, // +1 to correct an off by one error with pagination
+      limit: paginationModel.pageSize
+    });
   }, []);
 
+  // Fetch new rows based on sort/ pagination model changes
+  useEffect(() => {
+    console.log("Models have changed")
+    const sort = firstOrNull(sortModel);
+    observationsContext.observationsDataLoader.refresh({
+      page: paginationModel.page + 1, // +1 to correct an off by one error with pagination
+      limit: paginationModel.pageSize,
+      sort: sort?.field || undefined,
+      order: sort?.sort || undefined
+    });
+  }, [paginationModel, sortModel]);
+
   /**
    * Gets all rows from the table, including values that have been edited in the table.
    */
@@ -735,7 +762,9 @@ export const ObservationsTableContextProvider = (props: PropsWithChildren<Record
       observationCount,
       setObservationCount,
       updatePaginationModel,
-      paginationModel
+      paginationModel,
+      updateSortModel,
+      sortModel
     }),
     [
       _muiDataGridApiRef,
@@ -754,7 +783,9 @@ export const ObservationsTableContextProvider = (props: PropsWithChildren<Record
       isSaving,
       observationCount,
       updatePaginationModel,
-      paginationModel
+      paginationModel,
+      updateSortModel,
+      sortModel
     ]
   );
 

app/src/features/surveys/observations/observations-table/ObservationsTable.tsx

@@ -3,7 +3,7 @@ import Icon from '@mdi/react';
 import { cyan, grey } from '@mui/material/colors';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { DataGrid, GridCellParams, GridColDef, GridSortModel } from '@mui/x-data-grid';
+import { DataGrid, GridCellParams, GridColDef } from '@mui/x-data-grid';
 import AutocompleteDataGridEditCell from 'components/data-grid/autocomplete/AutocompleteDataGridEditCell';
 import AutocompleteDataGridViewCell from 'components/data-grid/autocomplete/AutocompleteDataGridViewCell';
 import ConditionalAutocompleteDataGridEditCell from 'components/data-grid/conditional-autocomplete/ConditionalAutocompleteDataGridEditCell';
@@ -25,7 +25,7 @@ import {
   IGetSamplePeriodRecord
 } from 'interfaces/useSurveyApi.interface';
 import { has } from 'lodash-es';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router';
 import { getCodesName, getFormattedDate } from 'utils/Utils';
 
@@ -57,8 +57,6 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => {
   const codesContext = useContext(CodesContext);
   const hasLoadedCodes = Boolean(codesContext.codesDataLoader.data);
 
-  const [sortModel, setSortModel] = useState<GridSortModel>([]);
-
   const apiRef = observationsTableContext._muiDataGridApiRef;
 
   const hasError = useCallback(
@@ -542,14 +540,12 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => {
         rows={observationsTableContext.rows}
         rowCount={observationsTableContext.observationCount}
         paginationModel={observationsTableContext.paginationModel}
-        pageSizeOptions={[10]}
-        onPaginationModelChange={(model) => {
-          observationsTableContext.updatePaginationModel(model);
-        }}
+        pageSizeOptions={[10, 15, 20]}
+        onPaginationModelChange={(model) => observationsTableContext.updatePaginationModel(model)}
         paginationMode="server"
         sortingMode="server"
-        sortModel={sortModel}
-        onSortModelChange={(model) => setSortModel(model)}
+        sortModel={observationsTableContext.sortModel}
+        onSortModelChange={(model) => observationsTableContext.updateSortModel(model)}
         onRowEditStart={(params) => observationsTableContext.onRowEditStart(params.id)}
         onRowEditStop={(_params, event) => {
           event.defaultMuiPrevented = true;

app/src/utils/Utils.tsx

@@ -498,3 +498,11 @@ export const setMessageSnackbar = (message: string, context: IDialogContext) =>
     )
   });
 };
+
+/**
+ * This will grab the first element from an array or return null if nothing is found
+ *
+ * @param arr array to check
+ * @returns T
+ */
+export const firstOrNull = <T,>(arr: T[]): T | null => (arr.length > 0 ? arr[0] : null);