Solved type error using a custom method #10630

Tanuj1718 · 2025-02-16T08:57:52Z

Proposed Changes

Fixes Bug: Getting typeError while uploading cover photo in facility #10618
Define a custom function to explicitly stop the camera for releasing resources.

Screen.Recording.2025-02-16.at.12.48.25.PM.1.mov

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

Add specs that demonstrate bug / test a new feature.
Update product documentation.
Ensure that UI text is kept in I18n files.
Prep screenshot or demo video for changelog entry, and attach it to issue.
Request for Peer Reviews
Completion of QA

Summary by CodeRabbit

New Features
- Introduced a method to stop the camera stream when closing the avatar editing interface.
Bug Fixes
- Improved error handling during image capturing, now displaying an error toast if capturing fails.
Refactor
- Enhanced the closure process for the avatar editing interface, ensuring that the camera shuts down reliably. This update improves overall performance and resource management for a smoother user experience.
Type Safety Improvements
- Updated variable types for better type safety regarding the webcam reference and preview image state.

…evelop

…x-ui

coderabbitai · 2025-02-16T08:57:59Z

Walkthrough

This update refactors the camera stopping logic in the AvatarEditModal component. A new stopCamera method is introduced, which accesses the webcam's media stream and stops all its tracks. The method is implemented using useCallback to maintain a stable reference across re-renders, and it is now invoked in the close button’s onClick handler, encapsulating the logic previously executed directly. Additionally, type safety improvements were made for webRef and previewImage.

Changes

