products_page_sequence_diagram.md

sequenceDiagram
  participant browser as Browser
  participant node as Node.js server
  participant react as React app
  participant lb as Load balancer
  participant iam as IAM (Auth server)
  participant products as Products API
  participant units as Units API

  Note over browser,units: The user must be logged in to operate Products page

  browser->>node: HTTP GET /products
  node->>react: {path: /products}
  react->>node: HTML with skeleton content
  node->>browser: HTML response
  browser->>react: Page loaded
  react->>react: Hydration
  react->>iam: Logs in using credentials

  alt Credentials not found
    iam->>browser: Invalid credentials (redirect to /login)
  else Credentials found
    iam->>react: Successfully logged in
        
    Note over browser,units: Access for Products & Units is available for authenticated user
    react->>products: HTTP GET /api/v1/products
    products->>react: HTTP 200 OK response with Products JSON
    react->>units: HTTP GET /api/v1/units
    units->>react: HTTP 200 OK response with Units JSON
        
    react->>browser: Rerender DOM with Products table page
        
    browser->>react: A pop-up window is used to add new records to the app
    react->>browser: Rerender DOM with Add New Product pop-up
        
    browser->>react: User types new Unit in autocomplete input
    react->>browser: Rerender autocomplete input in DOM
        
    browser->>react: User clicks "Create" button for a new Unit in autocomplete input
    react->>units: HTTP POST /api/v1/unit
    units->>react: HTTP response
    react->>browser: Rerender DOM with successful or error notification
        
  end

Loading

And also let's assume that Units are in separated by domain context API, not directly related to Products.