fix(ui-ux): fix multiple re-renders, add common useFetchListData hook
#303
Conversation
This file contains 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
lykalabrada
requested review from
kyleleow,
pierregee and
fullstackninja864
as code owners
DFC-143 Task: Rerendering pages twice
What UI/UX improvements need to be implemented?On SC details page when user change page number for tokens and go back to txn tab then there is 2 renders for listing Why is this needed?Which component/screens does this concern? |
fullstackninja864
approved these changes
Jul 21, 2023
pierregee
suggested changes
Jul 24, 2023
src/hooks/useFetchListData.tsx
Outdated
Comment on lines
37
to
53
| const handleTabSwitchRerender = () => { | ||
| /** | ||
| * [Why this is added] on tab/page change, page_number of previous tab/page remains and api is called with incorrect page params causing multiple re-renders | ||
| * fix is to prevent any api call when component is first rendered, wait for pagination to reset the query params | ||
| * resetting of query params causes second re-render and then we can call api with proper page params | ||
| * */ | ||
| if (firstRender.current) { | ||
| firstRender.current = false; | ||
| // skip api call | ||
| setShouldSkipDataFetch(true); | ||
| return; | ||
| } | ||
| if (shouldSkipDataFetch && firstRender.current === false) { | ||
| // allow api call | ||
| setShouldSkipDataFetch(false); | ||
| } | ||
| }; |
There was a problem hiding this comment.
As discussed, the current approach makes use of useState to determine which tab you're in. If we rely on router.push instead, it could fix the issue wherein previous tab params is not "cleared" before moving to another tab. Let's try this first! 🙏
4 tasks
pierregee
approved these changes
Jul 26, 2023
pierregee
added a commit
that referenced
this pull request
Aug 7, 2023
* added verified contract listing * added contracts routes to header * chore(ui-ux): use transaction type (#204) * chore(ui-ux): use testnet api (#205) * added skeleton loader for sc * fix(conflict): fix merge conflict to main (#220) * feat(ui-ux): handle lost block details and display block hash (#212) * feat(ui-ux): handle reorganized block details page * feat(ui-ux): retain gas price decimal * feat(ui-ux): display block hash and refactor block details * remove double await --------- Co-authored-by: pierregee <[email protected]> * fix(ui-ux): fetch tx confirmation from blockscout v1 api (#218) fix(ui-ux): fetch tx confirmation from blockscount v1 api * feat(ui-ux): display decoded input for token transfer txs (#213) feat(ui-ux): display decoded input * feat(ui-ux): update main title and reduce size (#219) --------- Co-authored-by: pierregee <[email protected]> * feat(ui-ux): redirect hash to correct page * feat(ui-ux): add api integration on contract detail page (#232) * feat(ui-ux): add api integration on contract detail page * remove commented link - verified contracts in footer * reorder tabs * rm log * improve ui spacing * revert changes * feat(ui-ux): update tabs inside contract details (#235) * feat(ui-ux): update main tabs inside contract details * adjust sub-tab * fix sub-tab name * feat(ui-ux): add contract code details (#248) * feat(ui-ux): add code details * fix overlapping ui * display code blocks * display all contract files * improve comment * fix filename for empty file path * fix build * fix build * feature(ui-ux): verify smart contract (#245) * added verify contract step 1 and terms page * added error state for input * minor text change * added validation for step one * allow edit of smartcontract details * added smartcontraction verification flow * updated api endpoint and added redirection flow * added action btn for partial and full rest * Update src/api/SmartContractApi.ts Co-authored-by: Lyka Labrada <[email protected]> * Update next.config.js Co-authored-by: Lyka Labrada <[email protected]> * Allow vyper SC verifiaction and refactoring * update evm version --------- Co-authored-by: Lyka Labrada <[email protected]> * feat(core): add contract read and write methods (#246) * feat(core): add contract read and write methods * fix(ui-ux): uncommit ui padding * fix key error, method_id is optional * feat(core): add metamask connection to metachain * handle contract write with defi value * clean up code for contract method form * replace ethers utils with viem * move contract methods api call inside own component * add expand all and reset form functions * move custom defichain evm chains into separate file * cleanup * fix empty inputs error * fix next.config * feat(ui-ux): redirect contract address to contract page (#256) * feat(ui-ux): add unverified contract ux (#258) * feat(ui-ux): add unverified contract ux * remove log * feat(ui-ux): add plus icon to add zeroes on write input (#257) * feat(ui-ux): add plus icon to add zeroes on write input * feat(ui-ux): autofocus on custom input * feat(ui-ux): add maximum limit to custom decimal * feat(core): integrate config api from blockscout v2 (#259) * feat(core): integrate config api from blockscout v2 * remove unused apis * fix looping mapping * fix switched compiler versions * fix(ui-ux): refactor smart contract page components (#260) * feat(core): integrate config api from blockscout v2 * remove unused apis * fix(ui-ux): refactor smart contract page components * clean prop types * add disabled dropdown ui * add new interface for stepone * add prop types in step 2 --------- Co-authored-by: Lyka Labrada <[email protected]> * feature(ui-ux): smart contract verification using JSON input (#255) * added verify contract step 1 and terms page * added error state for input * minor text change * added validation for step one * allow edit of smartcontract details * added smartcontraction verification flow * updated api endpoint and added redirection flow * added action btn for partial and full rest * Update src/api/SmartContractApi.ts Co-authored-by: Lyka Labrada <[email protected]> * Update next.config.js Co-authored-by: Lyka Labrada <[email protected]> * Allow vyper SC verifiaction and refactoring * update evm version * refactor code * fix(ui-ux): tx for contract creation - to is incorrect (#254) * fix(ui-ux): tx for contract creation - to is incorrect * redirect to contract page * json upload fix * minor fixes * removed unused code * code refactor * remove liceance selection * remove unused whitelisted url --------- Co-authored-by: Lyka Labrada <[email protected]> Co-authored-by: Pierre Gee <[email protected]> Co-authored-by: pierregee <[email protected]> * feat(core): update domain name for node testnet (#264) * feat(core): update domain name for node testnet * update chains url * feature(ui-ux): added support to specify library name and address to verify SC (#263) * added lib support standard contract verification * hide SolidityMultiPartFiles SC verification * added placeholder * feat(ui-ux): display read proxy and write proxy methods (#261) * feat(ui-ux): display read proxy and write proxy methods * update rpc url * update rpc url on chains config * feature(core): resolved conflicts with main (#267) chore(ops): move to node 18 and update deps (#251) * chore(ops): move to node 18 and update deps * chore(ops): move to node 18 and update deps Co-authored-by: JJ Adonis <[email protected]> * feat(ui-ux): add tokens list (#265) Co-authored-by: Lyka Labrada <[email protected]> * fix(build): fix feature/contract branch build error (#268) fix(build): fix feature branch build error * feature(ui-ux): added support for multipart file upload (#266) * feature(ui-ux): added support for multipart file upload * minor fix * code refactoring * feature(ui-ux): added file upload ui changes (#269) * minor refactoring * added file upload ui cahnges * fix(build): fix feature/contract build (#270) * chore(ops): move to node 18 and update deps (#251) (#274) * chore(ops): move to node 18 and update deps * chore(ops): move to node 18 and update deps Co-authored-by: JJ Adonis <[email protected]> * fix(core): merge branch 'main' of github.com:WavesHQ/metascan into harsh/fix-conflicts (#275) chore(ops): move to node 18 and update deps (#251) * chore(ops): move to node 18 and update deps * chore(ops): move to node 18 and update deps Co-authored-by: JJ Adonis <[email protected]> * fix(conflict): fix merge conflict to main (#276) chore(ops): move to node 18 and update deps (#251) * chore(ops): move to node 18 and update deps * chore(ops): move to node 18 and update deps Co-authored-by: JJ Adonis <[email protected]> * feature(ui-ux): added maintenancepage (#277) * feature(ui-ux): added maintanence page * added verification url in constants * Update src/pages/Maintenance.tsx Co-authored-by: Lyka Labrada <[email protected]> * Update src/pages/Maintenance.tsx Co-authored-by: Lyka Labrada <[email protected]> * Update src/pages/Maintenance.tsx Co-authored-by: Lyka Labrada <[email protected]> --------- Co-authored-by: Lyka Labrada <[email protected]> * feature(ui-ux): minor SC UI updates (#278) * added routing changes and cortract name * added support for child path to show active header link * removed consoles * fix(build): fix build error (#280) * fix(core): fixed linti issue (#281) fix(core): fixed linting issue * fix(conflict): Merge 'main' into branch feature/contract and fix conflict (#283) chore(config): whitelist new ocean rpc (#282) chore(config): use ocean rpc * fix(ui-ux): added fix for health check (#284) * fix(ui-ux): updated health api check (#286) Update MainContainer.tsx * feat(ui-ux): add token svg (#291) * feature(ui-ux): added check for already verified contract address (#294) * fix(ui-ux): fixed error message issue in InputComponent (#297) * feat(ui-ux): add token details and contract, merge all addresses into one page `/address/[aid]` (#290) * feat(ui-ux): add token details, transfers and holders api * list - update N/A * feat(ui-ux): update token list row ui * feat(ui-ux): add [tokenId] page * feat(ui-ux): fetch token creator and transfercount from diff apis * feat(ui-ux): use query mutation to manually trigger requests * feat(ui-ux): fix displayed tx type on token transfers * feat(ui-ux): add tooltips for token details * feat(ui-ux): add specific 404 for token details * update tooltip design * Fix ui alignment issues * Fix null/0 address and symbol * Update address QRcode value * Add full border to some sections * feat(ui-ux): redesign transaction row * feat(ui-ux): fix overflow display * fix(lint): fix lint errors * fix(ui-ux): remove extra margin in contract details * fix(ui-ux): fix tokens list pagination * feat(ui-ux): add token contract * feat(ui-ux): fix logs pagination loader * fix tokens list pagination * feat(ui-ux): share common components between contract and address page * disable no-array-index-key rule * feat(ui-ux): add loader for logs list * fix empty token name * updte token symbol color in list * feat(ui-ux): display total tokens count of an address * update any props * feat(ui-ux): add tooltip on contract details page * remove link shallow prop * rename 'classname' prop to 'containerClassname' * feature(ui-ux): added tokens listing in contract details (#288) * refined tokens list in contracts * pagination * fix * fixed pagination --------- Co-authored-by: Lyka Labrada <[email protected]> * update token holders skeloton loader * adjust token holders list decimal scale * fix(ui-ux): fixed txn loader (#289) fix(ui-ux): fided txn loader * chore(refactor): merge pages for address + contract + token + token contract (#293) * chore(refactor): merge contract and token details page into address * feat(ui-ux): add token page that uses same address component * chore(refactor): update contract tokens api call * chore(cleanup): remove console log, fix missing pagination * fix(ui-ux): refetch list data on address change * feat(ui-ux): remove transfers status, add type * fix token holders pagination * remove SC token list header * fix(ui-ux): fixed table header alignment (#295) * hide tab if no data available * revert commit, hide token count if zero * fix flickering screen * remove redundant padding * update passed data to transactionrow * update token total supply tooltip --------- Co-authored-by: Harsh R <[email protected]> --------- Co-authored-by: Harsh R <[email protected]> * chore(ui-ux): add comment to list data timeout, fix minor issues (#296) * feat(ui-ux): add token details, transfers and holders api * list - update N/A * feat(ui-ux): update token list row ui * feat(ui-ux): add [tokenId] page * feat(ui-ux): fetch token creator and transfercount from diff apis * feat(ui-ux): use query mutation to manually trigger requests * feat(ui-ux): fix displayed tx type on token transfers * feat(ui-ux): add tooltips for token details * feat(ui-ux): add specific 404 for token details * update tooltip design * Fix ui alignment issues * Fix null/0 address and symbol * Update address QRcode value * Add full border to some sections * feat(ui-ux): redesign transaction row * feat(ui-ux): fix overflow display * fix(lint): fix lint errors * fix(ui-ux): remove extra margin in contract details * fix(ui-ux): fix tokens list pagination * feat(ui-ux): add token contract * feat(ui-ux): fix logs pagination loader * fix tokens list pagination * feat(ui-ux): share common components between contract and address page * disable no-array-index-key rule * feat(ui-ux): add loader for logs list * fix empty token name * updte token symbol color in list * feat(ui-ux): display total tokens count of an address * update any props * feat(ui-ux): add tooltip on contract details page * remove link shallow prop * rename 'classname' prop to 'containerClassname' * feature(ui-ux): added tokens listing in contract details (#288) * refined tokens list in contracts * pagination * fix * fixed pagination --------- Co-authored-by: Lyka Labrada <[email protected]> * update token holders skeloton loader * adjust token holders list decimal scale * fix(ui-ux): fixed txn loader (#289) fix(ui-ux): fided txn loader * chore(refactor): merge pages for address + contract + token + token contract (#293) * chore(refactor): merge contract and token details page into address * feat(ui-ux): add token page that uses same address component * chore(refactor): update contract tokens api call * chore(cleanup): remove console log, fix missing pagination * fix(ui-ux): refetch list data on address change * feat(ui-ux): remove transfers status, add type * fix token holders pagination * remove SC token list header * fix(ui-ux): fixed table header alignment (#295) * hide tab if no data available * revert commit, hide token count if zero * fix flickering screen * remove redundant padding * update passed data to transactionrow * update token total supply tooltip --------- Co-authored-by: Harsh R <[email protected]> * chore(ui-ux): add comment to list data timeout * chore(ui-ux): cleanup minor code issues * add loader on page number change * put back react/no-array-index-key lint rule --------- Co-authored-by: Harsh R <[email protected]> * fix(ui-ux): hide tokens count for tokens details page (#300) * fix(ui-ux): fixed amount not converted correctly on tokens page (#299) * fix(ui-ux): fixed alignment issue for decode input in txn detail page (#301) * fix(ui-ux): fixed alignment issue for decode input in txn detail page * minor improvement * feature(ui-ux): updated footer to add explorer links (#307) * fix(ui-ux): txn count in verified SC listing (#306) * fix(ui-ux): txn count in verified SC listing * fixed padding issue for codebox * fix(ui-ux): fix null symbol on token transfers list (#305) * fix(ui-ux): fix incorrect active tab when moving to token page (#304) * fix(ui-ux): fix incorrect active tab when moving to token page * also update token link for mobile --------- Co-authored-by: Pierre Gee <[email protected]> * feature(ui-ux): added token link in txn details (#309) * feature(ui-ux): added token link in txn details page and solved some alignment issue * token row alignment fix * feat(ui-ux): add tooltip for mobile and tablet view (#308) * feat(ui-ux): add tooltip for mobile and tablet view * fix typo --------- Co-authored-by: Pierre Gee <[email protected]> Co-authored-by: pierregee <[email protected]> * feat(core): update t and c (#302) * feat(core): update t and c * use semantic html * add section 7-11 * fix typo * fix typos * fix typos * add periods --------- Co-authored-by: Lyka Labrada <[email protected]> * fix(ui-ux): fix multiple re-renders, add common `useFetchListData` hook (#303) * fix(ui-ux): fix multiple re-renders, add common useFetchListData hook * remove unnecessary fetchedData var * feat(ui-ux): use 'source' query params to fix rerender issue on tab change (#310) * chore(e2e): add e2e test for blocks list page and tx details page (#311) * chore(e2e): add e2e test for blocks list page * change blocks file into directory * chore(e2e): initial tx details page e2e * chore(e2e): e2e test for tx details page * chore(e2e): add test for token minting tx type --------- Co-authored-by: Pierre Gee <[email protected]> --------- Co-authored-by: Lyka Labrada <[email protected]> Co-authored-by: Pierre Gee <[email protected]> Co-authored-by: pierregee <[email protected]> Co-authored-by: JJ Adonis <[email protected]> Co-authored-by: Keng Ye <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 this PR does / why we need it:
useFetchListDatathat handles api calls for data listsWhich issue(s) does this PR fixes?:
Fixes DFC-143
Additional comments?:
Developer Checklist: