Client State Management
Relevant source files
The following files were used as context for generating this wiki page:Client-side state management in the PeP Exam App is a crucial mechanism for maintaining data and context throughout the user's journey, from login to exam completion. The system is designed around a central state object, likely ExamAppState, which acts as a single source of truth for the WPF client application. This object holds transient information required for the multi-step process of authenticating, authorizing, and launching a secure exam.
The state is progressively built by interacting with the backend API. Each step, such as looking up an exam code or authorizing a teacher, fetches data from the server and stores it in the state object. Subsequent pages and services then consume this state to perform their functions, ensuring a coherent and secure workflow. This approach decouples the UI pages from each other, as they all interact with the central state rather than passing data directly.
Core State Architecture
The client's state is managed within a central class, inferred from usage as ExamAppState. This class is instantiated and held by the main application window (MainWindow) and is accessible to all pages. It stores data related to the API client, exam details, and authorization tokens.
Sources: PeP.ExamApp/Pages/ExamCodePage.xaml.cs:12, PeP.ExamApp/Pages/ExamCodePage.xaml.cs:27
ExamAppState Structure
The following diagram illustrates the inferred structure of the ExamAppState class and the key data transfer objects (DTOs) it holds. These properties are populated sequentially as the user navigates through the application.
This diagram shows the central ExamAppState holding the API client and DTOs that contain exam and session information.
Sources: PeP.ExamApp/ExamAppApiClient.cs:100, PeP.ExamApp/Pages/ExamCodePage.xaml.cs:12-16
State Properties
The properties of the ExamAppState object store critical information for the exam session.
| Property | Type | Description | Source File |
|---|---|---|---|
ApiClient | ExamAppApiClient | An instance of the API client used for all server communication. | PeP.ExamApp/Pages/ExamCodePage.xaml.cs:27 |
ExamCode | string | The exam code entered by the student. | PeP.ExamApp/Pages/ExamCodePage.xaml.cs:51 |
ExamInfo | ExamAppExamInfoDto | Detailed information about the exam, fetched using the exam code. | PeP.ExamApp/Pages/ExamCodePage.xaml.cs:52 |
AuthorizationToken | string | A short-lived token received after successful teacher authorization. Required to start the exam. | PeP.ExamApp/ExamAppApiClient.cs:81 |
LaunchToken | string | A token received after starting the exam attempt. Used to launch the secure exam environment. | PeP.ExamApp/ExamAppApiClient.cs:92 |
AttemptId | int? | The ID of the ExamAttempt or ProgrammingExamAttempt created on the server. | PeP.ExamApp/ExamAppApiClient.cs:92 |
State Management Flow
The client state is populated and utilized in a strict sequence, guiding the user through the necessary steps before an exam can begin. This flow ensures that each stage is successfully completed before the next can be initiated.
The following sequence diagram illustrates the complete flow from user login to starting the exam.
This diagram shows how user actions trigger API calls that populate the ExamAppState object, which in turn enables navigation to subsequent pages.
Sources: PeP.ExamApp/ExamAppApiClient.cs, Controllers/ExamAppController.cs, PeP.ExamApp/Pages/ExamCodePage.xaml.cs, PeP.ExamApp/Pages/TeacherAuthPage.xaml.cs, PeP.ExamApp/Pages/AntiCheatPage.xaml.cs
Step 1: Exam Code Lookup
On the ExamCodePage, the user enters an exam code. The OnLookupClick method uses the ExamAppApiClient to call the /api/exam-app/code/{code} endpoint.
- Request:
GET /api/exam-app/code/{code} - Response:
ExamCodeInfoResponse - State Update: If successful, the
ExamCodeandExamInfoproperties inExamAppStateare populated. The UI is then updated to show exam details and enable the "Continue" button.
Sources: PeP.ExamApp/Pages/ExamCodePage.xaml.cs:24-61, Controllers/ExamAppController.cs:64-74, PeP.ExamApp/ExamAppApiClient.cs:68-77
Step 2: Teacher Authorization
On the TeacherAuthPage, the application requires a teacher's password to authorize the exam session for the student.
- Request:
POST /api/exam-app/authorizewithAuthorizeRequestpayload. - Response:
AuthorizeResponsecontaining theAuthorizationToken. - State Update: The
AuthorizationTokenproperty inExamAppStateis populated. This token is essential for the final step.
Sources: PeP.ExamApp/Pages/TeacherAuthPage.xaml.cs, Controllers/ExamAppController.cs:77-89, PeP.ExamApp/ExamAppApiClient.cs:79-88
Step 3: Starting the Exam
After passing security checks on the AntiCheatPage, the user can launch the exam. This action triggers the final API call before the exam environment is loaded.
- Request:
POST /api/exam-app/startwithStartRequestpayload containing theAuthorizationToken. - Response:
StartResponsecontaining theAttemptIdandLaunchToken. - State Update: The
AttemptIdandLaunchTokenare stored in the state. The application then navigates to theExamRunnerPage.
Sources: PeP.ExamApp/Pages/AntiCheatPage.xaml.cs:68-75, Controllers/ExamAppController.cs:92-104, PeP.ExamApp/ExamAppApiClient.cs:90-101
UI and State Interaction
UI pages within the PeP.ExamApp are designed to be stateless, relying entirely on the central ExamAppState object for data and context.
Reading State
Pages access the state through the _mainWindow.State property. For example, ExamCodePage initializes its view based on the current state.
// PeP.ExamApp/Pages/ExamCodePage.xaml.cs:14-16
CodeTextBox.Text = _mainWindow.State.ExamCode ?? string.Empty;
RenderExamInfo(_mainWindow.State.ExamInfo);
ContinueButton.IsEnabled = _mainWindow.State.ExamInfo != null;
This demonstrates how the page reflects the existing state upon loading, allowing a user to resume a session.
Sources: PeP.ExamApp/Pages/ExamCodePage.xaml.cs:14-16
Updating State
State is updated exclusively through the API client methods. After a successful API call, the relevant properties are set on the state object.
// PeP.ExamApp/Pages/ExamCodePage.xaml.cs:51-52
_mainWindow.State.ExamCode = code;
_mainWindow.State.ExamInfo = result.Exam;
This pattern ensures that the state is always synchronized with the data validated and returned by the server.
Sources: PeP.ExamApp/Pages/ExamCodePage.xaml.cs:51-52
Summary
The client-side state management in PeP Exam App is a linear, progressive system centered around an ExamAppState object. This object serves as a temporary container for session-specific data, such as exam details and authorization tokens, which are fetched from the backend API in a sequential workflow. By centralizing state, the application ensures a robust and predictable user journey through the pre-exam authorization process, with each UI page reflecting the current state and contributing to its evolution until the exam is successfully launched.