48 lines
1.0 KiB
Markdown
48 lines
1.0 KiB
Markdown
|
|
# Frontend Patterns (Next.js)
|
|
|
|
## Form Handling
|
|
|
|
- **RHF** (React Hook Form) for form management
|
|
- **Zod** for validation schema
|
|
- **TanStack Query** for server state
|
|
|
|
## UUID Handling
|
|
|
|
```typescript
|
|
// ✅ CORRECT - Use publicId only
|
|
interface ProjectOption {
|
|
publicId?: string;
|
|
projectName?: string;
|
|
}
|
|
|
|
// Select options
|
|
const options = contracts.map(c => ({
|
|
label: `${c.contractName} (${c.contractCode})`,
|
|
value: c.publicId!, // Use publicId, no fallback to id
|
|
}));
|
|
|
|
// ❌ WRONG - Never use these patterns
|
|
const value = c.publicId ?? c.id ?? ''; // Wrong!
|
|
const id = parseInt(projectId); // Wrong - parseInt on UUID!
|
|
```
|
|
|
|
## API Client Pattern
|
|
|
|
```typescript
|
|
// Use publicId directly in API calls
|
|
const contract = await contractService.getById(publicId);
|
|
|
|
// Form submission with UUID
|
|
const onSubmit = async (data: FormData) => {
|
|
await correspondenceService.create({
|
|
contractUuid: selectedContract.publicId!, // UUID string
|
|
// ... other fields
|
|
});
|
|
};
|
|
```
|
|
|
|
## Full Guidelines
|
|
|
|
`specs/05-Engineering-Guidelines/05-03-frontend-guidelines.md`
|