update function component, small fix UI and logic improvement.#36
Open
jigo961257 wants to merge 8 commits into
Open
update function component, small fix UI and logic improvement.#36jigo961257 wants to merge 8 commits into
jigo961257 wants to merge 8 commits into
Conversation
- Fixes a critical bug where invoice totals were calculated incorrectly due to string concatenation in the loop. - Optimizes `handleCalculateTotal` to use a single `setState` call instead of 4 chained calls, reducing re-renders. - Adds regression test in `src/components/InvoiceForm.test.js`.
…on-batch-state-2032289671949705086 ⚡ Bolt: Fix invoice total calculation and optimize re-renders
- Converted App, InvoiceForm, InvoiceItem, EditableField, InvoiceModal to functional components. - Added unit tests in InvoiceForm.test.js. - Fixed duplicate ID issue in EditableField. - Modernized state management using Hooks. - Fixed linter warnings. - Fixed equality checks.
- Converted App, InvoiceForm, InvoiceItem, EditableField, InvoiceModal to functional components. - Modernized state management using Hooks (useState, useEffect, useCallback). - Resolved merge conflicts with remote branch. - Added comprehensive unit tests in InvoiceForm.test.js. - Fixed duplicate ID issue in EditableField. - Addressed linter warnings and equality checks.
…omponents-2435297311794581701 Refactor to Functional Components
…omponents-2435297311794581701 add the build script update for netlify
❌ Deploy Preview for invoice-generator-react failed.
|
Author
|
here I add the environment variable in the netlify as following NODE_OPTIONS = --openssl-legacy-provider |
codeCraft-Ritik
left a comment
codeCraft-Ritik
left a comment
There was a problem hiding this comment.
Excellent work on this implementation — very clean and well-organized
|
Thanks for choosing me but may final semester exam is going on and I have
to focus on studyies and unfortunately I can't do the work 😊.
…On Mon, 12 Jan 2026, 7:32 pm Jeegar Goyani, ***@***.***> wrote:
- update the class component to function component of invoice
component.
💡 What: Optimized handleCalculateTotal to batch state updates and
fixed a calculation bug.
🎯 Why: The original implementation had a bug where subTotal became a
string during the loop, causing incorrect totals (e.g., "10.00" + 20 =
"10.0020"). It also triggered 4 separate re-renders for every calculation
update due to chained setState calls.
📊 Impact:
- Fixes incorrect invoice totals for multiple items.
- Reduces re-renders by ~75% during calculation updates (from 4 to 1).
- Improves responsiveness of input fields.
🔬 Measurement:
- src/components/InvoiceForm.test.js verifies the correct calculation
for multiple items.
- Manual verification confirms UI updates correctly and totals are
accurate.
------------------------------
You can view, comment on, or merge this pull request online at:
#36
Commit Summary
- 98a2468
<98a2468>
fix(perf): batch state updates and fix total calculation
- 93c2d66
<93c2d66>
Merge pull request #1 from
javascript-with-jigo/fix-invoice-calculation-batch-state-2032289671949705086
- a391cd8
<a391cd8>
Refactor components to functional components and add tests
- 28f159e
<28f159e>
Refactor to functional components and resolve conflicts
- d54f82a
<d54f82a>
Merge branch 'master' into
refactor-functional-components-2435297311794581701
- 95acab5
<95acab5>
Merge pull request #2 from
javascript-with-jigo/refactor-functional-components-2435297311794581701
- 929b342
<929b342>
add the build script update for netlify
- 9814106
<9814106>
Merge pull request #3 from
javascript-with-jigo/refactor-functional-components-2435297311794581701
File Changes
(9 files
<https://github.com/johnuberbacher/invoice-generator/pull/36/files>)
- *A* .jules/bolt.md
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-b3d690d8d9366d3902c26b045ee8782b86e79c27d6af7770d085989e65198f63>
(7)
- *M* package-lock.json
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-053150b640a7ce75eff69d1a22cae7f0f94ad64ce9a855db544dda0929316519>
(21835)
- *M* package.json
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519>
(5)
- *M* src/App.js
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-3d74dddefb6e35fbffe3c76ec0712d5c416352d9449e2fcc8210a9dee57dff67>
(7)
- *M* src/components/EditableField.js
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-9daafb0d445ea95e2369e853f026e56e1d6a8b0251345c359b70a2e3c3a15648>
(59)
- *M* src/components/InvoiceForm.js
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-33de56b5bc43aaeabc7fb70d6527ec4eae332523146d783c08e6ec21a73db771>
(235)
- *A* src/components/InvoiceForm.test.js
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-7244322510330d3f704fe74966c454b929a9a6a75d70c35815c67aa713fa8037>
(132)
- *M* src/components/InvoiceItem.js
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-282cc222cdfbb3d985e95ad7c4421ed6eb70ec62c5126b18f033de1386067ad7>
(199)
- *M* src/components/InvoiceModal.js
<https://github.com/johnuberbacher/invoice-generator/pull/36/files#diff-6f49052b200f88cb97a7f58e1b57c76c401481971455af25cd35d47e49642ebf>
(231)
Patch Links:
- https://github.com/johnuberbacher/invoice-generator/pull/36.patch
- https://github.com/johnuberbacher/invoice-generator/pull/36.diff
—
Reply to this email directly, view it on GitHub
<#36>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/BOMCK4DWY5UBEYSRS6N5W534GOSQLAVCNFSM6AAAAACRNPOGO2VHI2DSMVQWIX3LMV43ASLTON2WKOZTHAYDINBWGEYTIOI>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
💡 What: Optimized
handleCalculateTotalto batch state updates and fixed a calculation bug.🎯 Why: The original implementation had a bug where
subTotalbecame a string during the loop, causing incorrect totals (e.g., "10.00" + 20 = "10.0020"). It also triggered 4 separate re-renders for every calculation update due to chainedsetStatecalls.📊 Impact:
🔬 Measurement:
src/components/InvoiceForm.test.jsverifies the correct calculation for multiple items.