File Path	Change Summary
src/components/Common/AvatarEditModal.tsx	Added a new `stopCamera` method using `useCallback` to stop the camera stream; updated the button’s `onClick` to use this method instead of calling `webRef.current.stopCamera()` directly. Changed `webRef` type from `any` to `Webcam` and updated `previewImage` state type to `string

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant A as AvatarEditModal
    participant W as Webcam Stream

    U->>A: Clicks close button
    A->>A: Invoke stopCamera()
    A->>W: Retrieve current media stream & stop all tracks
    W-->>A: Camera stream stopped

Possibly related PRs

Solved type error using custom function #10628: Introduces a similar stopCamera method in the AvatarEditModal component, encapsulating the logic for stopping the camera stream.

Poem

I'm just a rabbit with a hop and a skip,
In code, I dance with each enhanced tip.
The camera stops with a single, clear call,
Now smooth and tidy, no need for a brawl.
Hoppin' through merges, I celebrate with a flip!
🐇✨
Code leaps forward, on its joyful trip!

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4db802e and 99444b7.

📒 Files selected for processing (1)

src/components/Common/AvatarEditModal.tsx (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

src/components/Common/AvatarEditModal.tsx

⏰ Context from checks skipped due to timeout of 90000ms (1)

GitHub Check: cypress-run (1)

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?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

netlify · 2025-02-16T08:58:17Z

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	`99444b7`
🔍 Latest deploy log	https://app.netlify.com/sites/care-ohc/deploys/67b717b3ef8f220008fbc12c
😎 Deploy Preview	https://deploy-preview-10630.preview.ohc.network
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/Common/AvatarEditModal.tsx (1)
416-420: Improve state management in the close button handler.

The current implementation sets isCameraOpen to false both in the handler and in stopCamera, which could lead to inconsistent state.

Consider this improved implementation:
onClick={() => {
  setPreviewImage(null);
-  setIsCameraOpen(false);
  stopCamera();
}}
This ensures that all camera-related state management is centralized in the stopCamera method.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 21ecdf5 and ffdbb95.

📒 Files selected for processing (1)

src/components/Common/AvatarEditModal.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (5)

GitHub Check: Test
GitHub Check: lint
GitHub Check: cypress-run (1)
GitHub Check: CodeQL-Build
GitHub Check: OSSAR-Scan

🔇 Additional comments (1)

src/components/Common/AvatarEditModal.tsx (1)

93-99: Implementation successfully addresses the type error.

The custom stopCamera method effectively solves the type error by properly accessing and stopping the media stream. The implementation follows best practices for camera resource cleanup.

Also applies to: 416-420

src/components/Common/AvatarEditModal.tsx

Jacobjeevan · 2025-02-18T04:18:17Z

@Tanuj1718 For the future, please use a descriptive title. Current one is just vague.

src/components/Common/AvatarEditModal.tsx

…x-ui

nihal467 · 2025-02-20T19:19:42Z

LGTM

github-actions · 2025-02-20T20:25:46Z

@Tanuj1718 Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌

Tanuj1718 and others added 23 commits February 4, 2025 00:21

improved tablet view responsiveness

ea4a69b

solved i18n issue

85bfad8

Merge branch 'develop' into develop

09f613a

update mobile view responsiveness

158d709

Merge branch 'develop' into develop

b39654d

added responsiveness in organization users page

c4586e6

Merge branch 'develop' into develop

ea48433

minor change in button

73c1773

Merge branch 'develop' of https://github.com/Tanuj1718/care_fe into d…

5283828

…evelop

draft pr

ffdb6df

modified date-field handlers

f46c2eb

minor cleanup

4dfd361

Merge branch 'develop' into fix-issue

70eca3e

Merge branch 'develop' into fix-issue

6f00675

revert unwanted changes

e1b3c37

fix responsiveness

a32aeef

Merge branch 'develop' into fix-ui

6d12bf1

minor change

ebdc962

Merge remote-tracking branch 'upstream/develop' into fix-ui

ad685aa

Merge branch 'fix-ui' of https://github.com/Tanuj1718/care_fe into fi…

fbe0648

…x-ui

Merge remote-tracking branch 'upstream/develop' into fix-ui

5a4a397

Merge remote-tracking branch 'upstream/develop' into fix-ui

0474c0b

solved type error

ffdbb95

Tanuj1718 requested a review from a team as a code owner February 16, 2025 08:57

coderabbitai bot reviewed Feb 16, 2025

View reviewed changes

src/components/Common/AvatarEditModal.tsx Outdated Show resolved Hide resolved

Jacobjeevan added the changes required label Feb 17, 2025

updated with requested changes

4db802e

Jacobjeevan approved these changes Feb 18, 2025

View reviewed changes

Jacobjeevan added needs testing needs review and removed changes required labels Feb 18, 2025

rithviknishad approved these changes Feb 18, 2025

View reviewed changes

src/components/Common/AvatarEditModal.tsx Outdated Show resolved Hide resolved

nihal467 and others added 4 commits February 18, 2025 13:42

Merge branch 'develop' into fix-ui

87519e8

Merge remote-tracking branch 'upstream/develop' into fix-ui

b366d3e

done suggested changes

abfe74e

Merge branch 'fix-ui' of https://github.com/Tanuj1718/care_fe into fi…

99444b7

…x-ui

Jacobjeevan added reviewed reviewed by a core member needs testing and removed needs testing needs review labels Feb 20, 2025

Jacobjeevan added tested and removed needs testing labels Feb 20, 2025

Jacobjeevan merged commit 213fb25 into ohcnetwork:develop Feb 20, 2025
15 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Solved type error using a custom method #10630

Solved type error using a custom method #10630

Tanuj1718 commented Feb 16, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 16, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

netlify bot commented Feb 16, 2025 •

edited

Loading

coderabbitai bot left a comment

Jacobjeevan commented Feb 18, 2025

nihal467 commented Feb 20, 2025

github-actions bot commented Feb 20, 2025

Solved type error using a custom method #10630

Solved type error using a custom method #10630

Conversation

Tanuj1718 commented Feb 16, 2025 • edited by coderabbitai bot Loading

Proposed Changes

Merge Checklist

Summary by CodeRabbit

coderabbitai bot commented Feb 16, 2025 • edited Loading

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

netlify bot commented Feb 16, 2025 • edited Loading

✅ Deploy Preview for care-ohc ready!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Jacobjeevan commented Feb 18, 2025

nihal467 commented Feb 20, 2025

github-actions bot commented Feb 20, 2025

Tanuj1718 commented Feb 16, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 16, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

netlify bot commented Feb 16, 2025 •

edited

Loading