ItsyUI E2E CRA Template

E2E template provides an initial starter template with all relevant configurations and routes. It uses the JSON metadata to generate required UI, and it can be used to build applications with regular React based components as well. With this example, it also shows the way State Transitions are implemented and used at an application state and how it can be used from other components of the page.

Use the below command to provision an app with itsyui-e2e template,

npx create-react-app my-app --template itsyui-e2e

Application Structure

An app using ItsyUI framework requires the following components,

  • Schema - Metadata driven UI using JSON files.
    • Pages - JSON construct to configure different UI components and page bindings that work with the UI components. This is present under the schema folder.
  • Commands - These are business logic functions that are executed from anywhere in the UI, and provides an abstraction to act as triggers or initialization of GUI using the command pattern.
  • Datasource - All data-bound UI components use datasource as abstractions to perform query and CRUD operations. There are many datasources available by default in ItsyUI framework and could also be used to build new ones.
  • Handlers - UI component overrides that can be done here and register to the main one.

Application State

E2E template defines application state in Main.tsx. Application state is both the reducer state and StateJSON. The important state transitions are,

  • NAVIGATE_URL: Allows to navigate to any route based on history
  • AUTH_COMPLETE: Entry point to initialize state after login

Main.tsx component implements logic to check if the user is authenticated, and loads the routes accordingly.

Main.tsx and routes

Main.tsx contains application-level state and defines Public and Private routes to render according to user authentication.

Use this widget to extend application state that is required according to the requirements.

  • Public Routes: All unauthenticated routes or pages need to be added here.
  • Private Routes: All authenticated routes or pages need to be added here.

Main.tsx uses the application state for checking user authentication state, and based on that renders the routes.

Application State

  • User Authenticated - Checks if user is authenticated or not and loads the specific public or private routes.
  • Navigate URL - This allows to navigate to designated routes as per defined routes.
  • Show Progress - Uses the ItsyUI feedback package to show progress if there is a long running background task.
  • Show Modal - Uses the ItsyUI navigation package to show Modal popup for any user input or updates to show or hide.

Login Handler

Custom login UI is defined in this e2e template, and its form submit state is handled in handlers/loginFormHandler.ts.

The core function override, authenticates without doing any API call. Use this override to call custom login API calls.

function doLoginFormSubmit(event: any) {
    return async (getState: any, dispatch: any, transition: any) => {
        try {
            //Handle authorization
            const userInfo = event.values;
            sessionStorage.setItem("user", JSON.stringify(userInfo));

            transition({
                type: "FORM_AFTER_SUBMIT",
            });
            transition({
                type: "USER_AUTHENTICATED",
                isAuthenticated: true,
            });
        } catch (e) {
            console.error(e);
        }
    };
}