Fix : Rotation Functionality in "Files" Section #10799
Conversation
WalkthroughThe pull request updates the rotation handling in the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant FP as FilePreviewDialog
U->>FP: Click Rotate Button
FP->>FP: Increment rotation by angle (using modulo 360)
FP->>FP: Determine CSS class via getRotationClass
FP-->>U: Render updated preview with new CSS style
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (5)
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 care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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 (3)
src/components/Common/FilePreviewDialog.tsx (3)
128-136: Replace 'any' type with proper StateInterface type.The function implementation is good, but using
anytype reduces type safety.- setFileState((prev: any) => { + setFileState((prev: StateInterface) => {
138-152: Consider using an object literal for rotation mapping.While the current implementation is correct, it could be more concise using an object literal.
- function getRotationClass(rotation: number) { - const normalizedRotation = rotation % 360; - switch (normalizedRotation) { - case 0: - return ""; - case 90: - return "rotate-90"; - case 180: - return "rotate-180"; - case 270: - return "-rotate-90"; - default: - return ""; - } - } + const ROTATION_CLASSES: Record<number, string> = { + 0: "", + 90: "rotate-90", + 180: "rotate-180", + 270: "-rotate-90" + }; + + function getRotationClass(rotation: number) { + return ROTATION_CLASSES[rotation % 360] || ""; + }
339-339: Consider using a more intuitive rotation icon.The current icon 'l-corner-down-left' might not clearly convey the rotation functionality. Consider using a dedicated rotation icon if available in the icon set.
- [t("rotate"), "l-corner-down-left", handleRotate, false], + [t("rotate"), "l-rotate", handleRotate, false],
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Common/FilePreviewDialog.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: Test
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (1)
src/components/Common/FilePreviewDialog.tsx (1)
128-152: LGTM! The rotation functionality implementation is solid.The changes effectively solve the rotation functionality by:
- Implementing a reliable rotation mechanism with proper state management
- Providing clear CSS class mapping for rotations
- Simplifying the UI with a single rotation button
Also applies to: 339-339
anti-clock.mp4 |
| function getRotationClass(rotation: number) { | ||
| const normalizedRotation = rotation % 360; | ||
| switch (normalizedRotation) { | ||
| case 0: |
There was a problem hiding this comment.
minor thing; we can remove case 0.
Proposed Changes
issue_r.mp4
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit