Contact Application
Relevant source files
The following files were used as context for generating this wiki page:
The Contact Application is a functional module within the portfolio ecosystem designed to facilitate communication between users and the developer. It provides a structured interface for sending messages, currently operating as a demonstration feature within the macOS-style desktop environment.
The application is integrated into the system via the appRegistry.tsx and uses a centralized state machine to manage form submission lifecycles. It supports multi-language support (i18n) and provides alternative contact methods through social links and direct email.
Sources: features/contact/components/ContactApp.tsx, features/desktop/components/appRegistry.tsx:7, messages/en.json:44-52
Component Architecture
The application is built using a decoupled architecture that separates UI presentation, form logic, and state management.
ContactApp (UI Layer)
The primary entry point is the ContactApp component. It renders a form using shadcn/ui components including Input, Label, Textarea, and Button. It also displays static contact information derived from the project configuration.
Sources: features/contact/components/ContactApp.tsx:9-12
useContactForm (Logic Layer)
A custom hook that bridges the UI and the state reducer. It handles the onSubmit event, manages asynchronous submission simulations, and exposes the current status and reset functionality.
Sources: features/contact/hooks/useContactForm.ts:6-21
contactReducer (State Layer)
A pure function that manages the transition between form states: idle, submitting, success, and error.
Sources: workflows/contactForm.ts:16-32
Data Flow and State Management
The form follows a strict state machine pattern to ensure predictable UI behavior during the submission process.
This diagram illustrates the finite state transitions managed by the contactReducer.
Sources: workflows/contactForm.ts:18-31
Submission Lifecycle
When a user submits the form, the following sequence occurs:
- The
submithandler prevents the default form action. - A
submitaction is dispatched, setting the status tosubmitting. - The UI disables the submit button to prevent double-submission.
- A simulated delay (700ms) occurs to mimic a network request.
- A
resolveaction is dispatched, setting the status tosuccess.
The sequence of operations during a standard form submission.
Sources: features/contact/hooks/useContactForm.ts:9-16, features/contact/components/ContactApp.tsx:34-36
Configuration and i18n
The application utilizes centralized configuration for contact details and localized strings for all UI text.
Contact Metadata
Static contact information is imported from a central content library.
| Parameter | Source | Value/Type |
|---|---|---|
contactEmail | lib/content.ts | "you@example.com" |
socials | lib/content.ts | Array of SocialLink objects |
Sources: lib/content.ts:40-45
Internationalization (i18n)
The ContactApp uses the next-intl library to fetch translations based on the "contact" namespace.
| Key | English Translation | Persian (fa) Translation |
|---|---|---|
title | Get in touch | در تماس باشید |
name | Name | نام |
email | ایمیل | |
message | Message | پیام |
send | Send | ارسال |
success | Thanks — this is a demo... | ممنون — این فرم نمایشی... |
Sources: messages/en.json:44-52, messages/fa.json:44-52
Technical Implementation Details
State Schema
The form state is represented by the ContactState interface.
// workflows/contactForm.ts
export type ContactStatus = "idle" | "submitting" | "success" | "error";
export interface ContactState {
status: ContactStatus;
}
Sources: workflows/contactForm.ts:1-5
Action Types
The reducer responds to four specific action types:
submit: Initiates the submission process.resolve: Marks the submission as completed successfully.reject: Sets the state to an error state.reset: Returns the form to the initialidlestatus.
Sources: workflows/contactForm.ts:9-14
Testing
The contact form logic is verified using Vitest, ensuring that state transitions occur correctly under different scenarios (e.g., successful submission, rejection, and manual reset).
Sources: workflows/contactForm.test.ts:7-27
Conclusion
The Contact Application serves as a robust example of state-driven UI within the portfolio. By utilizing a reducer for state management and hooks for logic encapsulation, it maintains a clean separation of concerns while providing a localized, user-friendly interface for visitor inquiries.