fix: various small fixes

edisontim commented 3 months ago

PR Type

Enhancement, Bug fix

Description

Enhanced string formatting for structure category names in useStructures.tsx.
Added dynamic resource balance fetching and improved rendering logic in InventoryResources.tsx.
Improved layout and styling of structure list items, and added dynamic resource display for FragmentMine category in StructureListItem.tsx.
Refactored import statements and fixed class name usage in ResourceIcon.tsx.

Changes walkthrough 📝

Relevant files

Enhancement

useStructures.tsx `Enhance structure category name formatting` client/src/hooks/helpers/useStructures.tsx - Improved string formatting for structure category names.	+3/-1
InventoryResources.tsx `Add dynamic resource balance and enhance rendering` client/src/ui/components/resources/InventoryResources.tsx Added dynamic resource balance fetching. Enhanced rendering logic for inventory resources.	+53/-30
StructureListItem.tsx `Improve structure list item layout and dynamic resource display` client/src/ui/components/worldmap/structures/StructureListItem.tsx Improved structure list item layout and styling. Added dynamic resource display for FragmentMine category.	+37/-20

Bug fix

ResourceIcon.tsx

Refactor imports and fix class name usage in ResourceIcon

client/src/ui/elements/ResourceIcon.tsx

Refactored import statements for consistency.

Fixed class name usage in ResourceIcon component.

+5/-6

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eternum	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 4, 2024 10:46am

github-actions[bot] commented 3 months ago

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review

**Possible Bug:** In `InventoryResources.tsx`, the logic for displaying resources seems to be modified to include dynamic resources. However, the slicing logic for `dynamicResources` and `inventoryResources` might not correctly handle cases where the sum of both exceeds the maximum allowed (`max`). This could lead to incorrect rendering of resources or an incorrect number of resources being displayed. **Code Clarity:** In `StructureListItem.tsx`, the conditional rendering logic inside the JSX is quite complex and could benefit from being broken down into smaller, more manageable components or functions. This would improve readability and maintainability.

github-actions[bot] commented 3 months ago

PR Code Suggestions ✨

Category	Suggestion	Score
Maintainability	Refactor the rendering of `ResourceCost` components into a separate function ___ Extract the JSX logic for rendering `ResourceCost` components into a separate function to improve readability and maintainability of the `InventoryResources` component. [client/src/ui/components/resources/InventoryResources.tsx [32-46]](https://github.com/BibliothecaDAO/eternum/pull/1069/files#diff-a025c7ecc974954faeed10bdb47b88d0f411150e36aaa8d16962f6ce0ca034f0R32-R46) ```diff -{dynamicResources && - dynamicResources.length > 0 && - dynamicResources - .slice(0, max - dynamicResources.length) - .map( - (resource) => - resource && ( - - ), - )} +{renderResourceCosts(dynamicResources, max)} ``` Suggestion importance[1-10]: 8 Why: Extracting the JSX logic into a separate function significantly improves readability and maintainability, making the component easier to understand and modify.	8
	Refactor complex conditional rendering into a separate function ___ Use a ternary operator or a separate rendering function to handle the conditional rendering logic for `FragmentMine` and `Hyperstructure`, to simplify the JSX structure and improve readability. [client/src/ui/components/worldmap/structures/StructureListItem.tsx [37-48]](https://github.com/BibliothecaDAO/eternum/pull/1069/files#diff-76d2d7706286ec37ce504f8bfde4367b70141a870a017e824e194ef5b0facc26R37-R48) ```diff -{String(structure.category) === "FragmentMine" ? ( - - resource.id === ResourcesIds.Earthenshard)!.trait} - className="inline mr-0.5" - size="xs" - /> - {currencyIntlFormat(RESOURCE_OUTPUTS_SCALED[ResourcesIds.Earthenshard])}/tick - - ) : ( - {HYPERSTRUCTURE_POINTS_PER_CYCLE} points/tick - )} +{renderStructureDetails(structure)} ``` Suggestion importance[1-10]: 8 Why: Simplifying the JSX structure by moving conditional rendering to a separate function improves readability and maintainability.	8
	Replace inline string manipulation with a utility function for formatting ___ Consider using a utility function to format the `structure.category` for display purposes instead of inline string manipulation. This will improve code readability and maintainability. [client/src/hooks/helpers/useStructures.tsx [102-104]](https://github.com/BibliothecaDAO/eternum/pull/1069/files#diff-396eaa9679c616f55b4078861124f09fe1125e62921747c6e600b2d803948261R102-R104) ```diff -: `${String(structure.category) - .replace(/([A-Z])/g, " $1") - .trim()} ${structure?.entity_id}`; +: formatCategory(structure.category) + ' ' + structure?.entity_id; ``` Suggestion importance[1-10]: 7 Why: Using a utility function for formatting improves code readability and maintainability, but it is not a critical change.	7
Best practice	Simplify and correct the application of class names in JSX ___ Ensure consistent usage of `props.className` in the JSX structure to avoid applying styles incorrectly or redundantly. [client/src/ui/elements/ResourceIcon.tsx [84-85]](https://github.com/BibliothecaDAO/eternum/pull/1069/files#diff-5416bcdc887d471eef7dadc9ac2edb47f9e18e6fb351ed720a1108594efe733bR84-R85) ```diff - - + + ``` Suggestion importance[1-10]: 6 Why: Ensuring consistent usage of class names is a good practice for avoiding style issues, but the impact on the overall functionality is minor.	6

BibliothecaDAO / eternum