New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: refactor data usage into hooks, estimate monthly added fees #7048
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
})); | ||
|
||
const StyledCardTitleRow = styled(Box)(() => ({})); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👀
}: INetworkTrafficUsagePlanSummary) => { | ||
const overages = usageTotal - includedTraffic; | ||
const estimateFlagEnabled = useUiFlag('estimateTrafficDataCost'); | ||
console.log(estimateFlagEnabled); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👀
requests | ||
</Badge> | ||
} | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not something like:
<Badge color={usageTotal <= includedTraffic ? 'success' : 'error'}>
{usageTotal.toLocaleString()}{' '}
requests
</Badge>
} | ||
elseShow={ | ||
<Badge color='error'> | ||
<Badge color='neutral'> | ||
{usageTotal.toLocaleString()}{' '} | ||
requests | ||
</Badge> | ||
} | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add 'neutral' to the ternary as well and you can get rid of this other conditional render with the repeated badge 😄
</StyledGrid> | ||
} | ||
/> | ||
</StyledContainerGrid> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might just be me, but from a design perspective it's a bit weird to me that some of these are badges but not others. At least I don't follow the reasoning. I recommend double checking with @FredrikOseberg just in case.
frontend/src/hooks/useTrafficData.ts
Outdated
import type { ChartDataset } from 'chart.js'; | ||
|
||
const trafficDataUnitCost = 5; | ||
const trafficDataUnitSize = 1_000_000; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we're super strict with this, but we generally identify constants like these with UPPER_SNAKE_CASE.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Non-blocking approval 👍
About the changes