feat: Random avatar generator for profiles #154

[DaSeeker67]

Related Issue

Random avatar generator for profiles #154

Description

created the function to generate random avatar from boring avatar during the signup saved the generated link into the db and use the link to show the avatar in the user profile page

Screenshots

some authentication error

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @Sanchitbajaj02 on Vercel.

@Sanchitbajaj02 first needs to authorize it.

[github-actions]

Great job, @DaSeeker67! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project. Keep being the part of the community!

'We will promptly review your changes and offer feedback. Keep up the excellent work!
Kindly remember to check our Contributing Guidelines'

[Manishak798]

Resolve Merge Conflicts.

[Sanchitbajaj02]

@DaSeeker67 please resolve the merge conflicts to get this pull request merged

[Girishbari]

@DaSeeker67 do you want any help with this...

[coderabbitai]

Walkthrough

This update integrates a new feature for generating avatars for users upon registration and saving their data. It enhances user authentication by adding password strength and matching validations. The avatar generation logic uses user data to create a unique avatar URL. Additionally, the user interface receives minor adjustments in styling and dynamic image source setting, improving the overall user experience. The Redux state and types are updated to accommodate the new avatar URL data.

Changes

Files	Change Summary
src/backend/auth.api.ts, .../avatarGenerator.ts	Introduced avatar generation on user registration and saving, added password validations in auth.api.ts. avatarGenerator.ts now contains the logic to create avatar URLs.
src/components/pages/user/index.tsx	Updated padding, image src, and styling for a better user interface.
src/redux/reducers/authReducer.ts, src/types/index.d.ts	Added avatarURL to Redux state and user detail type, accommodating the new avatar feature.

Related issues

• Feat: Random avatar generator for profiles #154: This issue requests the addition of a random avatar generator for user profiles, which aligns with the implemented feature of generating avatars based on user data. The use of an external library for avatar generation, as suggested in the issue, is similar to the approach taken in the PR, making it relevant for linking to this PR.

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

• X
• Mastodon
• Reddit
• LinkedIn

---

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>.
  • Generate unit-tests for this file.
• 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 tests 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 generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

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 as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• 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/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 9c5136e and fe7c9d4.

Files selected for processing (5)

• src/backend/auth.api.ts (3 hunks)
• src/backend/avatarGenerator.ts (1 hunks)
• src/components/pages/user/index.tsx (1 hunks)
• src/redux/reducers/authReducer.ts (1 hunks)
• src/types/index.d.ts (1 hunks)

Additional comments: 7

src/backend/avatarGenerator.ts (1)

• 1-13: The implementation of generateAvatar function looks good and follows best practices for URL generation based on user inputs. Ensure that the inputs (name, variant, size, colors) are validated before calling this function to prevent any unexpected behavior or errors.

src/redux/reducers/authReducer.ts (1)

• 13-13: The addition of the avatarURL field to the initialState object in authReducer is consistent and aligns with the feature requirements. Ensure that other parts of the application that consume the creds object are updated to handle the new avatarURL field appropriately.

src/types/index.d.ts (1)

• 28-28: The addition of the avatarURL field to the userDetail type is appropriate and enhances type safety by ensuring its presence in user details. Ensure that all parts of the application that create or manipulate userDetail objects are updated to include the avatarURL field in accordance with the updated type definition.

src/components/pages/user/index.tsx (1)

• 52-60: The updates to dynamically set the src attribute of the Image component based on user data and adjust its width and height attributes are consistent with the feature's objectives to display generated avatars. Ensure to test the UI thoroughly to confirm that these changes result in the desired visual and functional outcomes on the user profile page.

src/backend/auth.api.ts (3)

• 4-4: The import of generateAvatar is correctly implemented to support avatar generation during user registration. This aligns with the feature's objectives.
• 15-23: The addition of password validation checks enhances security by enforcing password strength requirements. Ensure that these checks are thoroughly tested to confirm they work as expected without hindering the user registration process.
• 23-23: The use of generateAvatar within registerUser and saveDataToDatabase to generate and save avatar URLs is a key part of the feature implementation. Ensure that error handling around avatar generation and database operations is robust to manage any potential issues gracefully. Additionally, thoroughly test the registration process to confirm that avatars are correctly generated and saved.

Also applies to: 207-214