Add skeleton loading and suspense handling to balance, norms, and advice pages#198
Conversation
🦋 Changeset detectedLatest commit: 37b80b8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## development #198 +/- ##
===============================================
+ Coverage 93.42% 94.04% +0.62%
===============================================
Files 47 85 +38
Lines 7509 12628 +5119
Branches 800 1290 +490
===============================================
+ Hits 7015 11876 +4861
- Misses 492 750 +258
Partials 2 2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
WalkthroughThis update introduces skeleton loading components for the balance, norms, and nutrient advice pages, and refactors these pages to use React Suspense and Await for asynchronous data handling. It improves the user experience by showing placeholder layouts during data loading and centralizes error handling within suspense boundaries. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Page
participant Suspense
participant Await
participant DataLoader
User->>Page: Navigates to calculation page
Page->>Suspense: Render with Skeleton fallback
Suspense->>Await: Await async data (promise)
Await->>DataLoader: Fetch data (e.g., norms, balance, advice)
DataLoader-->>Await: Return data or error
Await-->>Page: Render main content or error
Note over Suspense,Page: Skeleton shown until data resolves
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
coderabbitai
Bot
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx (1)
31-42: Replace array index with more descriptive keys.While using array indices as keys isn't critical for static skeleton placeholders, it's better practice to use more descriptive keys for consistency.
- {[...Array(2)].map((_, i) => ( - <div key={`skeleton-detail-${i}`} className="flex justify-between items-center p-2 bg-muted/50 rounded"> + {['detail-1', 'detail-2'].map((key) => ( + <div key={`skeleton-${key}`} className="flex justify-between items-center p-2 bg-muted/50 rounded">fdm-app/app/components/blocks/norms/skeletons.tsx (1)
43-44: Replace array index with more descriptive keys.Using array indices as keys should be avoided even for static skeleton content to maintain consistency with React best practices.
- {[...Array(3)].map((_, i) => ( - <Card key={`field-norm-skeleton-${i}`} className="hover:shadow-md transition-shadow border-gray-200"> + {Array.from({ length: 3 }, (_, i) => `field-norm-${i + 1}`).map((key) => ( + <Card key={key} className="hover:shadow-md transition-shadow border-gray-200">fdm-app/app/components/blocks/balance/skeletons.tsx (1)
44-45: Use a more descriptive key instead of array index.While using array index is acceptable for static skeletons, it's better to avoid the static analysis warning.
- {[...Array(4)].map((_, i) => ( - <div key={`field-balance-skeleton-${i}`} className="flex items-center"> + {[...Array(4)].map((_, i) => ( + <div key={`skeleton-field-${i + 1}`} className="flex items-center">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
.changeset/giant-files-yell.md(1 hunks)fdm-app/app/components/blocks/balance/skeletons.tsx(1 hunks)fdm-app/app/components/blocks/norms/field-norms.tsx(1 hunks)fdm-app/app/components/blocks/norms/skeletons.tsx(1 hunks)fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx(1 hunks)fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen.$b_id.tsx(4 hunks)fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx(2 hunks)fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx(2 hunks)fdm-app/app/routes/farm.$b_id_farm.$calendar.nutrient_advice.$b_id.tsx(7 hunks)
🧠 Learnings (10)
📓 Common learnings
Learnt from: SvenVw
PR: SvenVw/fdm#6
File: fdm-app/vite.config.ts:5-9
Timestamp: 2024-11-25T12:42:32.783Z
Learning: In the `fdm-app` project, SvenVw is preparing for migration to Remix v3 and may include type declarations or configurations for v3 features in advance, such as in `vite.config.ts`.
Learnt from: SvenVw
PR: SvenVw/fdm#42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component `FarmLayoutBase` has been created in `components/custom/farm-layout-base.tsx` to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: SvenVw/fdm#42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (`FarmHeader`, `ContentLayout`, `PaginationLayout`) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: SvenVw/fdm#81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
1. Export the ErrorBoundary component from the root route
2. Include the Scripts component in the Layout
3. Export the Layout through the default App component
fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen.$b_id.tsx (19)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Learnt from: SvenVw
PR: #16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses react-router v7, and the data function is exported and used for error handling in loaders and actions.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use import type { ... } from 'react-hook-form' syntax to ensure only types are imported.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.$b_id_farm.field.$b_id.cultivation.$b_lu.harvest.$b_id_harvesting.tsx:114-124
Timestamp: 2025-02-13T08:35:59.306Z
Learning: The HarvestForm component in fdm-app expects undefined (not 0) for b_lu_yield when no yield information is available, as 0 would incorrectly imply that yield data exists.
Learnt from: SvenVw
PR: #124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Learnt from: SvenVw
PR: #81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
- Export the ErrorBoundary component from the root route
- Include the Scripts component in the Layout
- Export the Layout through the default App component
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "@remix-run/react" unnecessary.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "@remix-run/react".
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, redirect and other routing utilities should be imported from react-router instead of react-router-dom.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the redirect function should be imported from react-router, not react-router-dom.
Learnt from: SvenVw
PR: #134
File: fdm-calculator/src/balance/nitrogen/index.ts:236-238
Timestamp: 2025-05-26T10:32:15.538Z
Learning: In nitrogen balance calculations for agricultural systems, removal and volatilization are calculated as negative values by definition since they represent nitrogen losses from the system. The balance calculation uses addition (.add()) for all components because removal and volatilization are already negative, so adding them effectively subtracts the losses from the supply.
Learnt from: SvenVw
PR: #134
File: fdm-calculator/src/balance/nitrogen/index.ts:162-168
Timestamp: 2025-05-26T10:32:00.674Z
Learning: In the nitrogen balance calculation system (fdm-calculator), removal and volatilization values are negative by definition. This means the balance calculation using supply.total.add(removal.total).add(volatilization.total) is correct, as it effectively computes supply - |removal| - |volatilization|.
Learnt from: SvenVw
PR: #75
File: fdm-app/app/routes/farm.$b_id_farm.field.$b_id.fertilizer.tsx:68-71
Timestamp: 2025-02-14T09:56:37.606Z
Learning: The calculateDose function in @svenvw/fdm-calculator is a synchronous function that includes built-in validation for negative application amounts and nutrient rates.
fdm-app/app/components/blocks/norms/field-norms.tsx (5)
Learnt from: SvenVw
PR: #67
File: fdm-app/app/routes/farm.create.$b_id_farm.fields.$b_id.tsx:601-610
Timestamp: 2025-01-31T15:05:14.310Z
Learning: The updateField function in fdm-core has optional parameters after fdm and b_id. The TypeScript definitions might show 8 required parameters due to a potential version mismatch.
Learnt from: SvenVw
PR: #6
File: fdm-app/app/routes/app.addfarm.$b_id_farm.fields.tsx:63-99
Timestamp: 2024-11-25T14:50:16.074Z
Learning: i18n will be added in future PRs; for now, hardcoded Dutch text is acceptable until a translation system is implemented.
Learnt from: SvenVw
PR: #6
File: fdm-app/vite.config.ts:5-9
Timestamp: 2024-11-25T12:42:32.783Z
Learning: In the fdm-app project, SvenVw is preparing for migration to Remix v3 and may include type declarations or configurations for v3 features in advance, such as in vite.config.ts.
Learnt from: SvenVw
PR: #9
File: fdm-core/src/cultivation.d.ts:3-13
Timestamp: 2024-11-27T09:58:24.047Z
Learning: In the fdm-core TypeScript codebase, interface names should not be prefixed with 'I'; interface names should be meaningful without the 'I' prefix.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
.changeset/giant-files-yell.md (2)
Learnt from: SvenVw
PR: #6
File: fdm-app/vite.config.ts:5-9
Timestamp: 2024-11-25T12:42:32.783Z
Learning: In the fdm-app project, SvenVw is preparing for migration to Remix v3 and may include type declarations or configurations for v3 features in advance, such as in vite.config.ts.
Learnt from: SvenVw
PR: #6
File: fdm-app/app/routes/app.addfarm.$b_id_farm.fields.tsx:63-99
Timestamp: 2024-11-25T14:50:16.074Z
Learning: i18n will be added in future PRs; for now, hardcoded Dutch text is acceptable until a translation system is implemented.
fdm-app/app/components/blocks/balance/skeletons.tsx (3)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #163
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field._index.tsx:27-29
Timestamp: 2025-06-10T15:05:38.163Z
Learning: In the fdm-app codebase, the component directory structure is intentionally organized with ~/components/custom/ containing small reusable components that can be used in both blocks and pages, while ~/components/blocks/ contains larger block-level components. Not all components should be migrated from custom to blocks - the custom directory serves as a library of smaller utility components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
fdm-app/app/components/blocks/norms/skeletons.tsx (8)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #163
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field._index.tsx:27-29
Timestamp: 2025-06-10T15:05:38.163Z
Learning: In the fdm-app codebase, the component directory structure is intentionally organized with ~/components/custom/ containing small reusable components that can be used in both blocks and pages, while ~/components/blocks/ contains larger block-level components. Not all components should be migrated from custom to blocks - the custom directory serves as a library of smaller utility components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings.delete.tsx:3-16
Timestamp: 2025-01-14T14:36:06.952Z
Learning: The settings block components (FarmSettingsAccessBlock, FarmSettingsDeleteBlock) will be implemented later and should not be refactored into a shared component at this time.
Learnt from: SvenVw
PR: #124
File: fdm-core/src/db/schema-authn.ts:70-76
Timestamp: 2025-04-18T14:20:40.975Z
Learning: The organization schema in fdm-core/src/db/schema-authn.ts is managed by better-auth, and modifications to field constraints (like making the slug field non-nullable) should maintain compatibility with better-auth's expectations, even if application code assumes non-null values.
Learnt from: SvenVw
PR: #6
File: fdm-app/vite.config.ts:5-9
Timestamp: 2024-11-25T12:42:32.783Z
Learning: In the fdm-app project, SvenVw is preparing for migration to Remix v3 and may include type declarations or configurations for v3 features in advance, such as in vite.config.ts.
fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx (3)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #163
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field._index.tsx:27-29
Timestamp: 2025-06-10T15:05:38.163Z
Learning: In the fdm-app codebase, the component directory structure is intentionally organized with ~/components/custom/ containing small reusable components that can be used in both blocks and pages, while ~/components/blocks/ contains larger block-level components. Not all components should be migrated from custom to blocks - the custom directory serves as a library of smaller utility components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx (17)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Learnt from: SvenVw
PR: #16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses react-router v7, and the data function is exported and used for error handling in loaders and actions.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use import type { ... } from 'react-hook-form' syntax to ensure only types are imported.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings.delete.tsx:3-16
Timestamp: 2025-01-14T14:36:06.952Z
Learning: The settings block components (FarmSettingsAccessBlock, FarmSettingsDeleteBlock) will be implemented later and should not be refactored into a shared component at this time.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, redirect and other routing utilities should be imported from react-router instead of react-router-dom.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Learnt from: SvenVw
PR: #124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Learnt from: SvenVw
PR: #81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
- Export the ErrorBoundary component from the root route
- Include the Scripts component in the Layout
- Export the Layout through the default App component
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "@remix-run/react" unnecessary.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "@remix-run/react".
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the redirect function should be imported from react-router, not react-router-dom.
Learnt from: SvenVw
PR: #156
File: fdm-calculator/src/norms/nl/2025/stikstofgebruiksnorm.ts:295-303
Timestamp: 2025-07-21T12:06:07.031Z
Learning: Functions in the fdm-calculator with "NL2025" in their names are specifically designed for Netherlands 2025 agricultural norms calculation and hardcoded 2025 dates are appropriate in this context, as different years would have separate calculation modules.
fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx (15)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Learnt from: SvenVw
PR: #16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses react-router v7, and the data function is exported and used for error handling in loaders and actions.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Learnt from: SvenVw
PR: #124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, redirect and other routing utilities should be imported from react-router instead of react-router-dom.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the redirect function should be imported from react-router, not react-router-dom.
Learnt from: SvenVw
PR: #81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
- Export the ErrorBoundary component from the root route
- Include the Scripts component in the Layout
- Export the Layout through the default App component
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use import type { ... } from 'react-hook-form' syntax to ensure only types are imported.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "@remix-run/react" unnecessary.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "@remix-run/react".
fdm-app/app/routes/farm.$b_id_farm.$calendar.nutrient_advice.$b_id.tsx (16)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #116
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx:111-154
Timestamp: 2025-04-04T14:27:39.518Z
Learning: In the FDM application, cultivation retrieval logic should be centralized in utility functions rather than duplicated across loader and action functions to improve maintainability and ensure consistent behavior.
Learnt from: SvenVw
PR: #16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses react-router v7, and the data function is exported and used for error handling in loaders and actions.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, redirect and other routing utilities should be imported from react-router instead of react-router-dom.
Learnt from: SvenVw
PR: #132
File: fdm-app/app/routes/farm.create.$b_id_farm.$calendar.access.tsx:54-68
Timestamp: 2025-04-29T11:28:44.181Z
Learning: In React Router v7, the json() function has been replaced with data() for creating responses in loaders and actions.
Learnt from: SvenVw
PR: #124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the redirect function should be imported from react-router, not react-router-dom.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use import type { ... } from 'react-hook-form' syntax to ensure only types are imported.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "@remix-run/react" unnecessary.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "@remix-run/react".
🪛 Biome (2.1.2)
fdm-app/app/components/blocks/balance/skeletons.tsx
[error] 45-45: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
fdm-app/app/components/blocks/norms/skeletons.tsx
[error] 44-44: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx
[error] 32-32: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
🧰 Additional context used
🧠 Learnings (10)
📓 Common learnings
Learnt from: SvenVw
PR: SvenVw/fdm#6
File: fdm-app/vite.config.ts:5-9
Timestamp: 2024-11-25T12:42:32.783Z
Learning: In the `fdm-app` project, SvenVw is preparing for migration to Remix v3 and may include type declarations or configurations for v3 features in advance, such as in `vite.config.ts`.
Learnt from: SvenVw
PR: SvenVw/fdm#42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component `FarmLayoutBase` has been created in `components/custom/farm-layout-base.tsx` to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: SvenVw/fdm#42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (`FarmHeader`, `ContentLayout`, `PaginationLayout`) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: SvenVw/fdm#81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
1. Export the ErrorBoundary component from the root route
2. Include the Scripts component in the Layout
3. Export the Layout through the default App component
fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen.$b_id.tsx (19)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Learnt from: SvenVw
PR: #16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses react-router v7, and the data function is exported and used for error handling in loaders and actions.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use import type { ... } from 'react-hook-form' syntax to ensure only types are imported.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.$b_id_farm.field.$b_id.cultivation.$b_lu.harvest.$b_id_harvesting.tsx:114-124
Timestamp: 2025-02-13T08:35:59.306Z
Learning: The HarvestForm component in fdm-app expects undefined (not 0) for b_lu_yield when no yield information is available, as 0 would incorrectly imply that yield data exists.
Learnt from: SvenVw
PR: #124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Learnt from: SvenVw
PR: #81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
- Export the ErrorBoundary component from the root route
- Include the Scripts component in the Layout
- Export the Layout through the default App component
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "@remix-run/react" unnecessary.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "@remix-run/react".
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, redirect and other routing utilities should be imported from react-router instead of react-router-dom.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the redirect function should be imported from react-router, not react-router-dom.
Learnt from: SvenVw
PR: #134
File: fdm-calculator/src/balance/nitrogen/index.ts:236-238
Timestamp: 2025-05-26T10:32:15.538Z
Learning: In nitrogen balance calculations for agricultural systems, removal and volatilization are calculated as negative values by definition since they represent nitrogen losses from the system. The balance calculation uses addition (.add()) for all components because removal and volatilization are already negative, so adding them effectively subtracts the losses from the supply.
Learnt from: SvenVw
PR: #134
File: fdm-calculator/src/balance/nitrogen/index.ts:162-168
Timestamp: 2025-05-26T10:32:00.674Z
Learning: In the nitrogen balance calculation system (fdm-calculator), removal and volatilization values are negative by definition. This means the balance calculation using supply.total.add(removal.total).add(volatilization.total) is correct, as it effectively computes supply - |removal| - |volatilization|.
Learnt from: SvenVw
PR: #75
File: fdm-app/app/routes/farm.$b_id_farm.field.$b_id.fertilizer.tsx:68-71
Timestamp: 2025-02-14T09:56:37.606Z
Learning: The calculateDose function in @svenvw/fdm-calculator is a synchronous function that includes built-in validation for negative application amounts and nutrient rates.
fdm-app/app/components/blocks/norms/field-norms.tsx (5)
Learnt from: SvenVw
PR: #67
File: fdm-app/app/routes/farm.create.$b_id_farm.fields.$b_id.tsx:601-610
Timestamp: 2025-01-31T15:05:14.310Z
Learning: The updateField function in fdm-core has optional parameters after fdm and b_id. The TypeScript definitions might show 8 required parameters due to a potential version mismatch.
Learnt from: SvenVw
PR: #6
File: fdm-app/app/routes/app.addfarm.$b_id_farm.fields.tsx:63-99
Timestamp: 2024-11-25T14:50:16.074Z
Learning: i18n will be added in future PRs; for now, hardcoded Dutch text is acceptable until a translation system is implemented.
Learnt from: SvenVw
PR: #6
File: fdm-app/vite.config.ts:5-9
Timestamp: 2024-11-25T12:42:32.783Z
Learning: In the fdm-app project, SvenVw is preparing for migration to Remix v3 and may include type declarations or configurations for v3 features in advance, such as in vite.config.ts.
Learnt from: SvenVw
PR: #9
File: fdm-core/src/cultivation.d.ts:3-13
Timestamp: 2024-11-27T09:58:24.047Z
Learning: In the fdm-core TypeScript codebase, interface names should not be prefixed with 'I'; interface names should be meaningful without the 'I' prefix.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
.changeset/giant-files-yell.md (2)
Learnt from: SvenVw
PR: #6
File: fdm-app/vite.config.ts:5-9
Timestamp: 2024-11-25T12:42:32.783Z
Learning: In the fdm-app project, SvenVw is preparing for migration to Remix v3 and may include type declarations or configurations for v3 features in advance, such as in vite.config.ts.
Learnt from: SvenVw
PR: #6
File: fdm-app/app/routes/app.addfarm.$b_id_farm.fields.tsx:63-99
Timestamp: 2024-11-25T14:50:16.074Z
Learning: i18n will be added in future PRs; for now, hardcoded Dutch text is acceptable until a translation system is implemented.
fdm-app/app/components/blocks/balance/skeletons.tsx (3)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #163
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field._index.tsx:27-29
Timestamp: 2025-06-10T15:05:38.163Z
Learning: In the fdm-app codebase, the component directory structure is intentionally organized with ~/components/custom/ containing small reusable components that can be used in both blocks and pages, while ~/components/blocks/ contains larger block-level components. Not all components should be migrated from custom to blocks - the custom directory serves as a library of smaller utility components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
fdm-app/app/components/blocks/norms/skeletons.tsx (8)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #163
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field._index.tsx:27-29
Timestamp: 2025-06-10T15:05:38.163Z
Learning: In the fdm-app codebase, the component directory structure is intentionally organized with ~/components/custom/ containing small reusable components that can be used in both blocks and pages, while ~/components/blocks/ contains larger block-level components. Not all components should be migrated from custom to blocks - the custom directory serves as a library of smaller utility components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings.delete.tsx:3-16
Timestamp: 2025-01-14T14:36:06.952Z
Learning: The settings block components (FarmSettingsAccessBlock, FarmSettingsDeleteBlock) will be implemented later and should not be refactored into a shared component at this time.
Learnt from: SvenVw
PR: #124
File: fdm-core/src/db/schema-authn.ts:70-76
Timestamp: 2025-04-18T14:20:40.975Z
Learning: The organization schema in fdm-core/src/db/schema-authn.ts is managed by better-auth, and modifications to field constraints (like making the slug field non-nullable) should maintain compatibility with better-auth's expectations, even if application code assumes non-null values.
Learnt from: SvenVw
PR: #6
File: fdm-app/vite.config.ts:5-9
Timestamp: 2024-11-25T12:42:32.783Z
Learning: In the fdm-app project, SvenVw is preparing for migration to Remix v3 and may include type declarations or configurations for v3 features in advance, such as in vite.config.ts.
fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx (3)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #163
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field._index.tsx:27-29
Timestamp: 2025-06-10T15:05:38.163Z
Learning: In the fdm-app codebase, the component directory structure is intentionally organized with ~/components/custom/ containing small reusable components that can be used in both blocks and pages, while ~/components/blocks/ contains larger block-level components. Not all components should be migrated from custom to blocks - the custom directory serves as a library of smaller utility components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx (17)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Learnt from: SvenVw
PR: #16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses react-router v7, and the data function is exported and used for error handling in loaders and actions.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use import type { ... } from 'react-hook-form' syntax to ensure only types are imported.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings.delete.tsx:3-16
Timestamp: 2025-01-14T14:36:06.952Z
Learning: The settings block components (FarmSettingsAccessBlock, FarmSettingsDeleteBlock) will be implemented later and should not be refactored into a shared component at this time.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, redirect and other routing utilities should be imported from react-router instead of react-router-dom.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Learnt from: SvenVw
PR: #124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Learnt from: SvenVw
PR: #81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
- Export the ErrorBoundary component from the root route
- Include the Scripts component in the Layout
- Export the Layout through the default App component
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "@remix-run/react" unnecessary.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "@remix-run/react".
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the redirect function should be imported from react-router, not react-router-dom.
Learnt from: SvenVw
PR: #156
File: fdm-calculator/src/norms/nl/2025/stikstofgebruiksnorm.ts:295-303
Timestamp: 2025-07-21T12:06:07.031Z
Learning: Functions in the fdm-calculator with "NL2025" in their names are specifically designed for Netherlands 2025 agricultural norms calculation and hardcoded 2025 dates are appropriate in this context, as different years would have separate calculation modules.
fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx (15)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Learnt from: SvenVw
PR: #16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses react-router v7, and the data function is exported and used for error handling in loaders and actions.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Learnt from: SvenVw
PR: #124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, redirect and other routing utilities should be imported from react-router instead of react-router-dom.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the redirect function should be imported from react-router, not react-router-dom.
Learnt from: SvenVw
PR: #81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
- Export the ErrorBoundary component from the root route
- Include the Scripts component in the Layout
- Export the Layout through the default App component
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use import type { ... } from 'react-hook-form' syntax to ensure only types are imported.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "@remix-run/react" unnecessary.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "@remix-run/react".
fdm-app/app/routes/farm.$b_id_farm.$calendar.nutrient_advice.$b_id.tsx (16)
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component FarmLayoutBase has been created in components/custom/farm-layout-base.tsx to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The FarmLayout component in components/custom/farm-layout.tsx provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Learnt from: SvenVw
PR: #151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (FarmHeader, ContentLayout, PaginationLayout) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Learnt from: SvenVw
PR: #116
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx:111-154
Timestamp: 2025-04-04T14:27:39.518Z
Learning: In the FDM application, cultivation retrieval logic should be centralized in utility functions rather than duplicated across loader and action functions to improve maintainability and ensure consistent behavior.
Learnt from: SvenVw
PR: #16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses react-router v7, and the data function is exported and used for error handling in loaders and actions.
Learnt from: SvenVw
PR: #71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Learnt from: SvenVw
PR: #42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in components/custom/farm-layouts/ with BaseFarmLayout and FarmSidebarLayout components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, redirect and other routing utilities should be imported from react-router instead of react-router-dom.
Learnt from: SvenVw
PR: #132
File: fdm-app/app/routes/farm.create.$b_id_farm.$calendar.access.tsx:54-68
Timestamp: 2025-04-29T11:28:44.181Z
Learning: In React Router v7, the json() function has been replaced with data() for creating responses in loaders and actions.
Learnt from: SvenVw
PR: #124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Learnt from: SvenVw
PR: #45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the redirect function should be imported from react-router, not react-router-dom.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use import type { ... } from 'react-hook-form' syntax to ensure only types are imported.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "@remix-run/react" unnecessary.
Learnt from: SvenVw
PR: #138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "@remix-run/react".
🪛 Biome (2.1.2)
fdm-app/app/components/blocks/balance/skeletons.tsx
[error] 45-45: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
fdm-app/app/components/blocks/norms/skeletons.tsx
[error] 44-44: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx
[error] 32-32: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.
(lint/suspicious/noArrayIndexKey)
🔇 Additional comments (16)
fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx (2)
5-48: Well-structured skeleton loading components.The skeleton components effectively simulate the actual nutrient card layout with proper spacing, animations, and visual hierarchy. The use of
animate-pulseand consistent styling provides good user feedback during loading states.
50-58: Grid layout appropriately matches the actual component structure.The fallback component correctly renders three skeleton cards in a responsive grid layout that matches the expected nutrient advice layout.
fdm-app/app/components/blocks/norms/skeletons.tsx (2)
4-36: Excellent accessibility consideration with aria-labels.The skeleton components include proper
aria-labelattributes for screen readers, which is a thoughtful accessibility improvement during loading states.
87-95: Well-organized fallback component with proper spacing.The
NormsFallbackcomponent effectively combines both farm and field skeleton components with appropriate separators and spacing.fdm-app/app/components/blocks/norms/field-norms.tsx (1)
39-39: Correct Dutch language improvement.The correction from "Perceelniveau" to "Perceelsniveau" improves the Dutch language accuracy of the heading.
.changeset/giant-files-yell.md (1)
1-6: Clear and appropriate changeset documentation.The changeset properly documents the skeleton loading feature addition with a minor version bump, clearly explaining the user experience improvement for calculation-heavy pages.
fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx (4)
25-25: Proper imports for Suspense and Await patterns.The imports are correctly structured for React Router v7's Suspense and Await components, following the established patterns in the codebase.
Also applies to: 34-35
117-191: Excellent error handling with user-friendly messages.The error handling implementation is comprehensive and user-focused:
- Specific error messages for missing soil parameters with detailed lists
- Generic error fallback with JSON debug information for support
- Clear visual presentation using Card components
This approach significantly improves the user experience when calculations fail.
193-348: Well-structured data visualization with proper field mapping.The nitrogen balance overview displays comprehensive metrics with:
- Clear visual indicators (CircleCheck/CircleAlert) for balance status
- Proper data presentation with units
- Effective use of the fieldsMap for field details
- Good navigation integration with NavLink
The implementation maintains the original functionality while improving the async rendering pattern.
118-119: Confirm thatnitrogenBalanceResultis a Promise before using<Await>The
<Await>component only suspends when given a promise—if your loader returns a plain value here, the UI will never suspend and this pattern doesn’t match React Router’s expectations.Please verify in
fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx
that your loader does something like:import { defer } from "react-router"; // … export async function loader({ params }) { return defer({ nitrogenBalanceResult: fetchNitrogenBalance(params.b_id_farm, params.b_calendar) }); }And in your component you pull it via:
const { nitrogenBalanceResult } = useLoaderData<typeof loader>();Then wrapping with
<Await resolve={nitrogenBalanceResult}>is correct.
If your loader returns the actual data (not wrapped indefer), remove the<Await>and handle it synchronously.fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx (3)
32-34: LGTM!The imports are correctly added and follow the project's established patterns.
219-304: Well-structured asynchronous rendering implementation.The refactoring to use Suspense/Await pattern is well implemented, with clear separation of loading, error, and success states. The error handling is comprehensive and user-friendly.
217-218: Fix the Promise.all usage with potentially undefined values.The
Promise.allis being called withloaderData.farmNormsandloaderData.fieldNormswhich can beundefinedwhen calendar !== "2025" (see lines 121-122). This will cause a runtime error asPromise.allexpects an array of promises.Apply this diff to fix the issue:
- <Suspense fallback={<NormsFallback />}> - <Await resolve={Promise.all([loaderData.farmNorms, loaderData.fieldNorms])}> + <Suspense fallback={<NormsFallback />}> + <Await resolve={loaderData.farmNorms && loaderData.fieldNorms ? Promise.all([loaderData.farmNorms, loaderData.fieldNorms]) : Promise.resolve([undefined, undefined])}>Likely an incorrect or invalid review comment.
fdm-app/app/routes/farm.$b_id_farm.$calendar.nutrient_advice.$b_id.tsx (1)
125-129: Correct implementation of promise-based data loading.The loader correctly returns an unresolved promise for
nutrientAdvice, enabling proper Suspense/Await handling in the component.fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen.$b_id.tsx (1)
110-115: Good addition of type annotations.The type annotations for the
.find()callbacks improve type safety and code readability.fdm-app/app/components/blocks/balance/skeletons.tsx (1)
62-77: Well-implemented skeleton components.The skeleton components provide excellent visual feedback during loading states, with proper layout structure that matches the actual content. The composition pattern in
NitrogenBalanceFallbackis clean and maintainable.
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Refactor