React FormSelect component and SDK

Here’s the corrected version of your text with improved grammar and clarity:

---

I think all developers understand the necessity of selecting entities. It can be as simple as choosing a gender or searching a large database table to select a few items by reference.

In the Fireback React Client, I've implemented the FormSelect and FormMultipleSelect components, which can be easily integrated with Fireback's SDK generation.

The goal is to provide a component that allows users to search (autocomplete), select single or multiple elements, and automatically save those entities to the database without any extra action. Upon refreshing the screen, the selected items should appear again.

These actions are often complex in projects, requiring a lot of extra code for each part of the front end. Additionally, backends often lack built-in support for auto-suggestions and other essential features that developers typically need.

Information Retrieved from the Backend

Every query in Fireback Go should return a few standard fields in the following format. This format remains consistent across all generated entities. For custom queries, ensure that you structure the result similarly for compatibility.

{
    "data": {
        "items": [],
        "itemsPerPage": 20,
        "startIndex": 0,
        "totalAvailableItems": 0,
        "totalItems": 0
    },
    "jsonQuery": ""
}

items is an array. It contains a list of the items. Even if queries in recursive format, would come back as an array the root elements. itemsPerPage is basically the page size, similar to SQL limit statement.

There is a large difference between totalAvailableItems and totalItems. totalAvailableItems will count the amount of items which are visible to the user without considering the filters applied to. totalItems will count the items based on the filters and conditions currently are applied. The difference will be very useful in designing the autocompletion.

FormSelect component and FormMultipleSelect

This component is a direct replacement for the traditional select tag, and in theory it's an answer to all selections across the project. This would mean it can become option radio list, autocompletion, and anything that might be needed in between.

Demo and examples

Check out live examples

function SelectingPrimitivesOnFormEffect() {
  class FormDataSample {
    user: {
      sisters?: number;
    };

    static Fields = {
      user$: "user",
      user: {
        sisters: "user.sisters",
      },
    };
  }

  const querySource = createQuerySource([
    { sisters: 1 },
    { sisters: 2 },
    { sisters: 3 },
  ]);

  return (
    <div>
      <h2>Selecting primitives with form effect</h2>
      <p>If you want to change primites directly into a form.</p>
      <Formik
        initialValues={{ user: { sisters: 2 } } as FormDataSample}
        onSubmit={(data) => {
          alert(JSON.stringify(data, null, 2));
        }}
      >
        {(form: FormikProps<Partial<FormDataSample>>) => (
          <div>
            <pre>Form: {JSON.stringify(form.values, null, 2)}</pre>
            <FormSelect
              value={form.values.user.sisters}
              label="Select how many sisters user has"
              keyExtractor={(value) => value.sisters}
              fnLabelFormat={(value) => value.sisters + " sisters!"}
              querySource={querySource}
              formEffect={{
                field: FormDataSample.Fields.user.sisters,
                form,
                beforeSet(item) {
                  return item.sisters;
                },
              }}
            />
          </div>
        )}
      </Formik>
    </div>
  );
}