Understanding the flow

How does the component get the data. The component has access to a facade, the facade has access to a state-machine and the state-machine has access to the data-access service. Let's break it down:

The system automatically generates state machines and data services for managing communication with Supabase. These two building blocks work together to simplify data handling in your Angular application, providing a structured and reactive way to perform CRUD operations and manage real-time data updates.

Key Building Blocks

1. State Machines:

• Purpose: State machines act as the main controller for managing the state of a particular entity (like "users" or "orders"). They track things like loading states, errors, the current data, and manage user actions like creating, updating, or deleting records.
• How it works: State machines provide an interface for the component layer to interact with. They expose signals and methods to manage entity data. Behind the scenes, they use a data service for communication with the Supabase database.
• Automatic Features: The generated state machines already handle common features such as:
  • Pagination
  • Filtering
  • Sorting
  • CRUD operations (Create, Read, Update, Delete)
  • Real-time data synchronization with Supabase.

2. Data Services:

• Purpose: The data service is responsible for performing the actual communication with Supabase (e.g., fetching data, updating records, deleting records).
• How it works: The data service provides methods like getItems, add, update, delete, etc. These methods are used by the state machine to interact with the Supabase database. The service handles the API calls, while the state machine manages the result, state transitions, and any error handling.
• Automatic Features: These services are automatically generated and tailored to your specific database tables, meaning you don’t need to write the communication logic manually.

Facade Pattern: The Component-Data Interaction

To keep your components clean and focused on the UI, facades are generated to act as intermediaries between components and state machines.

• Facade: The facade provides a simplified interface for components to interact with the underlying state machine. Components use facades to trigger actions (like loading data or submitting a form) and to listen for changes in state (e.g., whether data is loading, what items are currently displayed, etc.).

  The facade abstracts away the complexity of interacting directly with the state machine, offering a clean API for the components.

How Components Use State Machines

1. Component <-> Facade: Components consume the state machine indirectly through the facade. The component calls methods on the facade to trigger actions (e.g., loading a list of items, adding a new record), and subscribes to signals exposed by the facade to update the UI when the state changes.

   Example interaction:

   export class MyComponent {
     constructor(private readonly facade: ProductFacade) {}
   
     ngOnInit() {
       this.facade.loadItems(); // Load data
     }
   
     addNewItem(newItem: MyEntity) {
       this.facade.addItem(newItem); // Trigger an "add" operation
     }
   }

2. Facade <-> State Machine: The facade, in turn, interacts with the state machine, forwarding the component’s requests and exposing the state machine’s reactive signals for the component to consume. The state machine manages the internal state and delegates communication to the data service as needed.

Summary of the Flow:

• Data Service: Handles communication with Supabase (CRUD operations, real-time data).
• State Machine: Manages the application state, error handling, and CRUD logic.
• Facade: Simplifies interaction with the state machine, providing components with a clean API to trigger actions and access state.
• Component: Consumes the facade to update the UI and perform actions.

Automatically Generated

All the state machines, data services, and facades are automatically generated based on your Supabase schema and entities. This means:

• You don’t need to manually write the communication logic with Supabase.
• Your components can focus solely on displaying data and handling user interactions, with the state machine and data service handling the rest.

This system abstracts away the complexity of data management while providing a structured, reactive interface to work with your Supabase data.