Use useEffect to trigger fetch in useSamplesTable

[nozomione]

Context

In the useSamplesTable hook, we have specific methods responsible for updating individual properties of the samplesTable query context state, including page number, page size, sorting, and filtering.

These methods align with the react-table package and are utilized in the SamplesTable component to manage table data updates, such as triggering sorting and filtering.

Each method updates its corresponding property based on user selection and calls another method, updateSamplesTableQuery. This method is responsible for both applying a new query change to the samplesTable state and making the API call using that updated samplesTable.

The samplesTable query context state:

const [samplesTable, setSamplesTable] = useState({
   // this state stores necessary query to make API calls
   // to the 'samples' endpoint for fetching the samples table data
})

The default table configuration for the SamplesTable component is stored in the config context state defined in SamplesTableContext. This state includes defaultColumn and minColumns that are passed to the react-table instance.

The config context state:

const [config, setConfig] = useState({
    commonQueries,
    // the default column size
    defaultColumn: useMemo(
      () => ({ minWidth: 60, width: 160, maxWidth: 250 }),
      []
    ),
    // the default number of columns to display
    minColumns: 5,
    page,
    pageSize: pageSizes[0]
})

Problem or idea

In this PR, we want to refactor how we trigger API calls by using the useEffect hook. This change will move the data fetching logic from updateSamplesTableQuery to useEffect and decouple it from the logic that updates the SamplesTable state.

Additionally, we want to optimize the config object defined in SamplesTableContext by co-locating the default settings for react-table within the SamplesTable component.

Solution or next step

1. Use a useEffect hook to monitor changes to the query parameters and trigger the API call with getSamplesTableData whenever any of the samplesTable query parameters change.
2. Delete getSamplesTableData from updateSamplesTableQuery
3. Move the react-table related settings, defaultColumns and minColumns to the SamplesTable component for co-locality