react
Technical notes on web development, DevOps, and AI integration.
48 articles
- 19:55testing
When the Test Reads Its Own Source Code
Vitest refuses to render components under Vite 8? Make the source files the test data: lock the rating flag invariant with toContain.
TL;DR: Vitest could not transform JSX after Vite 8 moved to rolldown and oxc without a React plugin, breaking the entity card render test. Instead the author added a text tripwire that reads source files and asserts rating_enabled !== false on six surfaces. It checks code shape not runtime, so integration tests verify the flag gates display without leaking rating data.
#vitest#testing#react - 18:03frontend
When Ratings Are Off, Hiding the Badge Is Not Enough
Switching the rating flag off is not enough while card badges and aggregateRating markup still ship. My notes on sweeping every surface clean.
TL;DR: Switching off ratings hid the detail page section but cards and JSON-LD still showed the old score from cached property data. That mismatch between what users see and what crawlers read risks spam penalties. Now the rating_enabled flag gates both the UI badge and the structured data so everything disappears together.
#react#seo#feature-flags - 17:10backend
The Checkbox That Silently Killed a Feature in a Go Backend
An unchecked checkbox sends nothing, and a Go backend reads that silence as false. Lessons from a silent admin-form bug.
TL;DR: Leaving checkboxes unchecked sent nothing, which the backend misread as disabling the features. In Go, a missing boolean unmarshals to false, so absent was treated as off and omitempty hid the problem. The fix was to always send explicit true or false and use null versus absent for nullable fields.
#go#json#react - 12:25frontend
Labels That Can Lie: When Status Vocabulary Lives in Two Places
A duplicated STATUS_MAP on the public page now reads labels from one lib: exhaustive types, an honest fallback for unknown values, countKey enforced.
TL;DR: The public status page broke because it kept its own four item map while the backend and shared lib handle six statuses. The fix makes STATUS_LABEL in layanan-flow the single source of truth, with TypeScript enforcing completeness and a runtime fallback to neutral raw text. CountKey is now required, so future status additions propagate automatically without silent display bugs.
#react#typescript#ui - 12:25frontend
Per-Status Counters in Admin Stats: Numbers From the Contract
Per-status snapshot counters joined AdminLayananStats additively; legacy fields kept, UI derives numbers from stats, no more meta.total tricks.
TL;DR: The dashboard showed dashes because the stats API only counted two of six statuses, leaving legacy fields at zero. The fix kept the old fields and added six current snapshot counters, with regenerated types now requiring a count for every tab and card. Counts respect user scope, and the queue badge now reads the submission counter directly with lightweight polling.
#go#api#openapi - 11:23frontend
An Honest Ticket Status Stepper: Learning from the History Array
The ticket stepper stops guessing from one status string: stage times come from the transition history, first row per status.
TL;DR: The stepper used to guess progress from one status string, now it maps real timestamps from the history array and falls back to created and updated times. Four display stages replace six cluttered steps, grouping terminal statuses while safely handling invalid dates and listing history in order. Transformations run during render, and const literal types prevent invalid pillar submissions.
#react#typescript#ux - 09:29frontend
The Tri-State Trap in React Category Pickers
A dropdown that is right for create is wrong for edit. A tri-state moduleScope makes the fetch wait for the entity to load.
TL;DR: Editing showed PARIWISATA categories instead of KEPEMUDAAN because the picker fetched before the module loaded and fell back to the default. The fix makes moduleScope tri-state and waits until it resolves before calling listAdminCategories via useEffect. The team also synced the OpenAPI spec, generated types, and frontend module list to prevent enum drift.
#react#typescript#openapi - 09:04frontend
Hiding Sidebar Links Is UX, Not Authorization
Hiding a sidebar item is a UX decision, not an authorization boundary. Layout checks go stale; the API must fail closed.
TL;DR: Hiding sidebar links isn't security since Next.js layouts don't recheck auth on navigation and typed URLs can bypass the UI. The fix belongs at the API layer, where the backend validates scopes and returns an empty list instead of a 403 to avoid leaking modules. Frontend caching keeps it efficient while tests ensure restricted URLs just show empty tables.
#nextjs#react#go - 08:16backend
The One Forgotten Line: How a DTO Mapper Crashed the Frontend
A field existed on the entity but never made it into the response mapper: the API answered with an empty string and the edit page crashed. One line plus a regression test closed it.
TL;DR: Saving announcements crashed because the backend mapper forgot to copy Status, sending an empty string that broke the frontend badge lookup. The fix added the missing field, added a regression test, and made the UI whitelist statuses to default to draft. Navigation was also switched to router push and refresh to keep toast feedback without a full reload.
#golang#react#typescript