# useSettingSection

A custom React hook designed for fetching and updating settings data from an API. It leverages `react-query` for robust asynchronous data management and provides flexible control over query and mutation keys.

## Overview

`useSettingSection` simplifies interaction with a settings API by:

* **Fetching Settings:** It retrieves settings for a specific `sectionName`, automatically filtering and sorting the results. Data is cached and managed efficiently by `react-query`.
* **Updating Settings:** It provides a mutation handler (`handleSubmit`) to send updates for individual settings, performing an HTTP PUT request to your specified endpoint.
* **Flexible Key Generation:** Offers optional functions to customize the `react-query` keys for both data fetching and mutations, allowing for fine-grained cache control and query invalidation.

## Basic Usage

```jsx
const SettingsEditor = ({ sectionName, settingEndpoint }) => {
  const { settings, handleSubmit } = useSettingSection({
    sectionName,
    settingEndpoint
  });

  // Render the settings and handle updates with handleSubmit
  return (
    <div>
      {settings.map(setting => (
        <div key={setting.id}>
          <span>{setting.key}</span>
          {/* Some UI to edit the setting */}
          <button onClick={() => handleSubmit({ ...setting, value: 'new value' })}>
            Save
          </button>
        </div>
      ))}
    </div>
  );
};
```

## Parameters

| Name                           | Type       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Required | Default Value                                                                                                                                                                                                                                                           |
| :----------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sectionName`                  | `string`   | The name of the settings section to fetch. This is used in the `generateKiwtQueryParams` call to filter settings by their `section` property.                                                                                                                                                                                                                                                                                                                      | ✓        | None                                                                                                                                                                                                                                                                |
| `settingEndpoint`              | `string`   | The base URL endpoint for the settings API (e.g., `/settings-storage/settings`). The hook appends query parameters for fetching and, in the case of an update, the setting's ID for PUT requests.                                                                                                                                                                                                                                                                 | ✓        | None                                                                                                                                                                                                                                                                |
| `getQueryNamespaceGenerator`   | `function` | An optional function that generates the `react-query` key for the settings query. It receives an object `{ queryParams }` as an argument, where `queryParams` is the array of generated Kiwt query parameters. **Customize this for specific caching behaviors or if you need to append additional identifiers to your query key.** | ✕        | `({ queryParams }) => ['stripes-kint-components', 'useSetting', 'appSettings', queryParams, sectionName]`                                                                                                                                                           |
| `getMutateNamespaceGenerator`  | `function` | An optional function that generates the `react-query` key for the mutation. **Customize this if you need a specific key for your mutation, for example, to differentiate it from other mutations or target specific invalidations.** | ✕        | `() => ['stripes-kint-components', 'useSetting', 'putSetting', sectionName]`                                                                                                                                                                                          |

## Returns

An object containing:

* **`settings`** (`array`): The array of settings retrieved from the API. Defaults to an empty array if the query has not completed or returns no data.
* **`handleSubmit`** (`function`): A `react-query` mutation function (`mutateAsync`) that accepts a settings data object (e.g., `{ id: 'uuid', key: 'mySetting', value: 'newValue' }`) and performs an HTTP PUT request to update the setting.
* **`settingsQuery`** (`object`): The `react-query` result object from the `useQuery` hook. This provides detailed query status (e.g., `isLoading`, `isFetching`, `isError`, `data`, `error`).
* **`settingsMutate`** (`object`): The `react-query` result object from the `useMutation` hook. This provides detailed mutation status (e.g., `isLoading`, `isError`, `isSuccess`, `data`, `error`).