Chore/court stats no accordion #1796
Conversation
jaybuidl
added
Package: Web
WalkthroughThe pull request modifies the Changes
Possibly related PRs
Suggested labels
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
✅ Deploy Preview for kleros-v2-university ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-neo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Code Climate has analyzed commit 9a66048 and detected 3 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
web/src/pages/Courts/CourtDetails/Stats.tsx (4)
42-45: Remove unused styled component.The
Titlestyled component is defined but not used in the code as its usage is commented out.-const Title = styled.p` - margin: 0; - font-weight: 600; -`;
194-195: Remove commented code.Clean up the codebase by removing the commented-out Title component usage.
- {/* <Title>Statistics</Title> - <StyledDivider /> */}
203-214: Enhance type safety in map operations.The repeated map operations with array slicing could benefit from type improvements and potential refactoring to reduce code duplication.
Consider creating a reusable component for the stat cards section:
interface StatCardsProps { stats: IStat[]; startIndex: number; endIndex: number; data: CourtDetailsQuery["court"] | undefined; pricesData: Record<string, { price: number }> | undefined; coinIds: string[]; } const StatCards: React.FC<StatCardsProps> = ({ stats, startIndex, endIndex, data, pricesData, coinIds }) => ( <StyledCard> {stats.slice(startIndex, endIndex).map(({ title, coinId, getText, getSubtext, color, icon }) => { const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined; return ( <StatDisplay key={title} {...{ title, color, icon }} text={data ? getText(data.court) : <StyledSkeleton />} subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)} isSmallDisplay={true} /> ); })} </StyledCard> );This would reduce code duplication and make the component more maintainable.
Also applies to: 224-235, 245-256
196-259: Enhance semantic structure with HTML5 elements.The current div-based structure could be improved using semantic HTML elements for better accessibility and SEO.
Consider using semantic HTML elements:
- <AccordionContainer> + <main> - <div> + <section aria-label="Parameters"> <AllTimeContainer> <StyledChartIcon /> <StyledAllTimeText>Parameters</StyledAllTimeText> </AllTimeContainer> <StyledCard> {/* ... */} </StyledCard> <StyledDivider /> - </div> + </section> - <div> + <section aria-label="Activity"> {/* ... */} - </div> + </section> - <div> + <section aria-label="Total Rewards"> {/* ... */} - </div> + </section> - </AccordionContainer> + </main>This change would:
- Improve accessibility by providing clear document structure
- Make the content hierarchy more explicit
- Maintain the same visual presentation while enhancing semantics
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/src/pages/Courts/CourtDetails/Stats.tsx(2 hunks)
🔇 Additional comments (1)
web/src/pages/Courts/CourtDetails/Stats.tsx (1)
31-40: Implementation aligns well with PR objectives.
The new Container component successfully replaces the accordion with a simpler, more straightforward layout while maintaining all the necessary information. The flexbox-based design ensures the content remains organized and readable on both desktop and mobile devices.
|
❌ Deploy Preview for kleros-v2-testnet-devtools failed. Why did it fail? →
|
The accordion is not necessary since the statistics are occupying their own column anyways, even on mobile imo.
PR-Codex overview
This PR focuses on refactoring the
Statscomponent in theStats.tsxfile, enhancing the layout and structure while updating the icons used for better representation.Detailed summary
Accordioncomponent and replaced it with a customContainer.Titlestyled component.StyledDividerfor visual separation.ChartIconandBalanceIcon.Summary by CodeRabbit
New Features
Bug Fixes
Style
Container,Title, andStyledDivider.