Skip to content

Latest commit

 

History

History
92 lines (69 loc) · 3.03 KB

external-internal-libs.mdx

File metadata and controls

92 lines (69 loc) · 3.03 KB

External and Internal Libs

Forms

For forms we use and recommend Formik. Formik is an extremely robust and feature-packed library, in addition to using great standards that allow developers to build their components on top of Formik's base components.

Our Form component is built on top of Formik and you can use it that way:

type LoginValues = {
  email: string;
  password: string;
};

<Form<LoginValues>
  initialValues={{
    email: '',
    password: '',
  }}
  onSubmit={async (values) => {
    await login(values);
    onSuccess();
  }}
  validationSchema={schema}
  withDebugger
  >
  {() => (
    <>
      <FieldWrapper
        name="email"
        helper="Insert a valid email"
        required
        label="Email"
        as={(props) => <TextInput type="email" {...props} />}
      />
      <FieldWrapper
        name="password"
        helper="Insert a valid password"
        required
        label="Password"
        as={(props) => <TextInput type="password" {...props} />}
      />

      <Button type="submit" className="w-full">
        Log in
      </Button>
    </>
  )}
</Form>

All types of inputs are available here, feel free to modify, create new ones and invent as you like.

API Layer

Our APIs are always made with REST and we think Axios is the best library to handle this type of request. We use a strategy to configure an Axios instance and use this instance throughout the application, which allows us to have greater control and manage to handle the flow of our requests.

Our Axios configuration is available here. In this instance we set things like:

  • base URL
  • Interceptors
  • Access and Refresh token dealings

State Management

Before talking about the libraries we use, it is important to emphasize the difference between State Management and Dependency Injenction.

Dependency Injection

Usually, when your problem is to pass data from a parent component to more distant children in the tree, to not need to pass the props from child to child (Prop Drilling) the ideal is to use a Dependency Injection strategy. For this we can use:

Client Global State

However, when your problem is actually storing states and having control over how it changes over time, then a state management library is recommended please don't use Redux like:

Zustand is extremely minimalist and offers very simple strategies for state management.

Server Global State

When dealing with state that is coming from an external resource, usually an API, there is a bunch of problems that we need to take care of

  • fetching
  • caching
  • synchronizing
  • updating server state
  • and many more

There is a couple a libraries that can do this, but here we use react-query.