# SASQViewComponent

A component that fetches and displays detailed data for a single item within a 3-pane layout. **SASQViewComponent** is typically used as the view pane in conjunction with **SASQLookupComponent** (for list views) via **SASQRoute**. It handles data fetching for individual records and renders content through a customizable `ViewComponent`.

## Basic Usage

**SASQViewComponent** is generally used indirectly through **SASQRoute**. Below is a minimal example showing direct usage (though typically configured via **SASQRoute**):

```jsx
import { SASQViewComponent } from '@k-int/stripes-kint-components';
import ItemDetailView from './ItemDetailView';

// In a route configuration (e.g., within a <Route> component)
const ViewPane = (routeProps) => (
  <SASQViewComponent
    fetchParameters={{
      endpoint: '/api/items', // Default endpoint for individual items
      itemEndpoint: '/api/items/details' // Optional: override for item-specific endpoint
    }}
    ViewComponent={ItemDetailView}
    {...routeProps}
  />
);
```

In this example, when navigating to a URL like `/items/123`, **SASQViewComponent**:
1. Fetches data from `/api/items/details/123` (using `itemEndpoint`)
2. Renders `ItemDetailView` with the fetched data
3. Provides a default close button to return to the list view

## Props

| Prop                        | Type                                             | Required | Description                                                                                                                                                                                                 |
|-----------------------------|--------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `fetchParameters`           | `object`                                         | ✓        | Configuration for data fetching. Requires either:<br>• `endpoint`: Base endpoint (appended with `/{id}`)<br>• `itemEndpoint`: Specific endpoint for items (override)                                       |
| `ViewComponent`             | `Component`                                      | ✓        | Component to render the item details. Receives `resource` (data), `onClose` (close handler), and `queryProps` (loading/error states).                                                                       |
| `viewQueryNamespaceGenerator` | `function`                                       | ✕        | Generates a unique query key for react-query. Default: Creates a namespace based on component ID and route params.                                                                                         |
| `id`                        | `string`                                         | ✕        | Unique identifier for the component. Used in query key generation.                                                                                                                                          |
| `path`                      | `string`                                         | ✓        | Base path for navigation (e.g., `/items`). Used with `history` to return to list view.                                                                                                                      |
| `history`                   | `object`                                         | ✓        | React Router history object (injected by parent route).                                                                                                                                                    |
| `location`                  | `object`                                         | ✓        | React Router location object (injected by parent route).                                                                                                                                                   |
| `match`                     | `object`                                         | ✓        | React Router match object containing route params (e.g., `match.params.id`).                                                                                                                               |

## Key Features

1. **Automatic Data Fetching**  
   Fetches individual item data when `match.params.id` exists. Uses either:
   ```js
   `${itemEndpoint}/${id}`  // If itemEndpoint provided
   `${endpoint}/${id}`      // If only endpoint provided
   ```

2. **Query Management**  
   Uses `react-query` for fetching, caching, and error handling. Exposes query states (`isLoading`, `isError`, etc.) via `queryProps` passed to `ViewComponent`.

3. **Close Behavior**  
   Provides a default `onClose` handler that navigates back to the parent path (e.g., from `/items/123` to `/items`).

4. **Customizable Query Keys**  
   Override `viewQueryNamespaceGenerator` to control react-query's cache key structure:
   ```jsx
   <SASQViewComponent
     viewQueryNamespaceGenerator={({ namespace, id }) => [
       namespace, 
       'custom-view', 
       id
     ]}
   />
   ```

5. **Ref Forwarding**  
   Exposes query data and status via ref:
   ```jsx
   const viewRef = useRef();
   // Access { data, isLoading, ... } via viewRef.current.queryProps
   ```

## Integration with ViewComponent

Your `ViewComponent` receives these props:

| Prop         | Type      | Description                                                                                     |
|--------------|-----------|-------------------------------------------------------------------------------------------------|
| `resource`   | `object`  | Fetched data for the item.                                                                      |
| `onClose`    | `function`| Callback to close the view pane (returns to list).                                              |
| `queryProps` | `object`  | Contains `isLoading`, `isError`, `error`, and other react-query states.                        |

Example `ViewComponent` implementation:
```jsx
const ItemDetailView = ({ resource, onClose, queryProps }) => {
  if (queryProps.isLoading) return <Spinner />;
  if (queryProps.isError) return <Error message={queryProps.error.message} />;

  return (
    <div>
      <button onClick={onClose}>Back</button>
      <h1>{resource.name}</h1>
      {/* Render other details */}
    </div>
  );
};
```

## Usage with SASQRoute

Typically used via **SASQRoute** for automatic route configuration:
```jsx
<SASQRoute
  path="/items"
  fetchParameters={{
    endpoint: '/api/items',
    SASQ_MAP: { searchKey: 'name' }
  }}
  ViewComponent={ItemDetailView}
  resultColumns={[...]}
/>
```
This automatically:
- Creates routes for `/items` (list) and `/items/:id` (detail)
- Connects the lookup and view components
- Passes fetched data to `ItemDetailView`

## Edge Cases

- **Missing ID Parameter:**  
  If `match.params.id` is undefined, no data fetching occurs and `resource` will be `undefined`.

- **Custom Endpoints:**  
  Use `itemEndpoint` when individual items require a different API path than `{endpoint}/{id}`.

- **Query Key Collisions:**  
  Override `viewQueryNamespaceGenerator` if multiple SASQViewComponents share the same ID/route.