Skip to content

diagram.md

Latest commit

 

History

History
158 lines (137 loc) · 3.81 KB

diagram.md

File metadata and controls

158 lines (137 loc) · 3.81 KB

Application Architecture Diagrams

Context and State Management

graph TD
    subgraph "App Level"
        A[App.tsx] --> B[UserProvider]
        B --> C[Router]
    end

    subgraph "Context Definition"
        D[UserContext] --> E[IUserContextType]
        E --> F[users: UserData[]]
        E --> G[setUsers: function]
        E --> H[loading: boolean]
        E --> I[setLoading: function]
        E --> J[error: string | null]
        E --> K[setError: function]
    end

    subgraph "Components Using Context"
        L[SpycloudDashboard] --> M[useUserContext]
        N[SpycloudDetail] --> M
        O[UserDetailCard] --> M
    end

    subgraph "State Flow"
        P[API Calls] --> Q[setUsers]
        Q --> R[users state]
        R --> S[Components]
        T[Loading States] --> U[setLoading]
        U --> V[loading state]
        V --> S
        W[Error Handling] --> X[setError]
        X --> Y[error state]
        Y --> S
    end

    B --> D
    M --> D
    Q --> E
    U --> E
    X --> E
Loading

Component Structure

graph TD
    subgraph "Root Components"
        A[App.tsx] --> B[ThemeProvider]
        A --> C[UserProvider]
        A --> D[Router]
    end

    subgraph "Main Components"
        D --> E[SpycloudDashboard]
        D --> F[SpycloudDetail]
    end

    subgraph "Dashboard Components"
        E --> G[DataGrid]
        E --> H[SearchBox]
        E --> I[ErrorDisplay]
    end

    subgraph "Detail Components"
        F --> J[UserDetailCard]
        F --> K[LoadingComponent]
        F --> L[ErrorComponent]
    end

    subgraph "UserDetailCard Components"
        J --> M[ProfileSection]
        J --> N[SubscriptionInfo]
        J --> O[UserInfo]
        J --> P[FunFacts]
        J --> Q[AdditionalDetails]
    end

    subgraph "Context & Hooks"
        C --> R[UserContext]
        R --> S[useUserContext]
        F --> T[useUserDetail]
        F --> U[useParams]
    end

    subgraph "Data Flow"
        V[API] --> E
        V --> F
        W[UserData] --> R
        X[UserDetail] --> T
    end

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style E fill:#bbf,stroke:#333,stroke-width:2px
    style F fill:#bbf,stroke:#333,stroke-width:2px
    style J fill:#bfb,stroke:#333,stroke-width:2px
    style R fill:#fbb,stroke:#333,stroke-width:2px
Loading

Data Flow Sequence

sequenceDiagram
    participant App
    participant UserProvider
    participant Context
    participant Dashboard
    participant Detail
    participant API

    App->>UserProvider: Initialize
    UserProvider->>Context: Create Context
    Context->>Context: Initialize State
    
    Dashboard->>Context: useUserContext()
    Context->>Dashboard: Return State
    
    Dashboard->>API: Fetch Users
    API->>Dashboard: Return Data
    Dashboard->>Context: setUsers(data)
    Context->>Context: Update State
    Context->>Dashboard: Re-render
    Context->>Detail: Re-render
    
    Detail->>Context: useUserContext()
    Context->>Detail: Return State
    Detail->>API: Fetch User Details
    API->>Detail: Return Data
    Detail->>Context: setError(null)
    Context->>Context: Update State
    Context->>Detail: Re-render
Loading

Component Interaction

sequenceDiagram
    participant App
    participant Dashboard
    participant Detail
    participant UserDetailCard
    participant Context
    participant API

    App->>Dashboard: Render Dashboard
    Dashboard->>Context: useUserContext()
    Context->>Dashboard: Return State
    Dashboard->>API: Fetch Users
    API->>Dashboard: Return Data
    Dashboard->>Context: Update State

    Dashboard->>Detail: Navigate to Detail
    Detail->>Context: useUserContext()
    Context->>Detail: Return State
    Detail->>API: Fetch User Details
    API->>Detail: Return Data
    Detail->>UserDetailCard: Render with Data
    UserDetailCard->>UserDetailCard: Display User Info
Loading