algorandfoundation / algokit-lora

https://lora.algokit.io
13 stars 5 forks source link

AK-14 - Added page titles #306

Closed lempira closed 3 weeks ago

lempira commented 4 weeks ago

I looks through all of the URL routes and added a hook that creates the title based on the params of page. Here are the pages and examples of titles. I still have to write a test for the hook but wanted get feedback on approach and format before I write the test.

Pages: "Index": "/", Example: Lora Explore - mainnet

"Explore": "/:networkId", Example: Lora Explore - mainnet

"Explore_Transaction_ById": "/:networkId/transaction/:transactionId", Example: Lora - TxnId:CFNKY4JV5BMIRSP2SMZE634DYB22FALLURI72U6UMWZNKEBOYEMQ - mainnet

"Explore_Transaction_ById_Inner_ById": "/:networkId/transaction/:transactionId/inner//*", Example: Lora - TxnId:Q36W3E5GBCPZYGEVFQGTQB4KX7QTFYV3H4UYNRYS4AFXEPILHQXQ, Inner:1 - mainnet

"Explore_Block_ByRound": "/:networkId/block/:round", Example: Lora - Block:43904244 - mainnet

"Explore_Block_ByRound_Group_ById": "/:networkId/block/:round/group/:groupId", Example: Lora - Block:43904244 - Group:iUE01XrzcJZ+ENIwPyjPmtaVUF5OKy8vYYOwGbdKliQ= - mainnet

"Explore_Account_ByAddress": "/:networkId/account/:address", Example: Lora - Addr:W2IZ3EHDRW2IQNPC33CI2CXSLMFCFICVKQVWIYLJWXCTD765RW47ONNCEY - mainnet

"Explore_Asset_ById": "/:networkId/asset/:assetId", Example: Lora - AssetId:1014 - localnet

"Explore_Application_ById": "/:networkId/application/:applicationId", Example: Lora - AppId:1019 - localnet

"Explore_Tx": "/:networkId/tx/*", Example: Lora - TxnId:CFNKY4JV5BMIRSP2SMZE634DYB22FALLURI72U6UMWZNKEBOYEMQ - mainnet

"Explore_Txn": "/:networkId/txn/*", Example: Lora - TxnId:CFNKY4JV5BMIRSP2SMZE634DYB22FALLURI72U6UMWZNKEBOYEMQ - mainnet

"AppLab": "/app-lab", Example: Lora App Lab

"AppLab_Create": "/app-lab/create", Example: Lora Create App Interface

"Settings": "/settings", Example: Lora Settings

"Fund": "/fund", Example: Lora Fund

"FundAuthCallback": "/fund/auth-callback", Example: NA

"TransactionWizard": "/transaction-wizard", Example: Lora Transaction Wizard

"TxWizard": "/tx-wizard", Example: Lora Transaction Wizard

"TxnWizard": "/txn-wizard" Example: Lora Transaction Wizard

lempira commented 3 weeks ago

I changed the page title format according to the suggested format. I also used @neilcampbell suggestion of joining the params into a string.

For the use-title test, I use a createMemoryBrowser of react-router-dom instead of mocking the useParams. I think this allows us to test more declaratively and pass in that URL instead of imperatively passing in the params.

There are many places that the params are mocked thru vi.mocked(useParams).mockImplementation. Perhaps we can create a helper wrapper that uses createMemoryBrowser and pass in the URL and not have to mock useParams?

Another suggestion: can we consider adding eslint-plugin-vitest to the testing conf. I had some focused tests that I forgot to unfocus, and they were only caught in the pipeline. The eslint plugin could have caught that, along with whatever other rules we want to enforce, on lint.

neilcampbell commented 3 weeks ago

There are many places that the params are mocked thru vi.mocked(useParams).mockImplementation. Perhaps we can create a helper wrapper that uses createMemoryBrowser and pass in the URL and not have to mock useParams?

Another suggestion: can we consider adding eslint-plugin-vitest to the testing conf. I had some focused tests that I forgot to unfocus, and they were only caught in the pipeline. The eslint plugin could have caught that, along with whatever other rules we want to enforce, on lint.

Both of these sound good. @lempira Did you want to do these as part of this PR or handle separately?

lempira commented 3 weeks ago

There are many places that the params are mocked thru vi.mocked(useParams).mockImplementation. Perhaps we can create a helper wrapper that uses createMemoryBrowser and pass in the URL and not have to mock useParams?

Another suggestion: can we consider adding eslint-plugin-vitest to the testing conf. I had some focused tests that I forgot to unfocus, and they were only caught in the pipeline. The eslint plugin could have caught that, along with whatever other rules we want to enforce, on lint.

Both of these sound good. @lempira Did you want to do these as part of this PR or handle separately?

I was thinking taking these items to a separate PR to keep this one smaller.