# SettingPage

A container component that simplifies the process of displaying and editing a section of application settings. It leverages the `EditableSettingsList` component to handle the rendering and editing of individual settings within that section. `SettingPage` fetches the relevant settings data for a given `sectionName` using a custom hook and manages the submission of changes.

This component acts as a higher-level abstraction, taking care of data fetching and preparing the necessary props for `EditableSettingsList`. It utilizes the `SettingsContext` to access the settings API endpoint and the `useSettingSection` hook to retrieve and handle the settings for a specific section.

## Basic Usage

Import the component and provide the `sectionName` to identify the settings section you want to display and manage.

```jsx
const GeneralSettingsPage = () => {
  return (
    <div>
      <h2>General Application Settings</h2>
      <SettingPage sectionName="general" />
    </div>
  );
};
```

In this example, `SettingPage` will fetch the settings associated with the "general" section and render them in an editable list using `EditableSettingsList`.

You can also customize the editing capabilities, internationalization keys, and labels.

```jsx
const AdvancedSettingsPage = () => {
  return (
    <div>
      <h2>Advanced Configuration</h2>
      <SettingPage
        sectionName="advanced"
        allowEdit={false} // Disable editing for this section
        intlKey="advancedSettings"
        intlNS="myApp"
        labelOverrides={{
          'timeoutDuration': 'Session Timeout (in seconds)'
        }}
        render={({ fields: { name }, index }) => (
          <div key={index}>
            {/* Custom rendering for each setting field */}
            <label htmlFor={`${name}[${index}].value`}>{name}</label>
            <input type="text" id={`${name}[${index}].value`} {...fields.field(`${name}[${index}]`, 'value')} />
          </div>
        )}
      />
    </div>
  );
};
```

**Note:**
* This component relies on the `SettingsContext` being available in the component tree to access the `settingEndpoint`.
* It also depends on the `useSettingSection` custom hook to handle data fetching and submission logic for the specified `sectionName`.
* The `render` prop allows for complete customization of how the individual settings are rendered within the `EditableSettingsList`.

## Props

| Name             | Type      | Description                                                                                                                                                                                                                                                                                                                                                       | default     | required |
|------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|----------|
| `allowEdit`      | `boolean` | A flag to globally enable or disable editing for all settings within this section. This prop is passed directly to the underlying `EditableSettingsList` component.                                                                                                                                                                                               | `true`      | ✕        |
| `intlKey`        | `string`  | A base internationalization key to be used for generating labels within the `EditableSettingsList` and its child components. If provided, it's passed down to `EditableSettingsList`.                                                                                                                                                                             | `undefined` | ✕        |
| `intlNS`         | `string`  | An internationalization namespace used for resolving labels within the `EditableSettingsList` and its child components. If provided, it's passed down to `EditableSettingsList`.                                                                                                                                                                                  | `undefined` | ✕        |
| `labelOverrides` | `object`  | An object containing key-value pairs where the keys are setting identifiers (e.g., `setting.key`) and the values are custom labels to override the default labels generated by `EditableSettingsList`. This prop is passed directly to `EditableSettingsList`.                                                                                                    | `{}`        | ✕        |
| `sectionName`    | `string`  | The unique name of the settings section to be displayed and managed. This prop is crucial as it's used by the `useSettingSection` hook to fetch the relevant settings data from the API.                                                                                                                                                                          | `undefined` | ✓        |
| `render`         | `func`    | A render prop that receives the `fields` object from `react-final-form-arrays` (within `EditableSettingsList`) and allows for complete custom rendering of each setting row. This prop is passed directly to `EditableSettingsList`. See the `EditableSettingsList` documentation for more details on the props passed to this render function and how to use it. | `undefined` | ✕        |