# Guides

Guides to adding common functionality to an application.

## Adding a New Page

1. Create the page component (in the `Components/Pages` directory).
2. Define pageinfo for the page.
3. Run the `collect-pages` command from this package (`npx @hex-insights/generator collect-pages`) to update the `all-pages` file for page discovery.

## Adding Frontend-Only Computed Fields

Frontend-only computed fields are generally rare as it's usually helpful to define the computed field on the backend for a more uniform experience. However, a computed field that is only used in a create form cannot be defined on the backend. Computed fields that only help with forms (both create and update) may also fall under this category, but consider whether that field might be useful in contexts other than forms. A frontend-only computed field may also be desired for quick testing without having to update the server.

1. Add the field to the form values type.

2. Add the field to the `initialCreate` object (in the form values file), if included in create forms.

3. Add the field to the `toFormValues` function (in the form conversion file), if included in detail forms.

4. Omit the key from the form values in the `toGQLCreateInput` and `toGQLUpdateInput` functions (in the form conversion file), depending on in which forms the field is included.

   ```typescript
   export function toGQLCreateInput(formValues: ModelFormValues.Create): ModelCreateInput {
       const inputFormValues = omitKeys(formValues, ["computedField"]);
       const input: NullPartial<ModelCreateInput> = { ...inputFormValues };
       return input as ModelCreateInput;
   }
   ```

5. Add a field component (in the `Field.tsx` file) for the field.

6. Add the field component to the relevant form components (in the `Form.tsx` file).

## Adding StandardFilters for a Model

1. Fill out the `StandardFilterFormValues` type and populate the `initialStandardFilters` object accordingly (both in the filter form values file).
2. Create a `<StandardFilters>` component (in the filter forms file) and pass the component as a prop to the `<ModelIndices.FilterForm>` component.
3. Update filter form utility functions (in the filter form utils file): `countActiveFilters`, `resetFilters`, and, if necessary, `toWhereInput`.
   - Updating `toWhereInput` is only required if the field name (the key in `StandardFilterFormValues`) is not exactly a field on the model's GraphQL filter input. This may be the case if the form field corresponds to a nested filter object/field (e.g. a property of a related model) or represents multiple input fields (e.g. a date range from a single date field).